작은 페이지 꾸미기

HTML 과정의 빵집 페이지는 CSS 약 40줄로 색, 간격, 배치를 얻고, HTML은 한 줄도 바뀌지 않습니다.

규칙보다 결정을 먼저

규칙을 쓰기 전에 몇 가지를 먼저 정합니다. 강조색 하나, 대비가 충분한 글자색과 배경색, 글꼴 목록 하나, 기본 글자 크기, 어디서나 되풀이하는 간격 단계(예를 들면 8, 16, 24픽셀)입니다. 몇 가지 값을 거듭 쓰는 페이지는 차분하고 의도가 보입니다. 상자마다 조금씩 다른 여백을 가진 페이지는 이유를 짚기 어려워도 어수선해 보입니다. CSS에는 바로 이럴 때 쓰는 기능인 사용자 정의 속성이 있습니다.

사용자 정의 속성

사용자 정의 속성은 하이픈 두 개로 시작하는, 내가 지은 이름에 값을 담은 것입니다. --accent: #1a5fb4;처럼 씁니다. html 요소인 :root에 결정한 값을 한 번 정의해 두고, 어디서나 var()로 씁니다. background: var(--accent);처럼요. 사용자 정의 속성은 글자 속성처럼 상속되므로, 루트에 정의한 값은 모든 요소가 읽을 수 있습니다. 이제 사이트 전체의 강조색을 바꾸려면 한 줄만 고치면 됩니다. 미디어 쿼리 안에서 다시 정의할 수도 있어서, prefers-color-scheme: dark일 때 색을 바꾸는 식으로 쓸 수 있습니다.

:root {
  --accent: #1a5fb4;     /* 6.29:1 on white */
  --ink: #222;
  --paper: #fffdf8;
  --space: 16px;
}
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
header { display: flex; justify-content: space-between; align-items: center;
         flex-wrap: wrap; gap: var(--space); padding: var(--space); }
nav ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 60rem; margin: 0 auto; padding: var(--space); }
.cards { display: grid; gap: var(--space);
         grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card { padding: var(--space); border: 1px solid #ddd; border-radius: 8px; }
img { max-width: 100%; height: auto; }
.btn { background: var(--accent); color: white; border: 0;
       padding: 8px var(--space); border-radius: 6px; font: inherit; }
.btn:hover { background: #154c90; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

스타일시트를 위에서부터 읽기

위 스타일시트에는 거의 모든 단원의 내용이 들어 있습니다. 루트에는 결정한 값이 들어 있습니다. body가 글꼴, 줄 간격, 색을 한 번 정하면 상속이 모든 문단에 전해 줍니다. 머리말은 줄바꿈되는 플렉스 행이라, 좁은 휴대전화에서는 메뉴가 찌그러지지 않고 이름 아래로 내려갑니다. main에는 max-width와 margin: 0 auto를 줘서 줄을 읽기 좋은 길이로 유지하고 넓은 화면에서 가운데에 둡니다. 카드는 auto-fill 그리드 패턴을 써서 미디어 쿼리 없이 한 열에서 여러 열로 다시 흘러가고, 그림은 컨테이너에 맞춰 줄어듭니다. 버튼에는 마우스를 올렸을 때의 색과, 그만큼 중요한 키보드 사용자를 위한 똑똑히 보이는 초점 테두리를 줍니다.

실제 화면에서 확인하기

CSS 시험은 눈으로 보는 일입니다. 좁은 창(WCAG 리플로우 기준인 320픽셀)과 넓은 창에서 페이지를 열고, 옆으로 스크롤이 생기거나 글자가 가장자리에 닿는 곳이 없는지 봅니다. 200퍼센트로 확대해 봅니다. Tab으로 페이지를 지나며 초점이 어디 있는지 항상 보이는지 확인합니다. 개발자 도구에서 글자와 버튼의 대비를 봅니다. 어두운 모드나 움직임 줄이기에 맞춘 스타일이 있다면 시스템 설정을 켜서 확인합니다. 브라우저 개발자 도구에서는 어떤 값이든 바로 바꿔 보고 어떤 요소든 박스 모델을 볼 수 있어서, 「이게 왜 여기 있지?」라는 물음에 답하는 가장 빠른 방법입니다.

여기서 쓴 조각들은 어떤 사이트에도 그대로 큼직하게 쓸 수 있습니다. 큰 프로젝트는 스타일시트를 여러 파일로 나누고, 클래스 이름을 부품이 무엇인지(card, button, site-header)로 짓고, 함께 쓰는 사용자 정의 속성을 짧게 정리해 둡니다. 하지만 그 아래에 있는 규칙은 이 아홉 단원에서 본 것과 같습니다.