IT 개발노트

HTML5 태그 기본 본문

기초튼튼/HTML

HTML5 태그 기본

limsungju 2019. 2. 20. 09:51

1. HTML5 태그 기본
1.1 글자 태그
- 글자 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그
1.1.1 <h?></h?>
: 제목 글자 태그는 제목을 입력할 때에 사용하는 태그, 폰트의 크기가 태그에 따라 정해져있다.
h태그 뒤 숫자로 구분한다.

작성

1
<h?>제목 내용</h?>


태그 이름

설명 

h1 

첫 번째로 큰 제목 글자 태그 

h2 

두 번째로 큰 제목 글자 태그 

h3 

세 번째로 큰 제목 글자 태그 

h4 

네 번째로 큰 제목 글자 태그 

h5 

다섯 번째로 큰 제목 글자 태그 

h6 

여섯 번째로 큰 제목 글자 태그 

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 + CSS3 Text</title>
<meta charset="utf-8">
</head>
<body>
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
    <h5>Header 5</h5>
    <h6>Header 6</h6>
</body>
</html>


결과

1.1.2 <p></p>
: 한 개의 단락을 만들때 사용

작성

1
<p>내용</p>


태그 이름

설명 

p 

본문 글자 태그 

1.1.3 <br />
: 문장을 줄바꾸기(개행)할 때 사용

1.1.4 <hr />
: 페이지에 가로로 밑줄을 만들어 줄때 사용

1.1.5 <pre></pre>
: 입력한 그대로 출력할 때 사용
띄어쓰기, 들여쓰기 줄바꿈이 입력된 그대로 출력됨

작성

1
<pre>내용</pre>


예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
<meta charset="utf-8">
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h2>dolor sit amet</h2>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    <br />
    <p>In porttitor lorem at justo feuiat aliquet</p>
    <br />
    <p>Nunc id massa at magna semper hendrerit</p>
    <br />
    <p>Vivamus rhoncus eros vel ante suscipit non facilisis risus return</p>
</body>
</html>


결과

1.1.6 앵커 태그
: 서로 다른 웹 페이지 사이 또는 웹 페이지 내부에서 특정한 위치로 이동할 때에 사용하는 태그

 태그 이름

설명 

a 

앵커 태그 

- href 속성을 사용해 이동할 경로를 정한다.

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
<meta charset="utf-8">
</head>
<body>
    <a href="http://hanb.co.kr">Hanbit</a><br />
    <a href="https://github.com/">Github</a><br />
</body>
</html>


1.2 글자 태그
1.2.1 글자 형태 태그
: 글자에 형태와 의미를 부여할 때에 사용하는 태그

태그 이름

설명

<abbr></abbr>

약자표시와 함께 마우스가 문자에 있으면 출력 

<cite></cite> 

웹 문서나 포스트에서 참고할때 사용 

<code></code> 

컴퓨터 인식을 위한 소스코드 

<kdb></kdb> 

키보드 입력이나 음성명령 같은 사용자 입력내용 

<small></small> 

원 문자보다 작은 글씨로 표시
부가 정보 표현시 자주 사용 

<sub></sub> 

아래첨자 

<sup></sup> 

윗 첨자 

<s></s> 

취소선 

<u></u> 

밑줄 / <hr>은 페이지 전체에 수평으로 줄을 표시하지만 <u>는 해당 범위에만 수평줄을 표시 

b

굵은 글자 태그 

i 

기울어진 글자 태그 

ins

밑줄 글자 태그

del

가운데 줄이 그어진 글자 태그


1.2.2 <ruby></ruby>
: 루비 문자는 문장 내의 임의의 문자에 대해 읽는 법을 알려주는 글자
윗 첨자와 비슷하게 글씨 위에 작게 표시
문장의 중간에 정렬됨

작성

1
2
3
4
5
<ruby>내용
    <rp>(</rp>
    <rt>첨자문구</rt>
    <rp>)</rp>
</ruby>


태그 이름

설명 

rt 

위에 위치하는 큰 문자 태그 

rp 

