[HTML] HTML5 기본 태그

728x90

01 글자 태그

제목과 본문 글자 태그

- 문서의 제목을 표현할 때 사용

- h는 heading을 의미

태그		설명
제목 글자	h1	첫 번째로 큰 제목 글자 생성
	h2	두 번째로 큰 제목 글자 생성
	h3	세 번째로 큰 제목 글자 생성
	h4	네 번째로 큰 제목 글자 생성
	h5	다섯 번째로 큰 제목 글자 생성
	h6	여섯 번째로 큰 제목 글자 생성
본문 글자	p	본문 문단 생성
	br	줄 바꿈
	hr	수평 줄 삽입

<body>
    <!--hn 태그들-->
    <h1>제목 글자 태그 h1</h1> 
    <h2>글자 태그 h2</h2>
    <h3>글자 태그 h3</h3>
    <h4>글자 태그 h4</h4>
    <h5>글자 태그 h5</h5>
    <h6>글자 태그 h6</h6>
    <br>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae expedita dicta debitis quidem dignissimos officiis sequi quo dolorem sit architecto, maxime ut dolorum velit exercitationem, eligendi quam asperiores explicabo fugit?</p>
    <hr>
</body>

연습 문제 1

<body>
    <h1>홍차</h1>
    <hr>
    <h2>정의</h2>
    <p>홍차는 백차, 녹차, 우롱차보다 더 많이 발효된 차의 일종이다.</p>
    <br><br>
    <h2>등급</h2>
    <p>홍차는 여러가지로 등급이 매겨진다.</p>
    <p>- 브로큰 페코</p>
    <p>- 브로큰 페코 수숑</p>
    <p>- 브로큰 오렌지 페코 패닝</p>
</body>

- html에서는 '홍____차' 이런 식으로 띄어쓰기가 되지 않는다. 1간 정도 밖에 space가 안 먹음

-> 공백을 처리 하기 위해서는   이 필요

- 꺽쇠를 태그가 아닌 문자로 표현 하고 싶을 때는

<은 <로

>는 >로

- &을 기호로 쓰고 싶을 때는 &

앵커 태그

- 하이퍼텍스트 : 사용자의 선택에 따라 특정 정보로 이동하는 조직된 문서

- a 태그(Anchor) : 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동

- href : Hyper Reference를 의미(속성)

태그	설명
a	하이퍼링크 생성

하이퍼링크 설정

1. 특정 웹 페이지에 연결하기

- 하이퍼링크를 설정한 글자를 클릭하면 해당 웹 페이지로 이동

<body>
    <!--링크로 이동-->
    <h1>검색 엔진 모음</h1>
    <br>
    1. <a href="http://www.naver.com">네이버</a><br><br>
    2. <a href="http://www.google.com">구글</a><br><br>
    3. <a href="http://www.daum.net">다음</a><br><br>

    <br><br><br>

    <!--특정 파일로 이동-->
    <h1>파일로 링크</h1>
    1. <a href="text.html">글자 태그</a><br><br>
    2. <a href="tea.html">홍 차</a><br><br>
</body>

2. 웹 페이지 내부에 연결하기

- 하이퍼링크를 설정한 글자를 클릭하면 해당 웹 페이지로 이동

# : 비어있는 링크

<body>
    <!--같은 문서 안에 특정한 위치로 이동하는 링크-->
    <h1>검색 엔진 모음</h1>
    <br>
    1. <a href="#naver">네이버</a><br><br>
    2. <a href="#google">구글</a><br><br>
    3. <a href="#daum">다음</a><br><br>

    <hr>

    <h2 id="naver">네이버</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores optio sed ipsum sunt. Ipsa ipsam provident, nisi nemo consequatur fuga minus aliquam officiis nam repudiandae inventore, molestiae quod est assumenda.</p>
    
    <h2 id="google">구글</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam voluptatibus beatae necessitatibus, perferendis, voluptas ipsum natus recusandae minima quidem fugiat quod veritatis laudantium vitae quaerat a iusto rerum facere tempore!</p>
    
    <h2 id="daum">다음</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, rem fuga. Dolore praesentium dicta est ipsa asperiores quae iste ducimus mollitia nulla quos. Totam aut dicta explicabo, fugit doloribus ratione!</p>
