[HTML5] 03. HTML5 기본 태그

유개미·2025년 5월 7일

HTML

목록 보기

3/4

가. 글자 태그

1. 제목과 본문 글자 태그

• 제목 표현

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>별 헤는 밤</h1>
    <h2>별 하나에 추억과</h2>
    <h3>별 하나의 사랑과</h3>
    <h4>별 하나의 쓸쓸함과</h4>
    <h5>별 하나의 동경과</h5>
    <h6>별 하나에 시와</h6>
</body>
</html>

→ h1이 가장 큰 제목 태그, h6이 가장 작은 제목 태그

• 본문 단락 구분

<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <h1>쉽게 씌여진 시</h1>
    <p>창 밖에 밤비가 속살거려 륙첩방은 남의 나라, 시인이란 슬픈 천명인줄 알면서도 한줄 시를 적어볼가,
        땀내와 사랑내 포근히 품긴 보내주신 학비봉투를 받아 대학 노-트를 끼고 늙은 교수의 강으 들으러 간다.   
        생각해보면 어린 때 동무를 하나, 둘, 죄다 잃어버리고 나는 무얼 바라 나는 다만, 홀로 침전하는 것일까?</p>
</body>
</html>

→ p태그로 단락 구분 가능

• 제목과 본문 태그의 활용

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 TEXT Basic Page</title>
</head>
<body>
    <h1>손흥민</h1>
    <hr>
    <h2>출생 : 1992년 7월 8일 (31세)</h2>
    <p>강원도 춘천시 후평동 (現 강원특별자치도 춘천시 후평동)</p>
    <br>
    <h2>특징</h2>
    <p> 국적은 대한민국이며, 축구선수이다. 키는 183cm이고, 체중은 78kg에 발사이즈는 255mm이다.</p>
    <p> 토트넘 홋스퍼 FC 소속 축구 선수. 주 포지션은 윙어. 토트넘 홋스퍼 FC와 대한민국 축구 국가대표팀의 주장을 맡고 있다.</p>
    <p>- 생애</p>
    <p>- 클럽 경력</p>
    <p>- 국가대표 경력</p>
</body>
</html>

→ br태그는 다른 글자 태그 내부에 삽입 가능하지만, hr 태그는 안된다.

2. 앵커 태그

→ HTML에서의 H(yper)T(ext), HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 'a태그' 때문

• 하이퍼링크 설정

<!-- 특정 웹 페이지에 연결하기 -->
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="https://www.naver.com/">네이버</a><br>
    <a href="https://www.youtube.com/?app=desktop&hl=ko&gl=KR">유튜브</a><br>
    <a href="https://www.musinsa.com/app/">무신사</a><br>
    <!--새창으로 열기-->
    <a href="https://www.daum.net/" target="_blank">다음</a>
</body>
</html>

<!-- 웹 페이지 내부에 연결하기 -->
<!DOCTYPE html>
<!--타이틀로 이동-->
<html>
<head>
    <title>HTML TEXT Basic Page</title>
</head>
<body>
    <a href="#alpha">애국가 부분</a>
    <a href="#beta">가요 부분</a>
    <a href="#gamma">시 부분</a>
    <hr>
    <h1 id="alpha">애국가</h1>
    <p>동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라만세</p>
    <h1 id="beta">가요 부분</h1>
    <p>서울시가 잠이 든 시간에 아무 말 없는 밤 하늘은 침착해</p>
    <h1 id="gamma">시 부분</h1>
    <p>창 밖에 밤비가 속살거려 륙첩방은 남의 나라, 시인이란 슬픈 천명인줄 알면서도 한줄 시를 적어볼가,</p>
</body>
</html>

3. 글자 모양 태그

<!DOCTYPE html>
<html>
<head>
    <title>HTML 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>
</body>
</html>

나. 목록 태그

1. 순서가 없는 기본 목록 만들기

<body>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>

2. 순서가 있는 목록 만들기

<body>
    <ol>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ol>
</body>

3. 중첩 목록 만들기

<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>

다. 테이블 태그

1. 표 만들기

<body>
    <table>
        
    </table>
</body>

2. 표에 셀 추가하기

<body>
<!-- 표의 테두리를 지정하는 속성 -->
<table border="1">
    <thead>
        <th></th>
        <th>월</th>
        <th>화</th>
        <th>수</th>
        <th>목</th>
        <th>금</th>
    </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>

※ 테이블 태그의 속성

<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>

라. 미디어 태그

1. 이미지 삽입하기

<body>
    <img src="Penguins.jpg" alt="펭귄" width="300">
    <!-- 이미지가 없으면 alt속성에 지정한 글자가 표시됨 -->
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="300">
</body>

2. 음악 삽입하기

<body>
    <audio src="Kalimba.mp3" controls="controls"></audio>
</body>

※ 웹 브라우저 제약이 없도록 음악 삽입하기

<body>
    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3">
        <source src="Kalimba.ogg" type="audio/ogg">
    </audio>
</body>

3. 동영상 삽입하기

<body>
    <video controls="controls">
        <source src="Wildlife.mp4" type="vidoe/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>

유개미

이전 포스트

[HTML5] 02. 웹 페이지 기본 구조와 작성 방법

다음 포스트

[HTML5] 04. HTML5 입력 양식 태그와 구조화 태그

1개의 댓글

탱구리

2025년 5월 10일

기본적인 내용을 잘 정리해주셨네요!

답글 달기