CSS 기본 구조

기본 구조: 선택자, 속성, 값

CSS는 아래와 같이 구성됩니다.

CSS 기본 구조

선택자 {
  속성: 값;
}

프린터가 좌표마다 지정된 색상으로 컬러를 인쇄하는 것처럼, CSS는 어느 HTML 요소(선택자)에 어떠한 것(속성)을 어떻게(값) 스타일링할지 정하는 규칙이 있습니다.

• 선택자: 스타일을 정의할 HTML 요소 선택

• 속성과 값: 선택한 요소에 어떤 속성을(예: 색상, 글자 크기), 어떻게 적용할지(예: red, 16px) 지정

예를 들어 앞서 정의한 h1 태그에 빨간색을 적용하려면, 아래와 같은 CSS를 작성합니다.

CSS

h1 {
  color: red;
}

여기서 h1은 선택자, color는 속성, red는 값입니다.

값 끝에는 항상 세미콜론(;)을 붙여, 해당 줄(Line)이 끝났다는 것을 알려주어야 합니다.