</body>

네이버를 클릭하면 '네이버'의 내용이 있는 곳으로 이동한다. 여기에서 p태그 안에 있는 내용이 적어서 이동한지 잘 안보이는데 내용을 늘리면 링크 이동이 되었음이 잘 보일 것이다

글자 모양 태그

태그	설명
b	굵은 글자(bold)
i	기울어진 글자(italic)

태그	설명
small	작은 글자
sub	아래 첨자(subscript)
sup	위 첨자(superscript)
ins	밑줄 글자(insert)
del	취소선이 그어진 글자(delete)

- 글자 모양 태그 내부에 제목 글자 태그와 본문 글자 태그를 넣을 수 없다

<body>
    <!--글자 모양 알아보기-->
    
    <p>일반 글자 모양</p>
    <b>굵은 글자 모양</b>
    <i>기울임 글자 모양</i>
    <p>일반 <small>글자</small> 모양</p>
    <p>일반 <sub>글자</sub> 모양</p>
    <p>일반 <sup>글자</sup> 모양</p>
    <ins>일반 글자 모양</ins>
    <del>일반 글자 모양</del>
</body>

- p태그를 쓰면 자동 줄바뀜이 가능 -> p태그를 문단으로 인식

02 목록 태그

내비게이션 메뉴

- 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼

- 목록 태그 : 내비게이션 메뉴를 만들기 위해 주로 사용(list)

태그	설명
ul	순서가 없는 목록(unordered list) 생성
ol	순서가 있는 목록(ordered list) 생성
li	목록 요소(list item) 생성

<body>
    <!--목록 태그-->
    
    <h2>순서가 없는 과일 종류</h2>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>

    <h2>순서가 있는 과일 목록</h2>
    <ol>
        <li>딸기</li>
        <li>자두</li>
        <li>샤인머스캣</li>
    </ol>
</body>

<중첩 목록 만들기>

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

03 테이블 태그

테이블 태그

태그	설명
table	표 삽입
tr	표에 행(table row) 삽입
th	표의 제목 셀(table heading) 생성
td	표의 일반 셀(table data) 생성

<body>
    <!--표에 셀 추가하기-->
    <h1>1학기 시간표 만들기</h1>

    <table border="1">
        <thead>
            <tr>
                <!--1번째 행-->
                <th></th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <!--2번째 행-->
                <th>1교시</th>
                <th>영어</th>
                <th>국어</th>
                <th>과학</th>
                <th>미술</th>
                <th>기술</th>
            </tr>
            <tr>
                <!--3번째 행-->
                <th>2교시</th>
                <th>도덕</th>
                <th>체육</th>
                <th>영어</th>
                <th>수학</th>
                <th>사회</th>
            </tr>
        </tbody>

    </table>
</body>

border="1" : 표의 테두리를 지정하는 속성

테이블 태그의 속성

태그	속성	설명
table	border	표의 테두리 두께 지정
th, td	colspan	셀의 너비 지정, 칸(열) 합치기
th, td	rowspan	셀의 높이 지정, 줄(행) 합치기

<body>
    <!--표 합하기-->
    <h1>1학기 시간표 만들기</h1>

    <table border="1">
        <thead>
            <tr>
                <!--1번째 행-->
                <th></th>
                <th>월</th>
                <th>화</th>
                <th>수</th>
                <th>목</th>
                <th>금</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <!--2번째 행-->
                <th>1교시</th>
                <th>영어</th>
                <th colspan="2">국어</th>
                <th>미술</th>
                <th rowspan="2">기술</th>
            </tr>
            <tr>
                <!--3번째 행-->
                <th>2교시</th>
                <th>도덕</th>
                <th>체육</th>
                <th>영어</th>
                <th>수학</th>
            </tr>
        </tbody>

    </table>
