CSS는 HTML 문서의 색, 글꼴, 간격과 배치를 지정하는 스타일시트 언어다. 같은 HTML 구조라도 CSS를 바꾸면 화면, 인쇄물, 여러 크기의 기기에 맞는 표현을 만들 수 있다. 문서 내용과 표현을 나누어 관리하는 것이 기본 역할이다.
규칙이 적용되는 방식
CSS 규칙은 선택자와 선언으로 구성된다. .notice { color: teal; }은 notice 클래스를 가진 요소의 글자색을 지정한다. 한 요소에 여러 규칙이 걸릴 수 있기 때문에 브라우저는 캐스케이드의 우선순위, 선택자 명시도와 선언 순서 등을 고려해 적용할 값을 정한다. 어떤 값은 상위 요소에서 상속되지만 모든 속성이 상속되는 것은 아니다. 관련 공식 설명.
크기와 간격 이해하기
요소 주변의 간격을 조정할 때는 내용, 안쪽 여백, 테두리, 바깥 여백을 구별한다. 예를 들어 문서 카드 안에서 글과 테두리 사이 간격은 padding, 카드끼리의 간격은 margin이나 레이아웃의 gap으로 표현할 수 있다. 고정된 큰 너비를 여러 요소에 넣으면 좁은 화면에서 넘칠 수 있다. 먼저 가용 공간에 맞는 크기를 정하고 필요한 곳에 최대 너비를 적용하는 식으로 접근한다.
배치 도구 선택
| 상황 | 고려할 도구 |
|---|---|
| 메뉴와 버튼을 한 방향으로 정렬 | Flexbox |
| 본문과 사이드바를 행·열로 배치 | Grid |
| 작은 화면에서 배치 변경 | 미디어 쿼리 |
Flexbox와 Grid는 서로 대체해야 하는 경쟁 기능이라기보다 배치 문제에 따라 함께 사용하는 도구다. 전체 페이지는 Grid, 카드 안 버튼 정렬은 Flexbox로 구성할 수 있다.
유지보수와 한계
색상과 간격을 일관되게 쓰려면 사용자 정의 속성으로 반복 값을 묶을 수 있다. 다만 CSS가 시각적 순서를 바꾸더라도 문서의 읽기 순서까지 항상 바뀌는 것은 아니다. 반응형 웹 디자인에서는 너비뿐 아니라 긴 텍스트, 확대 상태, 포커스 표시도 확인한다. 스타일이 적용되지 않을 때는 우선순위와 계산된 값을 개발자 도구로 확인하는 편이 무작정 규칙을 추가하는 것보다 명확하다.
참고: 공식 개발 문서.