HTML, CSS, JAVASCRIPT에 관한 내용은 '이지스퍼블리싱' 출판사의 "Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석"이라는 책을 공부하고 요약 및 정리한 것입니다.
지난 글에 이어 이번엔 목록을 만들어 보자. 웹 문서에서 목록은 CSS와 함께 사용되어 내비게이션을 만들거나 컨텐츠를 배치하는 등 다양하게 사용이 가능하다.
먼저, 순서가 있는 목록에 대해 알아보자. 이는 말 그대로 각 항목을 순서대로 나열한 것인데, 이때 <ol>, <li> 태그를 사용한다. 목록으로 표시할 내용을 <ol> ~ </ol> 태그로 감싸고, 그 안에 <li> ~ </li> 태그를 삽입하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 할 일 페이지</title>
</head>
<body>
<h2>순서대로 할 일</h2>
<ol>
<li>아침 식사를 하고 헬스장을 간다.</li>
<li>점심을 먹는다.</li>
<li>프로그래밍 공부를 한다.</li>
<li>영화 시청 및 여가를 즐긴다.</li>
</ol>
</body>
</html>
<ol> 태그를 사용하면 이렇게 1번, 2번, 3번, 4번처럼 순서가 있는 목록이 만
들어진다. 기본적으로 순서 있는 목록은 번호를 붙이는데, type 속성을 이용하면 영문자나 로마 숫자 등으로 순서를 나타낼 수 있다. 예를 들어, 영문 소문자로 사용하고 싶다면 <ol type="a"> 으로 입력을 해주면 된다. 또한 다른 시작 번호를 만들고 싶다면 start 속성을 이용하면 시작 번호를 바꿀 수 있다. 아래는 다양한 <ol> 태그의 속성값들이다.
| 종류 | 설명 |
| type ="1" | 숫자 |
| type="a" | 영문 소문자 |
| type="A" | 영문 대문자 |
| type="i" | 로마 숫자 소문자 |
| type="I' | 로마 숫자 대문자 |
다음은 순서가 없는 목록이다. 순서 상관없이 만들 때 사용하고 <ul>, <li> 태그를 사용한다. 순서가 있는 목록과 마찬가지로 목록으로 표시할 내용을 <ul> ~ </ul>로 감싸주고 그 안의 항목을 <li> ~ </li>를 삽입하면 된다. 순서 없는 목록은 목록 리스트에 숫자나 영문 등을 붙이는 대신, 작은 원이나 사각형을 붙여서 구분시키는데 이를 불릿(bullet)이라고 한다.
<ul>
<li>아침 식사를 하고 헬스장을 간다.</li>
<li>점심을 먹는다.</li>
<li>프로그래밍 공부를 한다.</li>
<li>영화 시청 및 여가를 즐긴다.</li>
</ul>
마지막으로 설명 목록이란 것이 있는데 이름과 값 형태로 구성된 목록을 말한다. 쉽게 생각해서 사전을 떠올리면 된다. 설명 목록은 이름을 지정하는 <dt> 태그와 값을 지정하는 <dd> 태그로 구성되어 있다. 위에서 했던 것과 비슷한 맥락으로 목록을 <dl> ~ </dl> 태그로 감싸주고 그 안에 이름 부분은 <dt> ~ </dt> 태그로, 값 부분은 <dd> ~ </dd> 태그를 삽입해주면 완성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>노트북 소개 페이지</title>
</head>
<body>
<h2>제품 사양</h2>
<dl>
<dt>1세대</dt>
<dd>메모리 8GB</dd>
<dd>256GB 저장 장치</dd>
<dd>최대 18시간 배터리 사용 시간</dd>
</dl>
<dl>
<dt>2세대</dt>
<dd>메모리 16GB</dd>
<dd>1TB 저장 장치</dd>
<dd>최대 22시간 배터리 사용 시간</dd>
</dl>
</body>
</html>
다음은 웹 문서를 만들 때 정말 많이 사용하는 표에 대해 알아보겠다. 표는 행과 열, 내용을 입력하는 부분인 셀로 이루어져 있다. 고로 우리는 표를 만드는 태그, 행을 만드는 태그, 열을 만드는 태그가 필요하다.
표를 만드는 태그는 표의 시작과 끝을 알려주는 <table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 제목을 붙이고 싶으면 <caption> 태그를 사용하면 된다. 그 다음 <table> 태그 안에 행이 몇 개이고 각 행에 셀이 몇 개인지 설정해야 하는데 <tr> 태그로 행을 만들고, <td> 태그로 행 안에 셀을 만든다. 다시 말해, <table> 태그 안에 <tr>, <td> 태그가 모두 모여 있어야 하나의 셀을 만들 수 있다는 것이다.
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
어떤 표에서는 제목과 본문, 요약 등이 있는 경우도 있는데 이때 각각 <thead>, <tbody>, <tfoot> 태그를 사용하면 만들 수 있다.
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
</tbody>
</table>
이해를 돕기 위한 제목과 본문 태그를 사용한 코드의 일부이다.
표는 <tr>, <th>, <td> 태그를 이용해서 여러 셀로 구성한다. 이때 이 셀들을 합치거나 나눠서 다양한 형태로도 만들 수가 있는데 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>, <th> 태그로 이루어진다. 행을 합치려면 rowspan 속성을 사용하고 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 결정하면 된다.
앞서 만든 예제의 표에서 2개씩 중복되는 '선물용'과 '가정용' 셀을 보기 좋게 1개로 합쳐 보자면, 두 번째 행과 네 번째 행의 첫 번째 <td> 태그에서 rowspan 속성을 사용해 2개의 셀을 합치고, 세 번째 행과 다섯 번째 행은 첫 번째 셀을 제외하고 나머지 3개의 <td> 태그만 사용하면 된다.
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</t>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
또한 우리는 표를 만들 때 특정 열에 배경색을 넣거나 너비를 바꾸려면 열을 선택할 수 있어야 한다. 이때 사용하는 태그는 <col>, <colgroup> 태그이다. 전자는 열을 1개만 선택할 수 있고, 후자는 2개 이상을 선택할 때 사용한다. 이 2개의 태그는 반드시 <caption> 태그 다음에 써야 한다. 표가 시작되기 전에 열의 상태를 알려주는 것이다. 또한 <colgroup> 태그를 사용할 때 안에 표 전체의 열의 개수만큼 각각 <col> 태그를 작성해야 한다. 스타일이 없어도 <col> 태그를 작성해줘야 한다는 것이다.
'Front - End > Html' 카테고리의 다른 글
| HTML(2) (0) | 2023.06.22 |
|---|---|
| HTML(1) (0) | 2023.06.22 |
| 웹 개발에 들어가기 앞서... (0) | 2023.06.16 |