CSS 사용의 유행: CSS 및 강력한 프로세서 소개

CSS는 어떻게 된 거예요?
유니버설 네트워크 연합(W3C)이 개발하여 1996년에 내놓은 CSS(계단식 스타일시트)는 HTML과 자바스크립트와 함께 웹 개발의 초석 중 하나이다.CSS는 개발자가 최상의 실천을 따라 서로 다른 파일에 내용과 스타일 형식을 보존함으로써 관심사를 분리하여 코드를 깔끔하고 질서정연하게 유지할 수 있도록 한다.대부분의 새로운 개발자들은 초기에 CSS를 사용하여 레이아웃과 포지셔닝의 기초를 연구하기 전에 글꼴과 배경색을 바꾸어 페이지에서 예상치 못한 의외의 사고를 일으킨다.네모난 프레임 모델과 포지셔닝 키워드를 이해하는 것은 디자인 레이아웃과 예상된 행위에 따른 요소를 배정하는 데 필요하다.
CSS 상자 모델
페이지의 모든 내용은 CSS의 상자로 간주될 수 있습니다.각 HTML 요소는 네모난 상자에 포함되며 네모난 상자는 네 부분으로 구성되어 요소 내외의 크기와 공간을 조정하고 각 요소 간의 공간을 정의할 수 있습니다.다른 부분을 내용, 채우기, 테두리 및 여백이라고 합니다.

컨텐트는 표시되는 실제 텍스트, 이미지 또는 비디오를 나타냅니다.채우기는 컨텐트와 프레임 사이의 내부 공간입니다.테두리는 채우기와 내용을 둘러싸고, 너비와 색을 지정하지 않으면 보이지 않습니다.마지막으로 여백은 요소와 페이지의 다른 요소 사이의 공간입니다.중요한 것은 요소와 요소 사이의 공백을 고려하여 내용이 붐비지 않고 페이지가 깔끔하고 질서정연하게 보이도록 하는 것이다.
요소 위치 지정
position 속성은 요소의 페이지 배열 방식을 지정합니다.많은 키워드가 위치를 지정할 수 있지만 정적, 상대적, 고정, 절대, 점성 등 다섯 가지 키워드가 있습니다.

정적 위치는 HTML 요소가 문서의 순서(기본적으로 컨테이너의 왼쪽 위 모서리)에 따라 정상적이고 설정되지 않은 스타일의 위치입니다.상대는 기본 위치와의 거리입니다.예를 들어 상대 상단: 20px는 이미지를 정상적인 상단 위치에서 20px로 이동합니다.Fixed는 원소를 뷰포트에 붙여서 스크롤을 해도 그대로 유지됩니다.이것은 일반적으로 내비게이션 표시줄과 제목에 적용되는데, 목적은 항상 볼 수 있고 이동하지 않는 것이다.절대는 최근에 포지셔닝된 부모 요소에 대한div를 가리킨다. 부모 요소를 찾지 못하면 주체에 대한 포지셔닝이 됩니다.점성은 고정과 상대의 결합과 같다.점착 컴포넌트는 특정 조건이 충족될 때까지 화면에 고정됩니다.예를 들어 페이지 중간에 있는 스크롤 div는 스크롤 바가 밑에 도착하기 전에 변하지 않습니다. 이 때 전체 페이지는 평소와 같이 계속 스크롤됩니다.
요소의 크기를 효과적으로 포지셔닝하고 조정하는 방법을 알게 되면 색깔과 글씨체를 맞춤형으로 만들거나 프로세서의 기능을 프로젝트에 통합하는 등 재미있는 일을 계속할 수 있다.
CSS 프로세서란 무엇입니까?
하나의 프로그램은 일반적인 오래된 CSS로 컴파일할 수 있는 자신만의 문법과 특성을 가지고 있으며, 이를 프로세서라고 부른다.프로그래밍 언어의 라이브러리나 프레임워크와 유사하게 프로세서는 더욱 질서정연한 구조, 강력한 기능을 도입하거나 코드를 더욱 쉽게 읽고 유지할 수 있다.많은 선택이 있지만, 사스는 분명히 인기 있는 지도자이다.SASS를 숙지하는 것은 어떤 포부를 가진 전단 개발자에게도 유용하다. 왜냐하면 SASS는 업무 중에 사용될 가능성이 높기 때문이다.
거칠어질 때가 됐어요.
SASS(문법적으로 경외스러운 스타일시트)는 2006년 발표된 CSS의 언어 확장으로 CSS의 기능을 확장하고 대형 프로그램의 유지보수와 확장성을 향상시키기 위한 것이다.SAS는 브라우저가 읽을 수 있도록 일반 CSS로 컴파일해야 합니다.SASS의 주요 장점 중 하나는 CSS가 더욱 간단하고 지루할 수 있는 블록 스타일에 끼워 넣을 수 있다는 것이다. 이것은 HTML과 프로그래밍 언어가 하위 요소를 끼워 넣는 방식과 같은 차원 구조를 만들고 요소 간의 관계를 즉시 전달할 수 있다는 것이다.

