인라인 요소
요소간 줄바꿈이 없으며, content가 모서리에 닿을때 줄바꿈이됩니다.
일반적으로 인라인 요소는 블록 요소를 감쌀 수 없지만 HTML5부터는 예외로 <a>태그가 블록 요소를 감쌀 수 있도록 바뀌었습니다.
|
선택자 |
HTML에서의 용도 |
선택자 |
HTML에서의 용도 |
선택자 |
HTML에서의 용도 |
|
a |
앵커 링크 |
i |
이탤릭 |
q |
짧은 인용 |
|
abbr |
줄임말 |
iframe |
인라인 하위 윈도우 |
smalll |
소형 인쇄 |
|
address |
물리적인 주소 |
img |
이미지 임베딩 |
select |
선택 가능 목록 |
|
area |
이미지 맵의 영역 |
input |
입력 필드 |
source |
미디어 리소스 |
|
audio |
사운드 콘텐츠 |
ins |
입력된 텍스트 |
span |
지역화 적용 서식 |
|
bm |
볼드 텍스트 |
keygen |
폼에서 생성된 키 |
strong |
굵은 강조 |
|
cite |
짧은 인용 |
kbd |
키보드 텍스트 |
sub |
아래 첨자 |
|
code |
코드 텍스트 |
label |
폼 엘리먼트의 라벨 |
summary |
상세정보 헤더 |
|
del |
삭제된 텍스트 |
legend |
필드셋 제목 |
sup |
위 첨자 |
|
details |
엘리먼트의 상세정보 |
link |
리소스 참조 |
tbody |
테이블 바디 |
|
dfn |
정의된 용어 |
mark |
마크 텍스트 |
td |
테이블 데이터 |
|
command |
명령 버튼 |
meter |
측정 범위 |
time |
날짜/시간 |
|
em |
강조 |
nav |
내비게이션 링크 |
var |
변수 |
|
font |
폰트 외양 |
optgroup |
드롭다운 리스트 옵션 |
|
|
* 붉은색 = html5에서 추가된 기능
블록 요소
블록 요소는 혼자서 한줄 전체를 차지하기 때문에 다른 요소를 나란히 배치해도 줄바꿈이 있습니다.
일반적으로 인라인 요소를 감쌀 수 있으며 하나의 덩어리로 생각하시면 됩니다.
|
선택자 |
HTML사용 용도 |
선택자 |
HTML사용 용도 |
선택자 |
HTML사용 용도 |
|
article |
아티클 콘텐츠 |
fieldset |
필드셋 라벨 |
p |
단락 |
|
aside |
어사이드 콘텐츠 |
figcaption |
이미지 설명 |
pre |
미리 서식을 지정한 텍스트 |
|
blockquote |
긴 인용 |
figure |
그룹 미디어 콘텐츠 및 설명 |
progress |
시간 소요 작업의 진행율 표시 |
|
body |
페이지 바디 |
footer |
영역 또는 페이지 푸터 |
section |
웹 페이지 영역 |
|
br |
줄바꿈 |
form |
입력 폼 |
table |
테이블 |
|
button |
푸시버튼 |
h1-6 |
레벨 1-6의 헤더 |
tbody |
테이블 바디 |
|
canvas |
드로잉 영역 |
head |
페이지 관련 정보 |
textarea |
텍스트 입력 폼 |
|
caption |
테이블 설명 |
header |
섹션 또는 페이지 헤더 |
tfoot |
테이블 푸터 |
|
col |
테이블 컬럼 |
hgroup |
그룹 헤더 정보 |
th |
테이블 헤더 |
|
colgroup |
테이블 컬럼 그룹 |
hr |
가로줄 |
thead |
테이블 헤더 |
|
dd |
설명 정의 |
li |
리스트 아이템 |
tr |
테이블 행 |
|
div |
분할 영역 |
map |
이미지 맵 |
ul |
순서없는 리스트 |
|
dl |
정의 목록 |
object |
개체 임베딩 |
video |
동영상 재생기 |
|
dt |
정의 용어 |
ol |
순서 지정 리스트 |
|
|
|
embed |
외부 콘텐츠 |
output |
폼 결과 |
|
|
* 붉은색 = html5에서 추가된 기능
| 
