4강 · 페이지에 뼈대 넣기

한눈에

지금 페이지에는 사진과 제목, 목록, 링크 두 개가 들어가 있습니다. 오늘은 그 부분들에 이름을 붙여보겠습니다.

오늘 다룰 내용은 세 가지입니다. 먼저 페이지에 이름 붙은 구역이 왜 필요한지 보겠습니다. 그다음 구역 하나와 바닥글을 추가합니다. 마지막으로 한 덩어리에 이름을 붙여서 링크로 바로 갈 수 있게 만듭니다. 2강에서 본 생각이 한 단계 올라간 것입니다. div 라는 태그가 있는데, 아무 뜻도 담지 않습니다. section 은 똑같은 상자를 그리면서, 그 상자가 무엇인지까지 말해줍니다. 스크린 리더와 검색 엔진이 그 차이를 읽습니다. 구역 사이를 건너뛰는 기능은 구역이 실제로 있어야 동작합니다. 태그 여섯 개면 앞으로 쓰실 거의 모든 페이지가 설명됩니다. header 는 페이지의 위쪽, 또는 구역의 위쪽입니다. nav 는 다른 곳으로 가는 링크들이 모인 덩어리입니다. main 은 본문이고, 한 페이지에 하나만 둡니다. section 은 자기 제목을 가진 페이지의 한 부분입니다. article 은 따로 떼어 놓아도 말이 되는 덩어리입니다. footer 는 페이지나 구역의 바닥입니다. 전부 평범한 덩어리로 그려집니다. 중요한 것은 의미입니다. 오늘은 그중 둘을 쓰고, 나머지는 8강에서 다시 보게 됩니다. 같은 폴더를 다시 열어보겠습니다. 지금 폴더에는 페이지와 그림, 파일 두 개가 있습니다. 오늘 추가할 것은 전부 body 아래쪽에 들어갑니다. 이미 작성해 둔 내용은 바뀌지 않습니다. 앞으로도 계속 이런 식으로 쌓아 올라갑니다. 먼저 추가할 덩어리입니다. section 하나와 그 안의 제목, 그리고 글 한 줄입니다. id 는 이 덩어리에 이름을 붙여서 나중에 가리킬 수 있게 해줍니다. section 은 거의 항상 제목으로 시작합니다. 제목이 없는 덩어리라면 아마 section 이 아닐 겁니다. 그리고 이것이 바닥글입니다. 누가 언제 만들었는지 한 줄 적습니다. footer 는 맨 끝에만 오는 것이 아니라 구역 안에도 들어갈 수 있습니다. id 이름은 우리가 정하는 것이고, contact 는 뜻이 분명합니다. 둘 다 입력해보겠습니다.

파일이 길어져서 글자를 먼저 줄이겠습니다. 두 덩어리 모두 마지막 문단 다음, body 안쪽에 들어갑니다. section 안의 제목과 글은 한 단계 더 들여써 줍니다. 들여쓰기를 보면 무엇이 무엇에 속하는지 보입니다. Ctrl + S 로 저장하시면 되고, 맥에서는 Cmd + S 입니다.

index.html

  <section id="contact">
    <h2>Contact</h2>
    <p>Write to me, or open an issue on GitHub.</p>
  </section>

  <footer>
    <p>Made by hand in 2026. No frameworks.</p>
  </footer>

지난 세 번과 같은 서버 명령어입니다. 페이지가 커져도 이 명령은 달라지지 않습니다. 끝날 때까지 그대로 두시면 됩니다.

터미널

python -m http.server 5500

아래쪽에 새 덩어리 두 개가 들어갔습니다. Contact 와 글 한 줄, 그리고 그 아래 한 줄입니다. 아직 꾸민 것이 없어서 평범한 글처럼 보입니다. CSS 를 쓰기 전의 페이지는 원래 이런 모습입니다. 모양은 그대로지만 의미는 달라졌습니다. 지금 이런 화면이 보이고 계셔야 합니다. 기존 내용 아래에 덩어리 두 개가 더 붙어 있습니다. 자리가 바뀐 것도 색이 달라진 것도 없습니다. 브라우저는 section 과 div 를 똑같이 그려줍니다. 다음 시간부터는 이야기가 달라집니다. 이제 그 이름이 쓸모 있어지는 부분입니다. section 에 id 가 붙어 있고, 그 이름이 contact 입니다. 링크는 앞에 샵을 붙여서 그 이름을 가리킬 수 있습니다. 브라우저가 아무것도 새로 받지 않고 그 자리로 내려갑니다. 나중에 CSS 와 자바스크립트도 같은 이름을 사용합니다.

기존 링크 두 개 옆에 하나를 더 추가합니다. 주소는 샵 하나와 이름이 전부입니다. 뒤에 파일도 없고 서버에 요청을 보내지도 않습니다. 저장하고 눌러보겠습니다.

index.html

    <a href="#contact">Contact</a>

이제 링크가 세 개입니다. 두 개는 페이지를 떠나고 하나는 머무릅니다. 세 번째를 누르면서 주소창을 보셔야 합니다. 주소 끝에 샵과 이름이 붙습니다. 그 주소를 복사해서 보내면 상대가 그 덩어리로 바로 올 수 있습니다. 이름 붙이는 방법이 두 가지인데, 고르는 기준은 개수입니다. id 는 페이지에서 딱 하나에만 붙습니다. class 는 원하는 만큼 여러 곳에 붙일 수 있습니다. 애매하면 class 를 쓰시면 됩니다. 손해 볼 것이 없습니다. 6강에서는 둘 다 요소를 골라내는 방법이 됩니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 같은 id 를 두 곳에 쓰는 경우입니다. 링크는 첫 번째로만 가고 두 번째는 닿을 수 없게 됩니다. 둘째, 안에 제목이 없는 section 입니다. 셋째, 링크 주소에서 샵을 빠뜨리는 경우입니다. 샵이 없으면 브라우저가 그 이름의 파일을 찾으러 갑니다. 마치기 전에 서버를 멈춰두겠습니다. 페이지가 45줄이 되었습니다. 4강까지 왔는데 아직 아무것도 설치하지 않았습니다. 다음 시간에 파일을 하나 더 추가하면 페이지가 밋밋함을 벗습니다. 그래도 설치할 것은 없고, 글자는 전부 직접 치게 됩니다. 오늘 기억하실 것 세 가지입니다. 구역에 이름을 붙이면, 태그가 그 덩어리의 쓰임을 말해줍니다. id 는 하나뿐인 이름이고, 링크로 바로 갈 수 있습니다. 모양은 거의 그대로지만 의미가 달라졌습니다. 다음 시간부터는 드디어 모양을 직접 정하기 시작합니다.

---

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