Day 4: HTML 리스트와 테이블 태그 가이드: 구조화된 데이터 표현하기
웹 개발에서 정보를 체계적으로 정리하고 표현하는 것은 사용자 경험에 중요한 영향을 미칩니다. HTML은 이러한 데이터 구조화를 위한 다양한 태그를 제공하며, 그 중에서도 **리스트(Lists)**와 **테이블(Tables)**은 데이터를 효과적으로 표현하는 핵심 요소입니다.
이 글에서는 HTML의 리스트 태그(ul, ol, li)와 테이블 태그(table, tr, th, td)의 기본 사용법부터 고급 기능까지 실습 예제와 함께 상세히 알아보겠습니다.
| HTML 리스트 태그
HTML에서 리스트는 관련 항목들을 그룹화하여 표시하는 요소로, 주로 메뉴, 목차, 항목 나열 등에 사용됩니다. 리스트는 크게 순서 없는 리스트(Unordered List)와 순서 있는 리스트(Ordered List)로 나뉩니다.
순서 없는 리스트 (ul)
순서 없는 리스트는 <ul> 태그로 생성하며, 각 항목은 <li> 태그로 표시합니다. 기본적으로 각 항목 앞에는 불릿(bullet) 기호가 표시됩니다.
예제 코드:
html<ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
결과:
- HTML
- CSS
- JavaScript
코드 설명:
<ul>태그는 순서 없는 리스트의 컨테이너 역할을 합니다.<li>태그는 리스트 내의 각 항목을 정의합니다.- 브라우저는 기본적으로 각 항목 앞에 검은색 원형 불릿을 표시합니다(CSS로 변경 가능).
순서 있는 리스트 (ol)
순서 있는 리스트는 <ol> 태그로 생성하며, 각 항목은 마찬가지로 <li> 태그로 표시합니다. 항목 앞에는 숫자나 문자가 자동으로 부여됩니다.
예제 코드:
html<ol> <li>로그인</li> <li>상품 선택</li> <li>결제</li> </ol>
결과:
- 로그인
- 상품 선택
- 결제
코드 설명:
<ol>태그는 순서 있는 리스트의 컨테이너입니다.- 각
<li>항목 앞에는 자동으로 번호가 매겨집니다. - 기본 번호 매김은 1부터 시작하는 아라비아 숫자입니다.
순서 있는 리스트의 속성
<ol> 태그는 다양한 속성을 통해 번호 매김 방식을 조절할 수 있습니다.
예제 코드:
html<ol type="A" start="3"> <li>첫 번째 항목 (C로 표시)</li> <li>두 번째 항목 (D로 표시)</li> <li>세 번째 항목 (E로 표시)</li> </ol>
결과:
C. 첫 번째 항목 (C로 표시)
D. 두 번째 항목 (D로 표시)
E. 세 번째 항목 (E로 표시)
코드 설명:
type속성은 번호 매김 유형을 지정합니다 (1, A, a, I, i).start속성은 시작 번호를 지정합니다 (여기서는 3번째부터 시작).
중첩 리스트
리스트는 다른 리스트를 내부에 포함할 수 있으며, 이를 통해 계층적 구조를 표현할 수 있습니다.
예제 코드:
html<ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> </ul> </li> <li>Backend <ul> <li>Java</li> <li>Python</li> </ul> </li> </ul>
결과:
- Frontend
- HTML
- CSS
- Backend
- Java
- Python
코드 설명:
- 중첩된 리스트는 부모
<li>태그 내부에 새로운<ul>또는<ol>태그를 배치하여 생성합니다. - 브라우저는 중첩 레벨에 따라 들여쓰기와 불릿 스타일을 자동으로 조정합니다.
- 중첩은 여러 레벨로 구현할 수 있으며,
<ul>과<ol>을 혼합하여 사용할 수도 있습니다.
리스트 속성과 스타일링
CSS를 활용하면 리스트의 모양을 다양하게 변경할 수 있습니다. 아래 CSS는 맛보기로 보시면 됩니다.
예제 코드:
html<style> .custom-list { list-style-type: square; color: #3366cc; } .custom-list li { margin-bottom: 10px; } </style> <ul class="custom-list"> <li>HTML5 학습하기</li> <li>CSS3 마스터하기</li> <li>JavaScript 연습하기</li> </ul>
결과:
파란색의 사각형 불릿으로 표시된 리스트가 각 항목 사이에 10px 여백을 가지고 표시됩니다.
코드 설명:
list-style-type속성으로 불릿 모양을 변경할 수 있습니다 (disc, circle, square, none 등).- 리스트와 각 항목에 여백, 색상, 폰트 등의 스타일을 적용할 수 있습니다.
- CSS를 통해 완전히 커스텀된 리스트 디자인도 가능합니다.
| HTML 테이블 태그
테이블은 행과 열로 구성된 데이터를 표현하기 위한 HTML 요소입니다. 표 형식의 데이터, 가격표, 시간표 등을 웹페이지에 표시할 때 사용됩니다.
기본 테이블 구조
기본적인 테이블은 <table>, <tr>, <th>, <td> 태그로 구성됩니다.
예제 코드:
html<table border="1"> <tr> <th>이름</th> <th>직업</th> </tr> <tr> <td>홍길동</td> <td>개발자</td> </tr> <tr> <td>김철수</td> <td>디자이너</td> </tr> </table>
결과:
| 이름 | 직업 |
|---|---|
| 홍길동 | 개발자 |
| 김철수 | 디자이너 |
코드 설명:
<table>태그는 테이블의 컨테이너입니다.<tr>(Table Row) 태그는 테이블의 행을 정의합니다.<th>(Table Header) 태그는 테이블의 열 제목을 정의하며, 기본적으로 굵은 글씨와 가운데 정렬이 적용됩니다.<td>(Table Data) 태그는 테이블의 개별 셀 데이터를 정의합니다.border속성은 테이블 테두리의 두께를 픽셀 단위로 지정합니다 (HTML5에서는 CSS 사용을 권장).
테이블 셀 병합
테이블 셀은 colspan과 rowspan 속성을 사용하여 가로나 세로로 병합할 수 있습니다.
예제 코드:
html<table border="1"> <tr> <th rowspan="2">이름</th> <th colspan="2">연락처</th> </tr> <tr> <td>이메일</td> <td>전화번호</td> </tr> <tr> <td>최민수</td> <td>minsu@example.com</td> <td>010-1234-5678</td> </tr> </table>
결과:
코드 설명:
rowspan="2"속성은 세로 방향으로 셀을 2개 병합합니다.colspan="2"속성은 가로 방향으로 셀을 2개 병합합니다.- 셀 병합을 사용할 때는 테이블 구조를 정확히 계획하고, 병합된 셀만큼 다른 셀을 생략해야 합니다.
테이블 구조화 태그
HTML5는 테이블 구조를 더 명확하게 정의할 수 있는 태그를 제공합니다.
예제 코드:
html<table border="1"> <caption>직원 정보</caption> <thead> <tr> <th>이름</th> <th>부서</th> <th>직책</th> </tr> </thead> <tbody> <tr> <td>이지은</td> <td>개발팀</td> <td>팀장</td> </tr> <tr> <td>박민준</td> <td>마케팅팀</td> <td>대리</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">총 직원수: 2명</td> </tr> </tfoot> </table>
결과:
코드 설명:
<caption>태그는 테이블의 제목을 표시합니다.<thead>태그는 테이블의 헤더 부분을 그룹화합니다.<tbody>태그는 테이블의 본문 데이터를 그룹화합니다.<tfoot>태그는 테이블의 요약이나 집계 정보를 포함하는 푸터를 정의합니다.- 이러한 구조화 태그는 CSS 스타일링과 접근성 향상에 도움이 됩니다.
테이블 접근성 향상하기
테이블의 접근성을 높이기 위해 추가 속성을 사용할 수 있습니다.
예제 코드:
html<table border="1"> <caption>학생 성적표</caption> <thead> <tr> <th scope="col">이름</th> <th scope="col">수학</th> <th scope="col">영어</th> <th scope="col">평균</th> </tr> </thead> <tbody> <tr> <th scope="row">김지수</th> <td>95</td> <td>92</td> <td>93.5</td> </tr> <tr> <th scope="row">이승우</th> <td>88</td> <td>96</td> <td>92.0</td> </tr> </tbody> </table>
결과:
코드 설명:
scope속성은 헤더 셀(<th>)이 어떤 셀들에 대한 헤더인지를 명시합니다.scope="col"은 해당 열의 헤더임을 나타냅니다.scope="row"는 해당 행의 헤더임을 나타냅니다.- 이는 스크린 리더 사용자가 테이블 내용을 이해하는 데 도움을 줍니다.
실전 예제: 리스트와 테이블 함께 사용하기
리스트와 테이블을 조합하여 더 풍부한 정보 구조를 만들 수 있습니다.
예제 코드:
html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>리스트와 테이블 실습</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 20px; } h1 { color: #333; border-bottom: 2px solid #eee; padding-bottom: 10px; } table { border-collapse: collapse; width: 100%; margin-bottom: 20px; } th, td { border: 1px solid #ddd; padding: 8px; text-align: left; } th { background-color: #f2f2f2; } tr:nth-child(even) { background-color: #f9f9f9; } </style> </head> <body> <h1>할 일 목록</h1> <ol> <li>HTML 태그 정리</li> <li>코드 실습</li> <li>블로그 정리</li> </ol> <h1>기술 스택</h1> <ul> <li>Frontend <ul> <li>HTML</li> <li>CSS</li> </ul> </li> <li>Backend <ul> <li>Node.js</li> <li>Python</li> </ul> </li> </ul> <h1>회원 목록 테이블</h1> <table> <tr> <th>이름</th> <th>이메일</th> <th>가입일</th> </tr> <tr> <td>김영희</td> <td>young@example.com</td> <td>2024-10-01</td> </tr> <tr> <td>이철수</td> <td>chulsoo@example.com</td> <td>2024-11-12</td> </tr> </table> </body> </html>
결과:
코드 설명:
- 하나의 HTML 문서에 다양한 리스트와 테이블을 조합했습니다.
- CSS를 사용하여 테이블과 리스트의 시각적 표현을 개선했습니다.
- 제목(
<h1>)으로 각 섹션을 구분하여 문서 구조를 명확히 했습니다. - 테이블에 zebra striping(짝수 행 배경색 변경) 효과를 적용하여 가독성을 높였습니다.
| Q&A 자주 묻는 질문
Q: 리스트와 테이블의 주요 차이점은 무엇인가요?
A: 리스트는 관련 항목을 순차적으로 나열하는 데 적합하며, 테이블은 행과 열로 구성된 데이터를 표현하는 데 적합합니다. 리스트는 정보의 계층 구조를 표현하기 좋고, 테이블은 데이터 비교와 정렬에 유용합니다.
Q: 테이블을 레이아웃 목적으로 사용해도 될까요?
A: 웹 표준에 따르면 테이블은 데이터 표현을 위해서만 사용하고, 페이지 레이아웃은 CSS를 사용하는 것이 권장됩니다. 테이블 레이아웃은 접근성 문제와 반응형 디자인 구현의 어려움이 있습니다.
Q: 리스트 스타일을 완전히 제거하고 싶으면 어떻게 해야 하나요?
A: CSS의 list-style: none; 속성을 사용하면 불릿이나 번호를 완전히 제거할 수 있습니다. 추가로 padding-left: 0;을 적용하면 들여쓰기도 제거됩니다.
Q: 테이블에서 특정 열의 너비를 고정하려면 어떻게 해야 하나요?
A: <col> 태그와 CSS width 속성을 사용할 수 있습니다:
html<table> <colgroup> <col style="width: 150px;"> <col style="width: 300px;"> </colgroup> <tr> <th>이름</th> <th>설명</th> </tr> <!-- 테이블 내용 --> </table>
| 요약 및 결론
HTML 리스트와 테이블 태그는 웹 페이지에서 정보를 체계적으로 구성하고 표현하는 핵심 요소입니다. 이 글에서 다룬 내용을 요약하면:
- 리스트는 순서 있는 리스트(
<ol>)와 순서 없는 리스트(<ul>)로 나뉘며, 각 항목은<li>태그로 표시합니다. - 리스트는 중첩이 가능하여 복잡한 계층 구조를 표현할 수 있습니다.
- 테이블은
<table>,<tr>,<th>,<td>등의 태그로 구성되며, 행과 열로 데이터를 정리합니다. colspan과rowspan속성을 사용하여 셀을 병합할 수 있으며, 복잡한 테이블 구조를 만들 수 있습니다.<thead>,<tbody>,<tfoot>등의 구조화 태그를 사용하면 테이블의 의미 구조를 명확히 하고 접근성을 향상시킬 수 있습니다.- CSS를 통해 리스트와 테이블의 시각적 표현을 다양하게 커스터마이즈할 수 있습니다.
리스트와 테이블 태그를 능숙하게 활용하면 사용자가 정보를 더 쉽게 이해하고 탐색할 수 있는 웹 페이지를 만들 수 있습니다. 실습을 통해 이러한 태그들을 익히고, 실제 프로젝트에 적용해 보세요!
ㅇ Day 5 - HTML 폼 완전 정복 - 입력 요소 실습 👉클릭
#HTML기초 #리스트태그 #테이블태그 #ul태그 #table실습 #IT기초 #웹페이지제작 #HTML
