웹 페이지에서 정보를 깔끔하게 정리하고 싶을 때 가장 좋은 방법 중 하나는 목록(list)과 표(table)를 활용하는 것입니다. 이번 장에서는 <ul>, <ol>, <table> 태그를 사용하여 정보를 체계적으로 배치하는 방법을 왕초보도 이해할 수 있도록 자세히 설명드리겠습니다.
1. 순서 없는 목록 <ul> 만들기
<ul> 태그는 순서가 없는 항목(즉, 번호가 필요 없는 목록)을 만들 때 사용합니다. 각각의 항목은 <li> (list item) 태그로 감쌉니다.
<ul> <li>HTML 배우기</li> <li>CSS 배우기</li> <li>JavaScript 배우기</li> </ul>브라우저에서는 보통 동그란 점(bullet) 아이콘과 함께 항목이 표시됩니다.
✔ 포인트
<ul>는 순서가 중요하지 않은 목록을 만들 때 사용합니다.<li>는 무조건<ul>안에 있어야 합니다.
2. 순서 있는 목록 <ol> 만들기
<ol> 태그는 항목마다 번호를 매기고 싶을 때 사용합니다. 마찬가지로 각 항목은 <li>로 묶습니다.
<ol> <li>회원가입</li> <li>이메일 인증</li> <li>로그인</li> </ol>브라우저에서는 1, 2, 3과 같은 숫자가 자동으로 붙습니다.
✔ 포인트
<ol>는 단계나 순서가 중요한 작업을 나열할 때 적합합니다.- 속성
type=\"a\"를 추가하면 알파벳(a, b, c...)으로 표시할 수도 있습니다.
<ol type=\"a\"> <li>A단계</li> <li>B단계</li> <li>C단계</li> </ol>3. 목록 안에 목록 만들기 (중첩 목록)
목록 안에 다른 목록을 넣을 수도 있습니다. 이렇게 중첩하면 서브 항목을 깔끔하게 표현할 수 있습니다.
<ul> <li>프론트엔드 <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </li> <li>백엔드</li> </ul>이런 구조는 복잡한 정보를 단계별로 이해시키는 데 매우 효과적입니다.
4. 표 <table> 기본 구조 이해하기
<table> 태그는 데이터를 행(row)과 열(column)로 정리할 때 사용합니다. 기본적인 표 구성은 다음과 같습니다.
<table> <thead> <tr> <th>이름</th> <th>나이</th> <th>직업</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td>30</td> <td>개발자</td> </tr> <tr> <td>김영희</td> <td>25</td> <td>디자이너</td> </tr> </tbody> </table>✔ 구성 요소 요약
<table>: 표 전체를 감싸는 요소<thead>: 표의 머리글 (헤더 영역)<tbody>: 실제 데이터 영역<tr>: 표의 한 행(row)<th>: 열 제목(header cell, 굵게 표시)<td>: 데이터 셀(cell)
5. 표에 스타일 추가하기 (간단한 예고)
기본 표는 디자인이 밋밋합니다. CSS를 이용해 테두리를 추가하거나 줄 간격을 조절하는 방법은 다음 장에서 본격적으로 다루겠습니다. 간단한 예시는 아래처럼 작성할 수 있습니다.
<style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 8px; text-align: center; } </style>이렇게 하면 표가 훨씬 깔끔하게 정돈되어 보입니다.
6. 실습 예제: 사이트 메뉴 정리 & 팀원 목록 표 만들기
실제 프로젝트에 쓸 수 있는 구조를 만들어 봅시다.
✔ 사이트 메뉴 목록
<ul> <li><a href=\"index.html\">홈</a></li> <li><a href=\"about.html\">회사 소개</a></li> <li><a href=\"services.html\">서비스</a> <ul> <li><a href=\"web.html\">웹 개발</a></li> <li><a href=\"mobile.html\">모바일 앱 개발</a></li> </ul> </li> <li><a href=\"contact.html\">문의하기</a></li> </ul>✔ 팀원 목록 표
<table> <thead> <tr> <th>이름</th> <th>직급</th> <th>이메일</th> </tr> </thead> <tbody> <tr> <td>홍길동</td> <td>CEO</td> <td>hong@example.com</td> </tr> <tr> <td>김영희</td> <td>CTO</td> <td>kim@example.com</td> </tr> </tbody> </table>7. 마무리 및 다음 강좌 예고
이번 제4장에서는 정보를 체계적으로 표현하는 방법으로 목록(<ul>, <ol>)과 표(<table>)를 배웠습니다. 이제 글을 보기 좋게 정리할 수 있는 기본기를 갖췄습니다.
다음 제5장에서는 사용자 입력을 받는 폼 요소(<form>, <input>, <textarea>, <button>)를 다루면서, HTML로 인터랙티브한 페이지를 만드는 방법을 배울 예정입니다. 기대해 주세요!