CSS 소개

개념 이해하기

CSS 규칙은 선택자로 HTML 요소를 찾고 속성과 값으로 표현을 지정합니다. HTML 구조를 유지한 채 CSS만 바꿔도 화면의 인상과 레이아웃을 전부 바꿀 수 있습니다.

.target 규칙 하나가 대상 요소와 두 번째 요소에 함께 적용됩니다. 두 번째 div의 class 속성에는 target과 second가 공백으로 나뉘어 들어 있어 같은 선택자에 걸리기 때문입니다. 그래서 두 상자 모두 18px 안쪽 여백과 짙은 초록 배경, 흰 글자를 얻고, 선택자에 걸리지 않은 h1과 lead 문단은 원래 모습을 유지합니다.

CSS를 한 줄도 쓰지 않아도 h1이 크고 굵게 보이는 것은 브라우저가 자체 기본 스타일시트를 먼저 적용하기 때문입니다. 작성자 CSS는 그 위에 필요한 속성만 덮어쓰므로, 선언하지 않은 속성은 브라우저 기본값을 쓰거나 color처럼 상속되는 속성이라면 부모의 값을 물려받습니다.