긴 글보다 한눈에 보이는 정리가 필요할 때
가게 안내 페이지를 만든다고 생각해 보겠습니다.
영업시간, 메뉴, 준비물, 신청 절차, 수업 일정 같은 정보는 문장으로 길게 쓰면 금방 답답해집니다. 예를 들어 이런 문장이 있습니다.
수업 준비물은 노트북, 충전기, 필기도구, 개인 물병입니다.
짧을 때는 괜찮습니다. 하지만 항목이 많아지면 읽는 사람이 중간에 놓치기 쉽습니다. 이럴 때 HTML에서는 목록을 씁니다.
또 이런 정보도 있습니다.
월요일은 오전 10시에 기초반, 오후 2시에 실습반이 있고, 화요일은 오전 10시에 심화반이 있습니다.
이런 일정이나 가격 비교는 문장보다 표로 보여 주는 편이 훨씬 읽기 쉽습니다.
이번 장에서는 두 가지를 익힙니다.
여러 항목을 세로로 정리하는 목록
행과 열로 비교하는 표
목록과 표를 알면 안내 페이지가 훨씬 정돈되어 보입니다.
AI 생성 이미지
순서가 중요하지 않을 때: ul과 li
먼저 준비물 목록을 만들어 보겠습니다.
<h2>수업 준비물</h2>
<ul>
<li>노트북</li>
<li>충전기</li>
<li>필기도구</li>
<li>개인 물병</li>
</ul>화면에서는 보통 이렇게 보입니다.
노트북
충전기
필기도구
개인 물병
여기서 ul은 순서 없는 목록을 뜻합니다. 영어로 unordered list의 줄임말입니다. 순서가 꼭 중요하지 않은 항목을 묶을 때 사용합니다.
li는 목록 안의 항목 하나를 뜻합니다. 영어로 list item의 줄임말입니다.
구조를 말로 풀면 이렇습니다.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ul>ul은 목록 전체를 감싸는 상자이고, li는 그 안에 들어가는 항목입니다. 장바구니 상자 안에 물건을 하나씩 넣는 모습과 비슷합니다.
중요한 점은 li를 목록 밖에 흩어 놓지 않는 것입니다.
<li>노트북</li>
<li>충전기</li>이렇게 항목만 따로 쓰기보다, 순서 없는 목록이라면 목록 전체를 ul로 감싸는 습관을 들이는 것이 좋습니다.
<ul>
<li>노트북</li>
<li>충전기</li>
</ul>브라우저는 이 구조를 보고 "아, 이것은 서로 관련 있는 항목들의 묶음이구나" 하고 이해합니다.
준비물, 특징, 메뉴에는 순서 없는 목록이 잘 맞습니다
ul은 순서를 바꾸어도 의미가 크게 달라지지 않는 정보에 어울립니다.
예를 들어 카페 안내 페이지라면 이렇게 쓸 수 있습니다.
<h2>매장 이용 안내</h2>
<ul>
<li>무료 와이파이를 사용할 수 있습니다.</li>
<li>반려동물은 야외 좌석만 이용할 수 있습니다.</li>
<li>텀블러를 가져오면 500원을 할인해 드립니다.</li>
</ul>개인 소개 페이지라면 이렇게도 쓸 수 있습니다.
<h2>제가 잘하는 일</h2>
<ul>
<li>짧은 글을 읽기 쉽게 다듬기</li>
<li>행사 안내문 만들기</li>
<li>초보자를 위한 사용 설명서 쓰기</li>
</ul>이 항목들은 순서가 조금 바뀌어도 큰 문제가 없습니다. 그래서 번호가 붙는 목록보다 점으로 표시되는 목록이 자연스럽습니다.
순서가 중요할 때: ol과 li
이번에는 신청 절차를 만들어 보겠습니다.
<h2>수업 신청 절차</h2>
<ol>
<li>신청서를 작성합니다.</li>
<li>안내 메일을 확인합니다.</li>
<li>수강료를 입금합니다.</li>
<li>수업 당일에 접속 링크로 들어옵니다.</li>
</ol>화면에서는 보통 이렇게 보입니다.
신청서를 작성합니다.
안내 메일을 확인합니다.
수강료를 입금합니다.
수업 당일에 접속 링크로 들어옵니다.
여기서 ol은 순서 있는 목록입니다. 영어로 ordered list의 줄임말입니다.
ol도 ul처럼 목록 전체를 감싸고, 그 안에 li를 넣습니다. 차이는 번호가 붙는다는 점입니다.
<ol>
<li>첫 번째로 할 일</li>
<li>두 번째로 할 일</li>
<li>세 번째로 할 일</li>
</ol>ol은 순서가 바뀌면 의미가 달라지는 정보에 사용합니다.
신청 절차
조리 순서
이용 방법
설치 단계
행사 진행 순서
예를 들어 간단한 레시피라면 이렇게 쓸 수 있습니다.
<h2>레몬차 만들기</h2>
<ol>
<li>컵에 레몬청 두 숟가락을 넣습니다.</li>
<li>따뜻한 물을 붓습니다.</li>
<li>잘 저은 뒤 기호에 따라 꿀을 추가합니다.</li>
</ol>이 경우에는 순서가 중요합니다. 물을 먼저 붓고 레몬청을 나중에 넣어도 만들 수는 있지만, 설명을 읽는 사람에게는 단계가 있는 편이 훨씬 편합니다.
ul과 ol을 고르는 간단한 기준
목록을 만들 때는 먼저 스스로에게 물어보면 됩니다.
"이 항목들의 순서가 바뀌면 문제가 생길까?"
문제가 없다면 ul을 씁니다.
<ul>
<li>아메리카노</li>
<li>카페라테</li>
<li>레몬에이드</li>
</ul>순서가 중요하다면 ol을 씁니다.
<ol>
<li>주문서를 작성합니다.</li>
<li>결제합니다.</li>
<li>음료를 받습니다.</li>
</ol>둘 다 안에는 li가 들어갑니다. 그래서 이렇게 기억하면 쉽습니다.
ul: 순서 없는 목록 전체ol: 순서 있는 목록 전체li: 목록 안의 항목 하나
목록을 만들 때 가장 많이 하는 실수는 li를 닫지 않거나, ul과 ol 바깥에 흩어 놓는 것입니다. 처음에는 아래 모양만 기억해도 충분합니다.
<ul>
<li>항목</li>
<li>항목</li>
</ul><ol>
<li>1단계</li>
<li>2단계</li>
</ol>표는 행과 열로 정보를 비교할 때 씁니다
목록은 항목을 세로로 나열할 때 좋습니다. 하지만 시간표나 요금표처럼 가로와 세로를 함께 봐야 하는 정보는 목록만으로 부족합니다.
예를 들어 수업 요금이 다음과 같다고 해 보겠습니다.
기초반은 2시간이고 30,000원입니다.
실습반은 3시간이고 45,000원입니다.
개인 상담은 1시간이고 50,000원입니다.
문장으로도 이해할 수 있지만, 비교하기에는 표가 더 좋습니다.
<table>
<tr>
<th>과정</th>
<th>시간</th>
<th>요금</th>
</tr>
<tr>
<td>기초반</td>
<td>2시간</td>
<td>30,000원</td>
</tr>
<tr>
<td>실습반</td>
<td>3시간</td>
<td>45,000원</td>
</tr>
<tr>
<td>개인 상담</td>
<td>1시간</td>
<td>50,000원</td>
</tr>
</table>처음 보면 태그가 많아 보여서 조금 낯설 수 있습니다. 하지만 역할을 나누면 단순합니다.
table: 표 전체tr: 표의 한 줄, 즉 행th: 제목 칸td: 일반 내용 칸
표는 엑셀이나 스프레드시트와 비슷하게 생각하면 됩니다. 가로줄 하나가 tr이고, 그 줄 안의 칸들이 th 또는 td입니다.
표를 한 줄씩 읽어 보기
방금 본 표의 첫 줄만 따로 보겠습니다.
<tr>
<th>과정</th>
<th>시간</th>
<th>요금</th>
</tr>이 줄은 표의 제목 줄입니다. "이 표에는 과정, 시간, 요금이라는 세 가지 정보가 들어갑니다"라고 알려 줍니다.
그래서 일반 칸인 td가 아니라 제목 칸인 th를 사용합니다. 브라우저에서는 보통 th가 굵게 보이고 가운데 정렬되는 경우가 많습니다. 하지만 중요한 것은 모양이 아니라 의미입니다. th는 "이 칸은 제목 역할을 한다"는 뜻입니다.
다음 줄은 실제 내용입니다.
<tr>
<td>기초반</td>
<td>2시간</td>
<td>30,000원</td>
</tr>이 줄은 하나의 과정 정보를 담고 있습니다.
첫 번째 칸: 기초반
두 번째 칸: 2시간
세 번째 칸: 30,000원
표를 만들 때는 각 줄의 칸 개수를 맞추는 것이 좋습니다. 제목 줄에 칸이 3개라면, 내용 줄도 보통 3개를 맞춥니다.
<tr>
<th>과정</th>
<th>시간</th>
<th>요금</th>
</tr><tr>
<td>기초반</td>
<td>2시간</td>
<td>30,000원</td>
</tr>이렇게 맞아야 읽는 사람도, 브라우저도 표를 이해하기 쉽습니다.
간단한 일정표 만들기
이번에는 행사 일정표를 만들어 보겠습니다. 복사해서 body 안에 넣고 브라우저에서 확인해 보세요.
<h2>행사 일정</h2>
<table>
<tr>
<th>시간</th>
<th>내용</th>
<th>장소</th>
</tr>
<tr>
<td>10:00</td>
<td>입장 및 안내</td>
<td>1층 로비</td>
</tr>
<tr>
<td>10:30</td>
<td>첫 번째 강연</td>
<td>강의실 A</td>
</tr>
<tr>
<td>12:00</td>
<td>점심시간</td>
<td>카페테리아</td>
</tr>
</table>이 예제는 시간, 내용, 장소를 비교해서 볼 수 있습니다. 그래서 표가 잘 어울립니다.
반대로 다음과 같은 정보는 표보다 목록이 더 자연스럽습니다.
<h2>행사 준비물</h2>
<ul>
<li>신분증</li>
<li>신청 확인 문자</li>
<li>필기도구</li>
</ul>준비물은 서로 비교할 필요가 없습니다. 그냥 항목을 빠짐없이 보여 주면 됩니다. 이럴 때는 표보다 목록이 읽기 쉽습니다.
표를 페이지 배치용으로 쓰지 않기
예전에는 표를 이용해 웹페이지 전체를 나누는 경우가 많았습니다. 왼쪽에는 메뉴, 오른쪽에는 본문을 넣는 식입니다.
하지만 지금은 표를 그런 용도로 쓰지 않는 것이 좋습니다. 표는 실제로 표 형태의 정보를 담을 때 사용하는 태그입니다.
예를 들어 이런 정보에는 표가 어울립니다.
요금표
시간표
비교표
성적표
재고표
예약 현황
이런 정보에는 표가 어울리지 않습니다.
페이지의 왼쪽과 오른쪽 배치
사진을 가로로 나열하기
버튼 위치 맞추기
전체 화면을 칸으로 나누기
배치는 나중에 CSS로 다루는 편이 좋습니다. HTML의 역할은 먼저 내용의 의미를 정확히 알려 주는 것입니다.
다시 말해 표는 "보기 좋게 칸을 만들고 싶어서" 쓰는 도구가 아닙니다. "이 정보가 행과 열로 비교되어야 해서" 쓰는 도구입니다.
작은 안내 페이지에 목록과 표 함께 넣기
이제 목록과 표를 함께 사용해 보겠습니다. 작은 원데이 클래스 안내 페이지의 일부입니다.
<h2>향초 만들기 원데이 클래스</h2>
<p>처음 참여하는 분도 쉽게 따라올 수 있는 향초 만들기 수업입니다.</p>
<h3>준비물</h3>
<ul>
<li>편한 복장</li>
<li>완성품을 담아 갈 작은 가방</li>
<li>필요한 경우 앞치마</li>
</ul>
<h3>신청 절차</h3>
<ol>
<li>신청서를 작성합니다.</li>
<li>안내 문자를 확인합니다.</li>
<li>수업 시작 10분 전까지 도착합니다.</li>
</ol>
<h3>수업 시간표</h3>
<table>
<tr>
<th>구분</th>
<th>시간</th>
<th>내용</th>
</tr>
<tr>
<td>1부</td>
<td>14:00</td>
<td>재료 소개</td>
</tr>
<tr>
<td>2부</td>
<td>14:30</td>
<td>향 선택과 제작</td>
</tr>
<tr>
<td>3부</td>
<td>15:30</td>
<td>포장과 마무리</td>
</tr>
</table>이 코드에는 세 가지 정리 방식이 모두 들어 있습니다.
준비물은 순서가 중요하지 않으므로 ul을 썼습니다. 신청 절차는 순서대로 따라야 하므로 ol을 썼습니다. 시간표는 구분, 시간, 내용을 행과 열로 비교해야 하므로 table을 썼습니다.
이렇게 태그를 고르면 페이지가 자연스럽게 읽기 좋아집니다. 더 중요한 것은 브라우저도 각 정보의 역할을 더 잘 이해한다는 점입니다.
직접 바꿔 보기
아래 세 가지를 바꿔 보세요.
준비물 목록에
개인 컵을 추가합니다.신청 절차에
입금 확인 문자를 받습니다.를 추가합니다.시간표에
4부,16:00,질문과 정리가 들어간 행을 추가합니다.
추가할 때는 새 태그를 만드는 위치를 잘 보면 됩니다.
목록에 항목을 추가할 때는 li를 하나 더 넣습니다.
<ul>
<li>편한 복장</li>
<li>완성품을 담아 갈 작은 가방</li>
<li>개인 컵</li>
</ul>표에 줄을 추가할 때는 tr을 하나 더 넣고, 그 안에 필요한 칸 수만큼 td를 넣습니다.
<tr>
<td>4부</td>
<td>16:00</td>
<td>질문과 정리</td>
</tr>표의 제목 줄이 3칸이면 새로 추가하는 줄도 3칸으로 맞추면 됩니다.
이번 장에서 기억할 것
목록과 표는 정보를 보기 좋게 정리하는 가장 기본적인 HTML 도구입니다.
ul은 순서가 중요하지 않은 항목에 사용합니다. 준비물, 특징, 메뉴처럼 단순히 나열하면 되는 정보에 잘 맞습니다.
ol은 순서가 중요한 항목에 사용합니다. 신청 절차, 조리 순서, 이용 방법처럼 앞뒤 흐름이 있는 정보에 적합합니다.
table은 행과 열로 비교해야 하는 정보에 사용합니다. 시간표, 요금표, 비교표처럼 가로와 세로를 함께 봐야 할 때 좋습니다.
마지막으로 표는 페이지를 예쁘게 배치하려고 쓰는 도구가 아닙니다. 실제 표 형태의 정보를 담을 때 사용하는 태그입니다.
HTML을 잘 쓴다는 것은 어려운 태그를 많이 아는 것이 아닙니다. 정보에 맞는 그릇을 고르는 것입니다. 준비물은 목록에, 절차는 번호 목록에, 일정과 요금은 표에 담으면 됩니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.