ruby 태그를 지원할 경우 출력되지 않는 태그
ruby를 지원하지 않는 브라우저에서 나오는 문구

- 한국어와 일본어에서 한자 음을 표기할 때에 많이 사용

예시

1
2
3
4
5
6
<body>
    <ruby>
        <span>大韓民國</span>
        <rt>대한민국</rt>
     </ruby>
</body>


결과

1.2.3 <blockquote></blockquote> 또는 <q></q>
: 다른 블로그나 사이트의 글을 인용할 경우 사용
자동 들여쓰기가 되어 다른 텍스트와 구별할 수 있음. (blockquote)
인용문구에 " " 표시가 된다.

작성

1
2
3
4
5
<blockquote [cite="인용사이트주소"]>
    인용내용
</blockquote>
 
<q>인용내용</q>


1.2.4 <strong></strong> 또는 <b></b>
: 문장에서 문자를 강조하여 굵게 표시할 경우에 사용

작성

1
2
<strong>강조문구</strong>
<b>강조문구</b>


1.2.5 <em></em> 또는 <i></i>
: 문자에 기울임을 주는 태그

작성

1
2
<em>강조문구</em>
<i>강조문구</i>


1.2.6 <mark></mark>
: 배경부분을 노랑색으로 되며 형광펜 표시가 된듯하게 출력

작성

1
<mark>강조문구</mark>


1.2.7 <ul></ul>
:순서가 필요하지 않은 목록을 만들때 사용
리스트 앞에 특정모양이 출력
해당 모양은 CSS를 이용하여 수정할 수 있다.

작성

1
2
3
4
5
<ul>
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ul>



1.2.8 <ol></ol>
: 순서가 있는 목록 만들때 사용
속성으로 문자(abc... / ABC), 숫자(123...), 로마자로 설정
CSS로 순서를 설정 가능

작성
1
2
3
4
5
<ol type="설명문자" start="시작순서">
    <li>내용1</li>
    <li>내용2</li>
    <li>내용3</li>
</ol>


1.2.9 <dl></dl>
: 용어나 문장에 대한 정의(definition) 리스트
설정 자동으로 들여쓰기가 됨

태그 이름 

설명 

<dt></dt> 

정의의 제목 

<dd></dd> 

정의 내용 

작성

1
2
3
4
5
<dl>
    <dt>정의제목</dt>
    <dd>정의내용</dd>
    <dd>정의내용</dd>
</dl>


태그 이름

설명 

ul 

순서가 없는 목록 태그 

ol 

순서가 있는 목록 태그 

li 

목록 요소 

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
<meta charset="utf-8">
</head>
<body>
    <h1>ol tag</h1>
    <ol>
        <li>Facebook</li>
        <li>Tweeter</li>
        <li>Linked In</li>
    </ol>
    <h1>ul tag</h1>
    <ul>
        <li>Facebook</li>
        <li>Tweeter</li>
        <li>Linked In</li>
    </ul>
</body>
</html>


결과

1.2.4 정의 목록
: 정의 목록을 생성할 때는 다음 태그를 사용

태그 이름 

설명 

dl 

정의 목록 태그 

dt 

정의 글자 태그 

dd 

정의 설명 태그 

- 정의 목록은 다음과 같은 용어를 설명할 때 사용하는 태그이지만 실제로 자주 사용하지는 않음

1.3 <table></table>
: 테이블 태그는 표를 생성할 때에 사용하는 태그
웹 문서에서 자료를 정리할 때 자주 사용한다.
행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 한다.

작성

1
2
3
4
5
6
<table>
    <tr>
        <td>내용2</td>
        <td>내용3</td>
    </tr>
</table>>


- 표를 생성할 때는 table 태그와 다음 태그를 사용

태그 이름

설명 

<tr></tr>

한 개의 행(Row)를 만드는 태그

<td></td>

한 개의 열을 만다는 태그

예시

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
<meta charset="utf-8">
</head>
<body>
    <table border = "1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <th>Data 1</th>
            <th>Data 1</th>
        </tr>
        <tr>
            <th>Data 2</th>
            <th>Data 2</th>
        </tr>