//SASS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

많은 요소를 추적해야 하는 대형 프로그램에서 이런 시각 조직은 매우 유용하다.
SASS가 더 멋있게 할 수 있는 거.
그러나 SASS와 프로그래밍 언어의 유사점은 중첩에만 있는 것이 아니다.SASS는 코드를 간결하게 유지하는 데 유용한 변수를 허용합니다.전체 페이지 레이아웃에 사용할 특정 색상에 변수를 지정하고 16진수 코드를 반복해서 찾거나 기억하지 않고 이 이름으로 참조할 수 있습니다.

$pink: #ffbcd9;
$adagio-font: 'Adagio Sans', 'Arial', 'Helvetica', sans-serif;
$carto-font: 'Cartogothic', 'Arial', 'Helvetica', sans-serif;

h1 {
  font: $adagio-font;
  color: $pink;
}
a {
  font: $carto-font;
  background-color: $pink;
  padding: 5px;
}

너는 심지어 SASS로 순환과 조건문을 만들 수 있다!

//SASS conditional

@if width(body) > 500px {
  background color: blue;
 } else {
  background color: white;
 }

SASS의 특성은 혼합되어 재사용 가능한 코드 블록이 SASS 변수를 매개 변수로 받아들일 수 있도록 하는 것이다.mixin은 CSS 코드로 직접 컴파일됩니다.

@mixin overlay() {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.modal-background{
  @include overlay();
  background: black;
  opacity: 0.9;
}

@includes는 프로그램에 이전에 정의된 @mixin을 사용하라고 알려 줍니다.
SASS는 실제 프로그래밍 언어와 유사한 기능도 가지고 있다.이 함수들은 다른 함수를 받아들이거나 출력하거나 CSS 속성에 대한 값을 생성할 수 있습니다.

@function calculator-function($number-one, $number-two){
  @return $number-one + $number-two
}

.this-div {
  padding: calculator-function(10px, 5px);
}

.this-div {
  padding: 15px;
}

(비슷해 보이지만 함수는 값을 출력하고 코드 줄을 혼합한다는 것을 기억하십시오.)
결론
모든 프런트엔드 작업에는 최소한 CSS 지식이 필요합니다.이것은 매우 간단한 소개입니다. 요소를 정성스럽게 디자인하고 목적이 있는 레이아웃을 만드는 출발점으로 포지셔닝하는 방법을 소개했지만 필터, 애니메이션, 클릭 이벤트 효과 등 CSS로 좋은 일을 많이 할 수 있습니다. 이것은 모두 당신의 상상에만 국한됩니다.SASS의 기능을 활용하면 잠재력을 더욱 발휘할 수 있을 뿐만 아니라 더 적은 코드가 필요하다.실험이 즐겁다!
이미지 소스
상자 모델:espezua.github.io
CSS 포지셔닝: 중간.com/@demayous1/about-css-positioning-7a913dc7425a