IT Cookbook, HTML5 프로그래밍 입문 (3판)

3장 HTML5 기본 태그

주의

코드를 복사해서 붙여넣을 수 있다고 복사해서 사용하기 보다는 직접 코드를 입력하면서 공부하는 것이 좋습니다.

기본예제 3-1 제목 표현

70페이지

코드 3-1 text_header.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 + CSS3 Text</title>
</head>
<body>
    <h1>제목 글자 태그 1</h1>
    <h2>제목 글자 태그 2</h2>
    <h3>제목 글자 태그 3</h3>
    <h4>제목 글자 태그 4</h4>
    <h5>제목 글자 태그 5</h5>
    <h6>제목 글자 태그 6</h6>
</body>
</html>

기본예제 3-2 본문 단락 구분

71페이지

코드 3-2 text_paragraph.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>제목 글자</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
    <p>Integer nibh tellus, tristique quis blandit quis, consequat in nunc. Duis accumsan porttitor auctor. Phasellus eros nunc, aliquam nec faucibus vel, rutrum eu neque. Cras feugiat sagittis libero tempor viverra. Nam molestie placerat ligula, quis rutrum risus pellentesque id. Aenean sollicitudin justo non nibh ullamcorper eget malesuada sapien facilisis. Mauris tempus rhoncus lectus non aliquam. In tincidunt volutpat euismod.</p>
</body>
</html>

기본예제 3-3 제목과 본문 태그의 활용

71페이지

코드 3-3 text_content.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML5+CSS3 Text</title>
</head>
<body>
    <h1>홍차</h1>
    <hr>
    <h2>정의</h2>
    <p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다. 동양에서는 찻물의 빛이 붉기 때문에 홍차라고 부르지만, 서양에서는 찻잎의 색깔 때문에 'black tea'라고 부른다.</p>
    <br>
    <h2>등급</h2>
    <p>홍차는 여러 가지로 등급이 매겨진다. 일반적으로 찻잎의 모양에 따른 등급과 가공 상태에 따른 등급을 조합하여 표시한다.</p>
    <p>- 브로큰 페코</p>
    <p>- 브로큰 페코 수숑</p>
    <p>- 브로큰 오렌지 페코 패닝</p>
</body>
</html>

특수 문자 표기

73페이지

코드 3-4 reference_textNbsp.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 + CSS3 Text</title>
</head>
<body>
    <h1>공백이&nbsp;&nbsp;&nbsp;있는&nbsp;&nbsp;&nbsp;글자</h1>
</body>
</html>

기본예제 3-4 하이퍼링크 설정

74페이지

코드 3-5 text_anchor.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="http://hanb.co.kr">한빛미디어</a><br>
    <a href="http://naver.com/">네이버</a><br>
    <a href="http://daum.com/">다음</a><br>
</body>
</html>
코드 3-6 text_anchorInner.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="#alpha">Alpha 부분</a>
    <a href="#beta">Beta 부분</a>
    <a href="#gamma">Gamma 부분</a>
    <hr>
    <h1 id="alpha">Alpha</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum pretium elit, at iaculis dui congue facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed augue lectus, sagittis quis commodo commodo, congue a nibh. Donec ornare leo in ipsum consectetur euismod. Sed lorem urna, adipiscing eget pharetra ullamcorper, facilisis id sapien. Phasellus ac pellentesque odio. Curabitur quis tortor vel odio dignissim congue ac sit amet nisl. Nulla placerat nibh quis mi tincidunt pretium.</p>
    <h1 id="beta">Beta</h1>
    <p>Donec at pharetra orci. Ut tincidunt porta aliquam. Vivamus elementum dictum lobortis. Curabitur ut nunc turpis. Nam ultrices convallis orci, quis vestibulum nulla tempus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In nec tortor lacus. Sed augue arcu, aliquet ut sagittis at, luctus eget orci. Proin tristique porta sagittis. Maecenas lorem dui, elementum ut bibendum id, ullamcorper non magna. Aenean iaculis congue quam, sed faucibus urna tempor at. Nulla facilisi.</p>
    <h1 id="gamma">Gamma</h1>
    <p>Integer nibh tellus, tristique quis blandit quis, consequat in nunc. Duis accumsan porttitor auctor. Phasellus eros nunc, aliquam nec faucibus vel, rutrum eu neque. Cras feugiat sagittis libero tempor viverra. Nam molestie placerat ligula, quis rutrum risus pellentesque id. Aenean sollicitudin justo non nibh ullamcorper eget malesuada sapien facilisis. Mauris tempus rhoncus lectus non aliquam. In tincidunt volutpat euismod.</p>
</body>
</html>