</body>
</html>


결과

1.3.1 테이블 구조



1.3.2 테이블 태그_추가 옵션

태그 이름

설명 

<th></th> 

열에 대한 제목을 표시하는 태그
중앙정렬 및 굵게 표시 됨 

<caption></caption> 

테이블의 제목이나 내용을 추가하는 태그
다른 태그를 이용하여 Text를 꾸밀 수 있음
기본 위치는 테이블 위 중앙에 배치된다. 

<figure><figcaption></figcaption></figure>

<figure>태그로 감싸서 사용하며<caption>과 비슷한 기능
작성하는 위치에 따라 위치가 변경됨
-<table>전 테이블 위 </table>후 테이블 뒤
* <img>태그 설명에 주로 사용

<thead></thead>

테이블 구조를 나누는 태그, 제목부분을 나타내는 태그 

<tbody></tbody>

테이블 구조를 나누는 태그, 몸체로 테이블에 여러 개 존재 가능 

<tfoot></tfoot>

테이블 구조를 나누는 태그, <thead>태그 뒤에 있어야 함 

<col>

열에 대한 스타일을 적용할때 사용
위치 <caption>태그 뒤 <tr><td>태그 전 span태그를 사용하여 열을 묶을 수 있다. 

<colgroup></colgroup>

열을 그룹으로 묶어서 스타일 적용할때 사용
위치 <caption>태그 뒤 <tr><td>태그 전 

1.3.3 테이블 태그_속성
- <table></table>

border 

<table>태그의 속성으로 표의 테두리 두께를 지정 

작성

1
<table border="두께"></table>


- <td></td>

rowspan 

<td>태그의 속성으로 지정한 행만큼 행을 병합 

colspan 

<td>태그의 속성으로 지정한 열만큼 열 병합 

- <td colspan="숫자"><td>

작성

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
    <tr>
        <td colspan="병합할 열 갯수">
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>


1.3.4 열 병합구조

작성

1
2
3
4
5
6
7
8
9
<table>
    <tr>
        <td colspan="3">내용1</td>
    </tr>
    <tr>
        <td>내용2</td>
        <td>내용3</td>
    </tr>
</table>


- td rowspan="숫자">

작성

1
2
3
4
5
6
7
8
9
10
<table>
    <tr>
        <td rowspan="병합할 행 갯수">
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>


1.4 이미지 태그
: 이미지를 생성할 때는 img 태그를 사용한다.
- img 태그는 다음과 같은 속성을 갖는다.

속성 이름

설명 

src 

이미지의 경로 지정 

alt 

이미지가 없을 때 나오는 글자 지정 

width 

이미지의 너비 지정 

height 

이미지의 높이 지정 

예시

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>HTML TEXT Basic Page</title>
<meta charset="utf-8">
</head>
<body>
    <img src="b2".jpg" alt="신비" width="300" />
    <img src="Nothing" alt="그림이 존재하지 않습니다." width="300" />
</body>
</html>


1.5 오디오 태그
- 오디오 태그는 HTML5에서 추가된 기능


- 웹 브라우저에서 음악을 재생할 수 있게 해준다.
예시

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


- audio 태그의 속성

속성 이름

설명 

src 

음악 파일의 경로 지정 

preload 

음악을 재생하기 전에 모두 불러올지 지정 

autoplay 

음악을 자동 재생할지 지정 

loop 

음악을 반복할지 지정 

controls 

음악 재생 도구를 출력할지 지정 

- Source 속성
: 웹 브라우저마다 지원하는 음악 파일 형식이 다름으로 사용한다.

예시

1
2
3
4
5
6
<body>
    <audio controls="controls">
        <source src="Kalimba.mp3" type="audio/mp3" />
        <source src="Kalimba.ogg" type="audio/ogg" />
    </audio>
</body>


결과

1.6 비디오 태그
- 비디오 태그는 HTML5에서 추가된 기능


