2강 · 의미를 담는 태그들

한눈에

지난 시간에는 제목 하나와 글 두 줄짜리 페이지를 만들었습니다. 오늘은 읽는 사람이 훑어볼 수 있도록 페이지에 구역을 만들어보겠습니다.

오늘 다룰 내용은 세 가지입니다. 먼저 태그가 무엇을 위한 것인지 살펴봅니다. 그다음 제목과 두 가지 목록을 추가합니다. 마지막으로 두 단어를 서로 다른 방식으로 강조해보겠습니다. 지난 시간과 같은 폴더를 열어보겠습니다. 지난번에 만든 index.html 이 왼쪽에 그대로 있습니다. 오늘은 처음부터 다시 만드는 것이 아니라, 있던 파일에 덧붙이는 방식으로 갑니다. 앞으로도 계속 이런 식으로 진행됩니다.

태그는 무엇인지를 말합니다

지금 들여두시면 좋은 습관이 하나 있습니다. 태그는 어떻게 보일지가 아니라, 그것이 무엇인지를 말해줍니다. 구역의 제목이기 때문에 h2 를 쓰는 것입니다. 크고 굵게 나오는 것은 부수적인 결과이고, 그 모양은 나중에 바꾸게 됩니다.

오늘 쓸 태그

태그 여섯 개만 알아도 사람이 읽을 수 있는 페이지를 쓰실 수 있습니다. h1 은 페이지 전체의 제목이고, 지난 시간에 사용했습니다. h2 는 구역의 제목이고, h3 는 그보다 한 단계 아래입니다. p 는 문단 하나이고, 이미 두 개를 써 두었습니다. ul 과 ol 은 목록이고, 그 안의 항목 하나하나가 li 입니다. 제목 단계는 순서대로 쓰셔야 하고, 글자를 작게 하려고 h3 로 건너뛰시면 안 됩니다.

구역 만들기

먼저 추가할 내용입니다. 제목 하나와 그 아래 항목 세 개짜리 목록입니다. ul 이 목록 자체이고, 그 안의 li 하나가 항목 하나입니다. 이미 작성해 둔 문단 두 개 아래에 넣어보겠습니다.

위에 빈 줄을 하나 두는데, 파일을 읽기 편하게 하려는 것뿐입니다. li 태그는 ul 보다 한 단계 더 들여써 줍니다. 들여쓰기를 보면 어떤 태그가 어디 안에 들어 있는지 한눈에 들어옵니다. 브라우저에게는 필요 없지만, 우리에게는 필요합니다. Ctrl + S 로 저장하시면 되고, 맥에서는 Cmd + S 입니다.

index.html

지난 시간과 같은 서버를 띄웁니다. 같은 명령어, 같은 포트이고, 멈추기 전까지 계속 돌아갑니다. 포트가 사용 중이라고 나오면, 이전에 띄운 것이 아직 돌고 있다는 뜻입니다.

터미널

새 구역이 들어간 페이지입니다. 제목이 이름보다 작은데, h2 가 h1 보다 아래 단계이기 때문입니다. 항목 세 개는 들여쓰기가 되어 있고, 앞에 점이 하나씩 붙어 있습니다. 우리는 점을 그려달라고 한 적이 없습니다. 태그를 쓰면 따라오는 기본 모양이라는 점에서, 그냥 함께 온 것입니다.

바뀐 화면

지금 이런 화면이 보이고 계셔야 합니다. 이름, 글 두 줄, 조금 작은 제목, 그리고 항목 세 개입니다. 점이 안 보이면 li 태그가 ul 안에 들어가 있는지 확인해주시면 됩니다. 여기서 가장 많이들 막히시는 편입니다.

두 가지 목록

목록은 두 가지가 있고, 의미를 보고 고르시면 됩니다. ul 은 순서가 자유롭습니다. 항목 순서를 섞어도 뜻이 같은 경우인데, 하는 일 같은 것이 그렇습니다. ol 은 순서 자체가 의미를 담고 있습니다. 두 번째 단계는 첫 번째 다음에야 말이 되기 때문에, 설명 같은 것은 ol 로 씁니다.

