뼈대 따로
꾸밈 따로

HTML, 무엇이 있는가

웹페이지의 뼈대를 적은 것이 HTML이다. HyperText Markup Language의 줄임말로, 글에 꼬리표(태그)를 다는 언어다.

태그는 여는 것과 닫는 것이 짝을 이룬다. <h1>제목</h1>처럼 감싼다. h1은 가장 큰 제목이고, p는 문단(paragraph)이다.

HTML은 꾸밈을 모른다. 색도 크기도 정하지 않고, "여기 제목, 여기 문단"이라는 뼈대만 말한다.

CSS, 어떻게 보이는가

뼈대에 색과 크기, 여백과 배치를 입히는 것이 CSS다. Cascading Style Sheets의 줄임말로, "제목은 파랑, 글자는 크게, 가운데로" 같은 꾸밈 규칙을 모아둔 것이다.

규칙 하나는 이렇게 생겼다. h1 { color: blue; }은 "모든 h1을 파랑으로"라는 뜻이다. font-size는 글자 크기를 정하고, padding은 안쪽 여백을 정한다.

같은 HTML이라도 CSS만 갈아끼우면 모습이 완전히 달라진다. 내용은 그대로 두고 옷만 바뀐다.

왜 일부러 갈라놨나

뼈대(HTML)와 꾸밈(CSS)을 한 파일에 섞을 수도 있었지만 일부러 나눴다.

섞어두면 디자인을 한 번 바꿀 때 모든 페이지를 다 뜯어고쳐야 한다. 갈라놓으면 CSS 한 곳만 고쳐도 사이트 전체 색이 한 번에 바뀐다.

역할도 나뉜다. 내용 쓰는 사람은 HTML만 보고, 꾸미는 사람은 CSS만 보면 된다.

컴퓨터에게도 좋다. 검색엔진과 화면낭독기는 HTML 뼈대만 보고 "여기가 제목, 여기가 문단"임을 이해한다. 이것을 관심사 분리라고 한다.

직접 굴려보기

위는 HTML, 아래는 CSS다.

위쪽 버튼으로 <h1>, <p>, <button>을 넣고 빼면 미리보기에서 블록이 생겼다 사라진다. 구조를 바꾸는 일이다. 아래 슬라이더로 글자 크기와 여백, 색을 바꾸면 같은 블록이 모습만 변한다. 꾸밈을 바꾸는 일이다.

태그를 빼도 슬라이더 값은 그대로 남는다. 둘이 따로 논다는 것이 한눈에 보인다. 이 분리가 웹 전체를 떠받친다.

<!-- HTML: 무엇이 있나 -->
<h1>안녕, 웹.</h1>
<p>이 한 줄은 문단이다.</p>

/* CSS: 어떻게 보이나 */
h1 { font-size: 28px;
     color: blue;
     text-align: center; }

둘을 잇는 한 가지, 선택자

따로 논다면 CSS는 어느 HTML을 꾸밀지 어떻게 알까. 답은 선택자다.

CSS 규칙 맨 앞 글자가 선택자다. h1이라 쓰면 모든 h1을 겨냥하고, p라 쓰면 모든 문단을 겨냥한다. 겨냥한 뒤에 옷을 입힌다.

더 콕 집고 싶으면 이름표를 붙인다. HTML에 class="hero"를 달고 CSS에 .hero라 쓰면 그 블록만 꾸민다. 점(.)이 "클래스 이름"이라는 신호다.

HTML로 짓고, CSS로 입히고, 선택자로 잇는다. 이것이 웹페이지의 재료다.