</body>

<body>
    <table border="1">
        <thead>
            <tr>
                <!--1번째 행-->
                <th colspan="2">지역별 홍차</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <!--2번째 행-->
                <th rowspan="3">중국</th>
                <th>정산소종</th>
            </tr>

            <tr>
                <!--3번째 행-->
                <th>기문</th>
            </tr>

            <tr>
                <!--4번째 행-->
                <th>운남</th>
            </tr>

            <tr>
                <!--5번째 행-->
                <th rowspan="4">인도 및 스리랑카</th>
                <th>아삼</th>
            </tr>

            <tr>
                <!--6번째 행-->
                <th>실론</th>
            </tr>

            <tr>
                <!--7번째 행-->
                <th>다질링</th>
            </tr>

            <tr>
                <!--8번째 행-->
                <th>닐기리</th>
            </tr>
        </tbody>
    </table>
</body>

04 미디어 태그

미디어 태그 속성

- 이미지, 오디오, 비디오에 필요한 추가 정보는 속성을 사용

태그	속성	설명
img 태그	src	이미지의 경로 지정, 파일명 지정
	alt	이미지가 없을 때 나오는 글자 지정
	width	이미지의 너비
	height	높이
audio. video 태그	src	음악, 비디오 파일의 경로 지정
	preload	음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 결정
	autoplay	자동 재생 여부 결정
	loop	반복 여부 지정
	controls	재생 도구 출력 여부 지정
video 태그	width	비디오의 너비
video 태그	height	높이

1. 이미지 삽입하기

- 이미지 파일 준비 : 준비 파일(이미지.jpg)을 HTML 페이지와 같은 폴더에 넣기

<body>
    <h2>펭귄 이미지 삽입하기</h2>
    <!--펭귄 이미지-->
    <img src="pengiun.png" alt="펭귄 이미지" width="150" height="150">
    
    <!--이미지가 없을 때 경고 표시-->
    <img src="pengin.png" alt="잘못된 파일명">
</body>

사진 출처: https://images.app.goo.gl/gWPuVUvBVhyYVS3n8

2. 음악 삽입하기

- 음악 파일 줄비 : 준비 파일(오디오.mp3)을 HTML 페이지와 같은 폴더에 넣기

<body>
    <h2>음악 삽입하기</h2>
    <audio src="Kalimba.mp3" controls></audio>

    <br><br>

    <h2>동영상 삽입하기</h2>
    <video src="Wildlife.webm" controls width="500" height="300" autoplay></video>

    <!--브라우저마다 지원하는 버전이 달라서 따로 표기-->
    <video controls="controls">
        <source src="Wildlife.mp4" type="video/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>

크롬에서는 autoplay를 지원하지 않는다

3. 동영상을 불러오는 동안 다른 이미지 보여 주기

poster 속성

- <video> 태그의 속성

- 동영상을 불러오는 동안 사용자에게 보여 줄 이미지를 지정

- 이미지 경로 입력

<body>
    <video controls="controls" poster="http://placehold.it/640x360">
        <source src="Wildlife.mp4" type="video/mp4">
        <source src="Wildlife.webm" type="video/webm">
    </video>
</body>

728x90

'HTML' 카테고리의 다른 글

[CSS] 레이아웃 구성 (0)	2021.10.28
[CSS] CSS3 속성 (0)	2021.10.11
[CSS] CSS3 기초 : 선택자와 단위 (0)	2021.10.10
[HTML] 입력 양식 태그와 구조화 태그 (0)	2021.10.10
[HTML] 기본 개념 (0)	2021.10.09

ClouD

[HTML] HTML5 기본 태그

'HTML' 카테고리의 다른 글

티스토리툴바

[HTML] HTML5 기본 태그

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바