위의 예제는 각각의 링크를 클릭하면, 해당하는 id 속성이 붙은 위치로 이동합니다.

기본예제 3-5 다양한 글자 모양

77페이지

코드 3-7 text_font.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1><b>Lorem ipsum dolor sit amet</b></h1>
    <h1><i>Lorem ipsum dolor sit amet</i></h1>
    <h1><small>Lorem ipsum dolor sit amet</small></h1>
    <h1>Lorem ipsum dolor <sub> sit amet</sub></h1>
    <h1>Lorem ipsum dolor <sup> sit amet</sup></h1>
    <h1><ins>Lorem ipsum dolor sit amet</ins></h1>
    <h1><del>Lorem ipsum dolor sit amet</del></h1>
    <hr>
    <b>Lorem ipsum dolor sit amet</b><br>
    <i>Lorem ipsum dolor sit amet</i><br>
    <small>Lorem ipsum dolor sit amet</small><br>
    Lorem ipsum dolor <sub> sit amet</sub><br>
    Lorem ipsum dolor <sup> sit amet</sup><br>
    <ins>Lorem ipsum dolor sit amet</ins><br>
    <del>Lorem ipsum dolor sit amet</del><br>
</body>
</html>

기본예제 3-6 목록 태그 활용

80페이지

코드 3-8 list_unordered.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML List Basic Page</title>
</head>
<body>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>
</html>
코드 3-9 list_ordered.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML List Basic Page</title>
</head>
<body>
    <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ol>
</body>
</html>
코드 3-10 nested_list.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML List Basic Page</title>
</head>
<body>
  <ul>
    <!-- 첫 번째 목록 -->
    <li>
      <b>과일</b>
      <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
      </ol>
    </li>
    <!-- 두 번째 목록 -->
    <li>
      <b>채소</b>
      <ol>
        <li>상추</li>
        <li>치커리</li>
        <li>양배추</li>
      </ol>
    </li>
  </ul>
</body>
</html>

기본예제 3-7 목록 태그 활용

82페이지

코드 3-11 table_basic.html
<body>
    <table>

    </table>
</body>
코드 3-12 table_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Basic Page</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1교시</td>
                <td>영어</td>
                <td>국어</td>
                <td>과학</td>
                <td>미술</td>
                <td>기술</td>
            </tr>
            <tr>
                <td>2교시</td>
                <td>도덕</td>
                <td>체육</td>
                <td>영어</td>
                <td>수학</td>
                <td>사회</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

기본예제 3-8 행・열 합침 표 생성

84페이지

코드 3-13 table_span.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Basic Page</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">지역별 홍차</th>
        </tr>
        <tr>
            <th rowspan="3">중국</th>
            <td>정산소종</td>
        </tr>
        <tr><td>기문</td></tr>
        <tr><td>운남</td></tr>
        <tr>
            <th rowspan="4">인도 및 스리랑카</th>
            <td>아삼</td>
        </tr>
        <tr><td>실론</td></tr>
        <tr><td>다질링</td></tr>
        <tr><td>닐기리</td></tr>
    </table>
</body>
</html>

기본예제 3-9 멀티미디어(이미지, 오디오, 비디오) 삽입

86페이지

코드 3-14 image_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>HTML Image Basic Page</title>
</head>
<body>
    <img src="Penguins.jpg" alt="펭귄" width="150">
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="150">
</body>
</html>

위의 예제에서 책을 보면 너비를 300픽셀로 설정했는데, 예제 사이트에서는 작게 출력하고자 너비를 150픽셀로 설정했습니다.

코드 3-15 audio_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>Multimedia</title>
</head>
<body>
   <audio src="Kalimba.mp3" controls="controls"></audio>
</body>
</html>
코드 3-16 audio_source.html
<!DOCTYPE html>
<html>
<head>
    <title>Multimedia</title>
</head>
<body>
    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3">
        <source src="Kalimba.ogg" type="audio/ogg">
    </audio>
</body>
</html>
코드 3-17 video_basic.html
<!DOCTYPE html>
<html>
<head>
    <title>Multimedia</title>
</head>
<body>
    <video width="320" controls="controls">
        <source src="Wildlife.mp4" type="video/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>
</html>

위의 예제에서 책을 보면 너비를 640픽셀로 설정했는데, 예제 사이트에서는 작게 출력하고자 너비를 320픽셀로 설정했습니다.

코드 3-18 video_poster.html
<!DOCTYPE html>
<html>
<head>
    <title>Multimedia</title>
</head>
<body>
    <video width="320" controls="controls" poster="http://placehold.it/320x180">
        <source src="Wildlife.mp4" type="video/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>
</html>

← 4장 →