- 웹 브라우저에서 영상을 재생할 수 있게 해준다.
- 웹 브라우저 별로 지원하는 동영상 파일 형식이 다르다.

예시

1
2
3
4
5
6
<body>
    <video controls="controls">
        <source src="Wildlife.mp4" type="audio/mp4" />
        <source src="Wildlife.webm" type="audio/webm" />
    </video>
</body>


1.7 입력 양식 태그
: 입력 양식 태그는 서버와 통신하고자 사용한다.
1.7.1 기본 입력 양식 태그
: input 태그를 사용한다.

예시

1
2
3
4
5
6
7
8
<body>
    <form>
        <input type="text" name="name" /><br />
        <input type="password" name="password" /><br />
        <input type="file" name="file" /><br />
        <input type="submit" /><br />
    </form>
</body>


결과

- input 태그의 type 속성

속성

설명 

button 

버튼을 생성한다. 

checkbox 

체크박스를 생성한다. 

file 

파일 입력 양식을 생성한다. 

hidden 

보이지 않는다. 

image 

이미지 형태를 생성한다. 

password 

비밀번호 입력 양식을 생성한다. 

radio 

라디오 버튼을 생성한다. 

reset 

초기화 버튼을 생성한다. 

submit 

제출 버튼을 생성한다. 

text 

글자 입력 양식을 생성한다. 

1.7.2 textarea 태그
: textarea 태그는 두 줄 이상의 글자를 입력할 때에 사용한다.

1
2
3
4
5
<body>
    <form>
        <textarea></textarea>
    </form>
</body>


결과

1.7.3 select 태그
: select 태그는 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소이다.

태그 이름

설명 

select 

선택 양식을 생성한다. 

optgroup 

옵션을 그룹화한다. 

option 

옵션을 생성한다. 

예시

1
2
3
4
5
6
7
8
<body>
    <select>
        <option>김밥</option>
        <option>떡볶이</option>
        <option>순대</option>
        <option>오뎅</option>
    </select>
</body>


결과

1.8 공간 분할 태그
: 공간 분할 태그는 레이아웃을 생성할 때에 사용한다.
1.8.1 기본 공간 분할 태그
: HTML5 이전에 사용한 공간 분할 태그

1.8.2 <span></span>
: 일정부분을 묶어서 스타일을 적용하거나 구역을 구별할 때 설정
* div와 비슷하지만 div는 그 구역이 블럭별로 줄바꿈이 되지만 span은 줄바꿈이 없다.

작성

1
<span>구역 해당문구</span>



1.8.3 <div></div>

작성

1
<div>구역 해당문구</div>


태그 이름 

설명 

div 

block 형식으로 공간을 분할한다. 

span 

inline 형식으로 공간을 분할한다. 

예시

1
2
3
4
5
6
7
<body>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
    <div>Lorem ipsum</div>
</body>


결과

예시

1
2
3
4
5
6
7
<body>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
    <span>Lorem ipsum</span>
</body>


결과

1.8.4 시멘틱 태그
- 시멘틱 웹 : 기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할 수 없고 웹 페이지에서 데이터를 효율적으로 추출할 수 없다. 이를 해결하고자 특정한 태그에 의미를 부여해서 웹 페이지를 만드는 시도가 시작된다. 이를 시멘틱 웹이라고 표현한다.
- HTML5는 시멘틱 태그를 사용해 시멘틱 웹을 구현한다.
- HTML5는 다음과 같은 시멘틱 공간 분할 태그를 가지고 있다.

태그 이름 

설명 

header 

헤더를 의미 

nav 

내비게이션을 의미 

aside 

사이드에 위치하는 공간을 의미 

section 

여러 중심 내용을 감싸는 공간을 의미 

article 

글자가 많이 들어가는 부분을 의미 

footer 

푸터를 의미 





'기초튼튼 > HTML' 카테고리의 다른 글

페이지구조 / 시멘틱  (0) 2019.02.21
HEAD 태그  (0) 2019.02.20
HTML5 개요  (0) 2019.02.20
'기초튼튼/HTML' Related Articles more