순서 있는 목록

모양은 똑같고 바깥 태그만 바뀝니다. 일어난 순서대로 세 단계입니다. 파일 어디에도 숫자를 적지 않았다는 점을 보셔야 합니다. 브라우저가 세어주기 때문에, 중간에 항목을 넣으면 나머지가 알아서 다시 매겨집니다.

닫는 ul 태그 바로 다음에 추가합니다. 제목을 하나 더 쓰고, 그 아래에 순서 있는 목록을 넣습니다. 항목은 조금 전에 쓴 li 태그 그대로입니다. 바뀐 것은 그것들을 감싸는 태그 하나뿐입니다. 저장하고 두 목록을 나란히 확인해보겠습니다.

index.html

두 번째 목록에는 점 대신 숫자가 붙었습니다. 1, 2, 3 이 보이는데, 우리는 숫자를 하나도 입력하지 않았습니다. 태그가 의미를 담는다는 것이 바로 이런 것입니다. 순서가 있는 목록이라고 말했더니, 브라우저가 알아서 세어준 것입니다.

두 가지 강조

마치기 전에 태그를 한 쌍 더 보겠습니다. strong 은 이 부분이 중요하다는 뜻입니다. 스크린 리더는 힘주어 읽어주고, 브라우저는 굵게 그려줍니다. em 은 이 단어를 다르게 읽어달라는 뜻이고, 문장의 뉘앙스를 바꿉니다. b 와 i 는 예전부터 쓰이던 태그이고, 모양만 바꿀 뿐입니다.

파일이 길어져서 글자를 조금 줄이겠습니다. 여기 h3 는 위쪽 h2 아래 단계로 들어갑니다. strong 과 em 은 모두 문단 바깥이 아니라 문단 안쪽에 들어갑니다. 단어 몇 개만 감싸고 나머지 줄은 그대로 둡니다. 저장하고 둘의 차이를 확인해보겠습니다.

index.html

두 단어는 굵게, 한 단어는 기울어져서 나왔습니다. 그 주변 문장은 전혀 움직이지 않았습니다. strong 과 em 은 줄 하나를 차지하지 않고 줄 안쪽에 들어가기 때문입니다. 반대로 제목과 문단은 각각 한 줄을 통째로 차지합니다. 이 차이에는 이름이 있고, 지금 보이는 것보다 훨씬 중요합니다.

블록과 인라인

블록과 인라인입니다. 블록 태그는 가로 전체를 차지하고 새 줄에서 시작합니다. 제목, 문단, 목록은 전부 블록입니다. 인라인 태그는 줄 안쪽에 들어가고 자기 너비만큼만 차지합니다. strong 과 em 이 인라인이고, 다음 시간에 볼 링크 태그도 마찬가지입니다.

자주 막히는 곳

여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 목록 안에 문단을 바로 넣는 경우입니다. ul 바로 안에는 li 만 올 수 있는데, 브라우저는 그래도 그려주기는 합니다. 둘째, 한 페이지에 h1 을 두 번 쓰는 경우입니다. 셋째, 닫는 태그의 순서가 뒤바뀌는 경우입니다. 태그는 괄호와 똑같이, 연 순서대로 닫아주셔야 합니다. 마치기 전에 서버를 멈춰두겠습니다. 파일이 29줄이 되었는데, 시작할 때는 12줄이었습니다. 어려운 내용은 하나도 없고, 양만 늘어난 것입니다. 다음 시간에 바로 이어서 쓰니까 폴더는 그대로 두시면 됩니다.

정리

오늘 기억하실 것 세 가지입니다. 그것이 무엇인지 설명하는 태그를 고르면, 모양은 따라옵니다. 순서가 자유로우면 ul, 순서에 의미가 있으면 ol 을 써주시면 됩니다. 어떤 태그는 줄을 통째로 차지하고, 어떤 태그는 줄 안쪽에 들어갑니다. 다음 시간에는 링크와 사진을 페이지에 추가하겠습니다.

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