5강 · CSS 붙이기

한눈에

네 편 동안 의미만 다뤘고, 페이지는 아직 문서처럼 생겼습니다. 오늘은 CSS 를 붙여서 모양을 직접 정하기 시작합니다.

오늘 다룰 내용은 세 가지입니다. 먼저 CSS 규칙의 모양을 봅니다. 생각보다 간단합니다. 그다음 붙이는 방법 세 가지와, 그중 하나를 고르는 이유를 봅니다. 마지막으로 페이지를 읽기 좋게 만드는 스타일시트를 작성합니다. 지금까지 보신 모양은 전부 기본값이었습니다. 글꼴도 크기도 간격도 브라우저가 정한 것입니다. CSS 는 그것을 우리가 정하기 시작하는 지점입니다. HTML 은 그대로 두고 파일 하나를 더 만드는 것뿐입니다. 규칙 하나를 뜯어보겠습니다. body 가 선택자입니다. 어떤 요소에 적용할지를 말해줍니다. 중괄호 사이의 내용이 그 요소들에 적용됩니다. color 가 속성이고, 무엇을 바꿀지를 가리킵니다. 콜론 다음에 값이 오는데, 여기서는 색을 열여섯 진수로 적었습니다. 세미콜론이 줄을 끝냅니다. 선언마다 하나씩 붙여주시면 됩니다. CSS 를 붙이는 방법은 세 가지이고, 전부 동작합니다. 태그에 style 속성으로 직접 적을 수 있습니다. 다시 쓸 수 없어서 거의 안 쓰이는 편입니다. head 안에 style 덩어리를 둘 수도 있고, 한 장짜리면 괜찮습니다. 아니면 따로 파일로 두는데, 우리는 이 방법으로 갑니다. 폴더를 다시 열어보겠습니다. 지금까지 파일이 두 개였고, 오늘 세 번째가 들어옵니다. 페이지 자체는 거의 안 바뀝니다. head 에 한 줄만 들어갑니다. 나머지는 전부 새 파일에서 일어납니다. 처음 작성할 네 줄입니다. system-ui 는 이 컴퓨터가 자기 메뉴에 쓰는 글꼴을 뜻합니다. 어느 컴퓨터에서도 어울리고, 따로 내려받지 않아도 됩니다. line-height 를 1.6 으로 두는 것이 읽기 쉽게 만드는 가장 간단한 방법입니다. 색은 완전한 검정 대신 살짝 부드러운 검정입니다.

style.css 라는 새 파일을 만듭니다. 이름은 마음대로 정해도 되고, 보통 이렇게들 씁니다. 첫 줄은 주석이고, 브라우저는 이것을 완전히 무시합니다. 슬래시와 별표로 열고, 별표와 슬래시로 닫습니다. 여기에는 HTML 이 하나도 없다는 점을 보셔야 합니다. 꺾쇠도 태그도 없습니다. 다른 파일에 들어간 다른 언어입니다. 저장해도 아직 페이지에는 아무 일이 없습니다.

style.css

/* page */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1E222A;
}

/* headings */

두 파일은 아직 서로를 모릅니다. head 에 한 줄을 넣으면 연결됩니다. rel 은 이 파일이 어떤 종류인지, 스타일시트라고 알려줍니다. href 는 경로인데, 같은 폴더라서 이름만 적으면 됩니다.

link 태그는 head 안, title 아래에 넣습니다. 닫는 태그가 없는데, meta 나 img 와 같습니다. head 에 두어야 꾸며지지 않은 화면이 잠깐 비치는 일이 없습니다. 두 파일을 저장하고 확인해보겠습니다.

index.html

  <link rel="stylesheet" href="style.css">

서버는 늘 하던 대로 띄웁니다. 폴더를 통째로 넘겨주기 때문에 새 파일도 같이 따라갑니다. style.css 가 있다고 따로 알려줄 필요가 없었습니다.

터미널

python -m http.server 5500

모든 줄의 글꼴이 바뀌었습니다. 우리가 쓴 규칙은 하나이고, body 에 대한 것이었습니다. body 안의 모든 것이 거기서 글꼴을 물려받았습니다. 이것을 상속이라고 하고, 타이핑을 아주 많이 줄여줍니다. 줄 간격도 전보다 넓어졌습니다. 지금 이런 화면이 보이고 계셔야 합니다. 글꼴이 깔끔해지고 줄 사이에 여유가 생겼습니다. 아무것도 안 바뀌었으면 link 태그부터 확인해주시면 됩니다. 파일 이름에서 글자 하나만 틀려도 브라우저는 아무것도 못 찾습니다. 같은 규칙 안에 선언 세 개를 더 넣습니다. max-width 는 넓은 화면에서 글이 끝까지 늘어나는 것을 막아줍니다. margin 을 auto 로 두면 남는 공간을 똑같이 나눠서 가운데로 옵니다. padding 은 좁은 화면에서 글이 가장자리에 붙지 않게 해줍니다.

이미 있는 중괄호 안쪽에 들어갑니다. 규칙 하나에 선언은 얼마든지 넣을 수 있습니다. 이걸 위해 body 규칙을 하나 더 만들지는 않습니다. 위아래는 48픽셀, 좌우는 auto 입니다. 저장해보시면 이번 변화는 확실히 느껴지실 겁니다.

style.css

  max-width: 680px;
  margin: 48px auto;
  padding: 0 20px;

글이 화면 끝까지 늘어나지 않게 되었습니다. 창 가운데에 기둥처럼 모여 있습니다. 창을 좁혀보시면 기둥이 따라 줄어드는 것을 보실 수 있습니다. 680픽셀보다 좁아지면 그냥 화면을 채웁니다. 반응형이라고 부르는 것의 상당 부분이 이 세 줄입니다. 지금까지 페이지에 일어난 변화 중 가장 큽니다. 긴 줄은 읽기 어렵습니다. 왼쪽으로 돌아오는 길에 눈이 자리를 놓치기 때문입니다. 한 줄에 60자에서 80자 정도가 편한 범위입니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 선언 끝에 세미콜론을 빠뜨리는 경우입니다. 브라우저가 그 줄과 다음 줄까지 버립니다. 둘째, link 에 적은 파일 이름이 실제 파일과 다른 경우입니다. 오류도 안 나고 아무 일도 없습니다. 조용히 무시됩니다. 셋째, link 를 head 가 아니라 body 에 넣는 경우입니다. 마치기 전에 서버를 멈춰두겠습니다. 이제 폴더에 파일이 세 개 있습니다. 페이지와 그림, 그리고 스타일시트입니다. 셋 다 텍스트이고, 글자 하나까지 우리가 직접 쳤습니다. 오늘 기억하실 것 세 가지입니다. 규칙은 선택자와 중괄호 안의 선언으로 되어 있습니다. CSS 는 따로 파일로 두고 head 에서 한 번 연결해주시면 됩니다. body 부터 시작하세요. 거기 적은 것이 아래로 흘러내려갑니다. 다음 시간에는 원하는 요소만 정확히 골라내는 법을 보겠습니다.

---

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.