• Cascading Style Sheet, 웹 문서의 스타일을 지정하기 위해 사용하는 언어
  • 여기서 Cascading이 작은 폭포란 뜻인데, 상위 요소의 스타일을 자식 요소들에게 상속시켜주는 모습이 마치 폭포수와 같다 하여 Cascading을 붙였다 칸다

구조

• 기본적으로 선택자, Selector와 선언 블록, Declaration으로 구성되어 있으며, 선언 블록은 하나 이상의 속성과 값을 지닌다
• 선택자, Selector는 스타일을 적용할 HTML 요소, 태그 이름, 클래스명, ID 등, 요소 또는 그룹으로 선택할 수 있다
• 선언 블록, Declaration은 중괄호({})로 둘러싸며, 속성과 값은 콜론(:)으로 구분, 속성 선언은 세미콜론(;)으로 구분한다

Layouts

Layouts

반응형 디자인

• Responsive Web Design, 다양한 화면 크기에서 웹 페이지를 잘 보여지도록 하는 디자인 기법

Media Queries

• 화면 크기 및 해상도의 다양한 조건에 따라 서로 다른 스타일을 적용할 수 있게 해준다

body {
  background-color: red;
}

/* 화면이 600px 이하면 배경색을 바꾸도록 세팅 */
@media (max-width: 600px) {
  body {
    background-color: blue;
  }
}

Percentage, Min/Max

• 퍼센티지, 백분율은 요소 속성을 퍼센티지로 지정하여 상대적인 크기로 설정한다
• 또한 요소의 최소, 최대 속성을 지정하여 확장 또는 축소를 설정할 수도 있다

.box {
  width: 50%;       /* 너비를 부모의 50%로 설정 */
  min-width: 100px; /* 최소 너비 */
  max-width: 300px; /* 최대 너비 */
}

방법론

• CSS를 더 잘 작성하기 위한 여러 방법론들이 있는데, 거진 다 아래 방법으로 귀결되는거 같다

BEM 방법론