웹 개발 강의 2편 - 의미를 담는 태그들

이번 시간에 다룰 내용은 태그(Tag)입니다. 지난 시간에 만든 페이지에는 제목 하나와 글 두 줄이 들어가 있었습니다. 오늘은 여기에 구역을 만들어서, 읽는 사람이 훑어볼 수 있는 페이지로 바꿔보겠습니다.

지난 편에서 만든 index.html 과 폴더를 그대로 사용합니다. 처음부터 다시 만드는 것이 아니라 있던 파일에 덧붙이는 방식으로 진행합니다.

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

지금 들여두시면 좋은 습관이 하나 있습니다. 태그는 어떻게 보일지가 아니라, 그것이 무엇인지를 말해준다는 것입니다.

h2 를 쓰는 이유는 그것이 구역의 제목이기 때문입니다. 크고 굵게 나오는 것은 부수적인 결과이고, 그 모양은 5강부터 우리가 직접 정하게 됩니다.

글자를 크게 만들고 싶어서 h1 을 쓰거나, 작게 만들고 싶어서 h3 를 쓰는 방식은 지금 당장은 보기에 문제가 없어 보입니다. 다만 검색 엔진이나 스크린 리더는 태그를 보고 문서의 구조를 파악한다는 점에서, 나중에 고치기 어려운 문제가 됩니다.

오늘 사용할 태그

제목 단계는 순서대로 쓰셔야 합니다. h1 다음에 바로 h3 로 건너뛰시면 안 됩니다.

구역 추가하기

지난 시간에 작성한 두 번째 문단 아래에 다음 내용을 넣어주세요.

index.html

  <h2>What I do</h2>
  <ul>
    <li>Write code almost every day</li>
    <li>Record lectures</li>
    <li>Read one paper a week</li>
  </ul>

ul 이 목록 자체이고, 그 안의 li 하나가 항목 하나입니다. li 를 ul 보다 한 단계 더 들여써 준 이유는, 어떤 태그가 어디 안에 들어 있는지 한눈에 보이게 하기 위해서입니다.

저장하고 서버를 띄운 다음 브라우저에서 확인해보겠습니다.

터미널

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

주소창에 http://localhost:5500 을 입력하시면 됩니다.

제목이 이름보다 작게 나오고, 항목 세 개가 들여쓰기된 채로 앞에 점이 붙어 있습니다. 우리는 점을 그려달라고 한 적이 없습니다. 목록이라고 말했더니 브라우저가 목록처럼 그려준 것입니다.

두 가지 목록

목록은 두 가지가 있고, 의미를 보고 고르시면 됩니다.

판단이 어려우시면 항목을 거꾸로 읽어보시면 됩니다. 그래도 말이 되면 ul 입니다.

방금 작성한 </ul> 바로 다음에 순서 있는 목록을 하나 더 넣어보겠습니다.

index.html

  <h2>How I got here</h2>
  <ol>
    <li>Opened an editor</li>
    <li>Typed ten lines</li>
    <li>Opened the page in a browser</li>
  </ol>

저장하고 새로고침해보시면 이번에는 점 대신 숫자가 붙어 있습니다.

여기서 중요한 점은 파일 어디에도 숫자를 적지 않았다는 것입니다. 브라우저가 세어준 것입니다. 그래서 중간에 항목을 하나 넣으면 나머지 번호가 알아서 다시 매겨집니다. 숫자를 직접 적어두셨다면 전부 손으로 고치셔야 했을 겁니다.

두 가지 강조

마지막으로 태그를 한 쌍 더 보겠습니다. </ol> 다음에 넣어주세요.

index.html

  <h3>One thing I remember</h3>
  <p>My first page had <strong>two lines</strong> in it, and that was <em>enough</em>.</p>

strong 은 이 부분이 중요하다는 뜻입니다. 스크린 리더는 힘주어 읽어주고, 브라우저는 굵게 그려줍니다.

em 은 이 단어를 다르게 읽어달라는 뜻입니다. 문장의 뉘앙스를 바꾸는 역할이고, 브라우저는 기울임으로 그려줍니다.

b 와 i 라는 태그도 있습니다. 모양만 바꿀 뿐 의미는 담지 않습니다. 저는 기본적으로 strong 과 em 을 먼저 쓰고, 정말로 모양만 바꾸고 싶은 경우에만 b 와 i 를 쓰는 방식을 추천드립니다.

블록과 인라인

새로고침해보시면 굵은 글자와 기울어진 글자가 문장 안에 그대로 들어가 있는 것을 보실 수 있습니다. 주변 문장은 전혀 움직이지 않았습니다.

반면 제목이나 문단을 추가하면 항상 새 줄에서 시작합니다. 이 차이에는 이름이 있습니다.

지금은 그냥 그렇구나 하고 넘어가셔도 충분합니다. 다만 7강에서 박스 모델(Box Model)을 다룰 때 이 구분이 다시 나오고, 그때부터는 알고 계셔야 합니다.

완성된 파일

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dongbin Na</title>
</head>
<body>
  <h1>Dongbin Na</h1>
  <p>I build things on the web.</p>
  <p>This is the first page I made by hand.</p>

  <h2>What I do</h2>
  <ul>
    <li>Write code almost every day</li>
    <li>Record lectures</li>
    <li>Read one paper a week</li>
  </ul>

  <h2>How I got here</h2>
  <ol>
    <li>Opened an editor</li>
    <li>Typed ten lines</li>
    <li>Opened the page in a browser</li>
  </ol>

  <h3>One thing I remember</h3>
  <p>My first page had <strong>two lines</strong> in it, and that was <em>enough</em>.</p>
</body>
</html>

시작할 때 12줄이었던 파일이 29줄이 되었습니다. 어려운 내용은 하나도 들어가지 않았고 양만 늘었습니다.

자주 발생하는 오류

첫째, 목록 안에 문단을 바로 넣는 경우

<ul>
  <p>item</p>
</ul>

ul 바로 안에는 li 만 올 수 있습니다. 브라우저는 그래도 그려주기 때문에 눈으로는 문제를 찾기 어렵습니다. 다만 목록으로서의 의미가 사라집니다.

<ul>
  <li>item</li>
</ul>

둘째, 한 페이지에 h1 을 두 번 쓰는 경우

페이지의 대표 제목은 하나입니다. h1 이 두 번 나오면 스크린 리더 입장에서는 문서가 중간에 다시 시작한 것처럼 보입니다. 두 번째부터는 h2 를 써주시면 됩니다.

셋째, 태그를 닫는 순서가 뒤바뀌는 경우

<strong><em>text</strong></em>

태그는 괄호와 똑같이 연 순서대로 닫아주셔야 합니다. 먼저 연 strong 이 나중에 닫혀야 합니다.

<strong><em>text</em></strong>

연습 문제

1. 좋아하는 음식 세 가지를 ul 로 추가해보기
2. 아침에 하는 일을 순서대로 ol 로 적어보기
3. 문단 안에서 단어 하나를 strong 으로, 다른 하나를 em 으로 감싸고 차이 확인해보기

2번을 작성하신 다음 항목을 중간에 하나 끼워넣어 보시면, 번호가 알아서 다시 매겨지는 것을 확인하실 수 있습니다.

이 강의는 무료로 공개됩니다. 더 깊은 내용을 다루는 유료 강의는 링바이트에서 보실 수 있습니다.

다음 시간에는 링크와 사진을 페이지에 추가하겠습니다.