[공부] 자주 쓰는 HTML 태그 정리 (1)

* 개인적인 공부 내용을 기록한 글입니다.

* 「Do it! HTML+CSS+자바스크립트 웹 표준의 정석」을 참고합니다.

---

텍스트 관련 태그

<hn> : 제목

<p> : 텍스트 단락

<br> : 줄 바꿈

<strong> : 중요한 텍스트를 굵게 표시

<b> : 중요하지는 않지만 굵게 표시

<em> : 중요한 텍스트를 기울게 표시

<i> : 중요하지 않은 텍스트를 기울게 표시

<sup> : 위 첨자

<sub> : 아래 첨자

<hr> : 구분선

---

목록 관련 태그

<ol> : 순서 있는 목록의 시작과 끝

<ul> : 순서 없는 목록의 시작과 끝

<li> : 목록의 각 항목

<dl> : 설명 목록의 시작과 끝

<dt> : 설명 목록의 제목

<dd> : 설명 목록의 설명

 

<ol> 태그 관련 Type

1 : 숫자 (기본값)

a : 영문 소문자

A : 영문 대문자

i : 로마 숫자 소문자

I : 로마 숫자 대문자

 

<ol> 태그 관련 속성

start : 원하는 번호부터 시작

---

표 관련 태그

<table> : 표를 나타냄

<caption> : 표의 제목

<tr> : 표의 행

<td> : 표의 셀

<th> : 제목 셀

<thead> : 표 구조에서 제목 부분

<tbody> : 표 구조에서 본문 부분

<tfoot> : 표 구조에서 요약이나 정리 부분

<col> : 표에서 열의 스타일

<colgroup> : 표에서 여러 열을 함께 묶어서 스타일 지정

 

표 관련 속성

rowspan : 행 합치기

colspan : 열 합치기

---

멀티미디어 관련 태그

<object> : 멀티미디어, PDF 파일 등 다양한 형식의 파일 삽입

<embed> : 다른 태그가 지원하지 않을 경우 멀티미디어 파일 삽입

<img> : 이미지 파일 삽입

<audio> : 오디오 파일 삽입

<video> : 비디오 파일 삽입

 

<img> 태그 관련 속성

src : 파일 경로

alt : 대체용 텍스트

width : 너비 (%, px)

height : 높이 (%, px)

 

<object> 태그 관련 속성

data : 파일 경로

width : 너비 (%, px)

height : 높이 (%, px)

 

<embed> 태그 관련 속성

src : 파일 경로

width : 너비 (%, px)

height : 높이 (%, px)

 

<audio>, <video> 태그 관련 속성

src : 파일 경로

width : 너비 (%, px)

height : 높이 (%, px)

controls : 컨트롤바 표시

autoplay* : 자동 실행

loop* : 반복 재생

muted : 음소거

poster : 썸네일

* 대부분의 웹 브라우저는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지하고 있음