들어가며
지금까지 기초적인 HTML 문서를
만드는 방법을 다루었다.
이번 절에선는 이미지, 리스트,
테이블 등을 만드는
고오급 기능에 대해 알아본다.
이미지 삽입, <img>
<img> 태그를 이용하면 HTML
문서에 이미지를 삽입할 수 있다.
다음 코드는 <img> 태그의 속성들을
보여주며
<img src="이미지 파일의 URL"
art="문자열"
width="이미지의 폭"
height="이미지 높이">
<!--
src: 이미지 파일의 URL. 필수 속성.
alt: 이미지가 없가나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열. 필수 속성.
width: 이미지가 출려되는 너비로, 생략되면 원본 이미지의 폭. 픽셀 수.
height: 이미지가 출력되는 높이로, 생략되면 원본 이미지의 높이. 픽셀 수.
-->
src 속성으로 지정할 수 있는 이미지
종류는 다음과 같다.
BMP, GIF, PNG, JPG(JPEG), animated-GIF
src 속성에 다른 웹 사이트 이미지
주소를 주어
다른 웹 사이트의 이미지를 출력할
수도 있다.
<!DOCTYPE html>
<html>
<head><title>이미지 삽입</title></head>
</html>
<body>
<h3>이미지 삽입</h3>
<hr>
<p>페페 사진입니다.</p>
<img src="pepe.png" width="200" height="200" alt="페페콘1">
<img src="pepe.jpg" width="100" height="100" alt="페페콘2">
<img src="https://www.google.co.kr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
width="150" height="150" alt="구글">
</body>태그의 잘못된 속성 사용은 혼란을 초래
태그 속성을 잘못 사용하면,
혼란을 야기할 수도 있다.
다음과 같이 <img> 태그의 src에는
호랑이 사진(tiger.jpg)을,
alt에는 '사자 사진'으로 작성한
경우를 보자.
<img src="tiger.jpg" art="사자 사진">
이때, 검색 사이트에서 '사자 사진'을
검색하면,
검색 엔진은 이 웹페이지에서 alt
속성에 적힌 '사자 사진'을 발견하고
tiger.jpg를 검색 결과로 반환할 것이다.
하지만 이것은 잘못된 검색 결과를
초래한다.
리스트 만들기, <ol>, <ul>, <dl>
리스트는 데이터를 나열할 때
사용되며 종류는 3가지이다.
- 순서 있는 리스트(ordered list) - <ol></ol>
- 순서 없는 리스트(unordered list) - <ul></ul>
- 정의 리스트(definition list) - <dl></dl>
리스트의 각 아이템은 <li> 태그를
사용하며 </li>는 생략할 수 있다
<ol>, <ul>, <li> 태그의 사용법은
다음과 같다.
<ol> 태그의 사용법
<!--type, start 속성 대신 CSS3 스타일을 사용할 것을 권장-->
<ol type="1"
start="value">
<li>아이템</li>
<li>아이템</li>
</ol>
<!--
type: 마커 종류
type="1" (디폴트) 1, 2, 3, ...
type="A" A, B, C, ...
type="a" a, b, c, ...
type="I" I, II, III, ...
type="i" i, ii, iii ...
start: 마커의 시작 값. start 속성은 숫자에 대해서만 사용
예) start="5" → 5, 6, 7, ...(5부터 시작)
-->
<ul> 태그의 사용법
<ul>
<li>아이템</li>
<li>아이템</li>
</ul>
<li> 태그의 사용법
<li type="1">아이템</li>
<!--
type: 마커 종류 <ol> 태그에 대해서만 유효
type="1" (디폴트) 1, 2, 3, ...
type="A" A, B, C, ...
type="a" a, b, c, ...
type="I" I, II, III, ...
type="i" i, ii, iii ...
-->
리스트와 아이템 꾸미기
HTML5에서는 리스트나 아이템을
꾸미는 모든 작업은
CSS3 스타일로 작성하도록
하고 있다.
5장에서는 CSS3를 이용하여
리스트 색 꾸미기,
아이템의 마커 꾸미기 등의
자세한 내용을 소개한다.
<ol>과 <ul>
<ol>은 순서가 있는 각 과정을
나열할 때 사용하며,
<ul>은 순서 없이 아이템을
나열할 때 사용한다.
아이템에는 다음 코드의 결과와
같이 A, B, C, D등
아이템을 나타내는 마커(marker)가
출력된다.
<ol> 태그의 사용법
<!DOCTYPE html>
<html>
<head>
<title>라면을 끓이는 순서</title>
</head>
<body>
<h3>라면을 끓이는 순서</h3>
<hr>
<ol type="A">
<li>물을 끓인다.</li>
<li>라면과 스프를 넣는다.</li>
<li>3~5분 정도 더 끓이고 먹는다.</li>
</ol>
</body>
</html>
<ul> 태그의 사용법
<!DOCTYPE html>
<html>
<head>
<title>좋아하는 음식</title>
</head>
<body>
<h3>좋아하는 음식</h3>
<hr>
<ul>
<!-- 종료 태그인 </li> 생략 가능-->
<li>텐동
<li>라멘
<li>기타 맛있는 거
</ul>
</body>
</html>
중첩 리스트 만들기
리스트 안에 다른 리스트를
중첩할 수 있다.
다음 코드는 중첩 리스트를 만든
사례를 보여준다.
<!DOCTYPE html>
<html>
<head>
<title>텐동 브랜드와 메뉴</title>
</head>
<body>
<h3>텐동 브랜드와 메뉴</h3>
<hr>
<ul>
<li>텐동
<ul>
<li>고슬밥
<li>쇼유 간장
<li>덴뿌라(튀김)
</ul>
<li>텐동 요츠야
<ol>
<li>요츠야텐동</li>
<li>에비텐쥬</li>
<li>에비죠텐동</li>
<li>전복텐동</li>
<li>토쿠죠텐동</li>
<li>스페셜텐동</li>
</ol>
<li>텐동 쿠지라
<ol>
<li>쿠지라텐동</li>
<li>이카텐동</li>
<li>에비텐동</li>
<li>아나고텐동</li>
<li>특에비텐동</li>
<li>스페셜텐동</li>
</ol>
</ul>
</body>
</html>
정의 리스트 만들기
정의 리스트는 (용어, 설명)을 하나의
아이템으로 나열하는 리스트이다.
정의 리스트 전체는 <dl>을 사용하며,
각 아이템에서 용어는 <dt>로,
설명은 <dd>로 표현한다.
<dl>
<dt>용어</dt>
<dd>설명</dd>
</dl> 이때 </dt>와 </dd>는 모두
생략 가능하다.
<!DOCTYPE html>
<html>
<head>
<title>텐동 브랜드와 메뉴</title>
</head>
<body>
<h3>텐동 브랜드와 메뉴</h3>
<hr>
<dl>
<dt><strong>요츠야 텐동</strong></dt>
<dd>새우 2마리, 오징어, 연근, 단호박, 표고버섯, 꽈리고추</dd>
<dt><strong>쿠지라 텐동</strong>
<dd>새우 2마리, 오징어, 가지, 연근, 꽈리고추, 김
<dt><strong>고미텐동</strong>
<dd>새우 2마리, 한치, 온센계란, 계절야채
</dl>
</body>
</html>
표 만들기, <table>
HTML5에서 다음과 같이 태그들을
함께 이용하여 표를 작성할 수 있으며,
표를 작성한 사례와 표를 구성하는
각 요소를 대비하여 보여주겠다.
<table>: 표 전체를 담는 컨테이너
<caption>: 표 제목
<thead>: 헤딩 셀 그룹
<tbody>: 데이터 셀 그룹
<tfoot>: 바닥 셀 그룹
<tr>: 행. 여러 개의 <td>와 <th> 포함
<td>: 제목(헤딩) 셀
<th>: 데이터 셀
표 전체 구성
표는 위 그림에 보이듯이 제목,
헤드, 바디, 바닥으로 구성되며,
전형적인 모양은 다음과 같다.
<table>
<caption>표제목</caption>
<thead>...</thead>
<tfoot>...</tfoot>
<tbody>...</tbody>
</table> <caption>은 표의 제목을
나타내는 태그로,
<table>에 반드시 첫 번째로
작성되어야 한다.
행과 열 만들기
표는 <tr> 태그를 이용하여
행 단위로 표현하며,
헤딩(제목) 정보를 가진 셀은 <th>로,
데이터 정보 셀은 <td>로 표현한다.
위 그림의 표의 일부분을 구현한
예를 들면 다음과 같다.
<thead>, <tbody>, <tfoot>에는
여러 개의 <tr> 태그로
여러 행을 만들 수 있다.
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tbody>
<tr><td>학생1</td><td>80</td><td>70</td></tr>
<tr>...</tr>
</tbody>
기본 표 만들기
<!DOCTYPE html>
<html>
<head>
<title>기본 테이블 만들기</title>
</head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<!--1픽셀 테두리. 5장의 CSS3로 다루는 것이 바람직함.-->
<table border="1">
<caption>1학기 성적</caption>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>합</th><th>225</th><th>230</th></tr>
</tfoot>
<tbody>
<tr><td>학생1</td><td>80</td><td>70</td></tr>
<tr><td>학생2</td><td>95</td><td>99</td></tr>
<tr><td>학생3</td><td>40</td><td>61</td></tr>
</tbody>
</table>
</body>
</html>
이미지를 가지는 표 만들기
<!DOCTYPE html>
<html>
<head>
<title>기본 테이블 만들기</title>
</head>
<body>
<h3>기본 구조를 가진 표</h3>
<hr>
<!--디폴트 굵기(0)로 하여 테두리 제거. 굵기 조절은 CSS로 하는 것이 바람직-->
<table>
<caption>페페</caption>
<tbody>
<tr>
<td><img src="pepe1.png"></td>
<td><img src="pepe2.png"></td>
<td><img src="pepe3.png"></td>
</tr>
</tbody>
</table>
</body>
</html>표 만들 때 팁
<caption>, <thead>, <tbody>,
<tfoot> 태그를 사용하지 않고
<tr>로만 표를 만드는 경우가 있는데,
바람직하지 않다.
왜냐하면 검색 엔진은 표의 의미
(시멘틱)를 파악하기 위해,
<caption>, <thead>, <tbody>,
<tfoot> 태그를 찾기 때문이다.
또한 <tfoot>은 <tbody> 전에
나오는 것이 좋다.
웹 페이지가 프린트될 때 <tbody>에
들어있는 내용이 길어
여러 페이지에 걸쳐지게 될 때,
헤드와 바닥을 각 페이지마다
위아래에 출력하기 위함이다.
참고 및 출처
 |
|
