HTML : Block, Inline, Inline-Block 태그 정리

HTML

HTML : Block, Inline, Inline-Block 태그 정리

죽이죽이 2024. 1. 22. 14:17

참고하기 좋은 사이트

※ MDN
- https://developer.mozilla.org/ko/docs/Web/HTML/Element

※ TCP School
- https://tcpschool.com/html-tags/intro

Block 요소 (HTML5 기준)

※ 특징
- 태그가 한 라인 전체 공간을 차지하기때문에 좌우에 다른 태그들을 배치할 수 없다.
- 높이, 너비를 지정할 수 있다.
- 전체적인 틀을 잡을때 주로 사용된다.
- 내부에 block, inline 요소 모두 허용한다.

※ 종류 및 설명

address 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용

article 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용

aside 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낼 때 사용 (사이드바 등)

blockquote 인용문에 사용

details 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항을 명시할 때 사용

dialog 팝업 대화 상자나 모달을 생성할 때 사용

dd <dl> 요소 내에서 설명 부분을 정의할 때 사용

div 레이아웃을 나누는데 주로 사용

dl 용어와 그에 대한 설명을 리스트 형식으로 정의할 때 사용

dt <dl> 요소에서 용어 부분을 정의할 때 사용

fieldset <form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용

figcaption <figure> 요소의 캡션을 정의할 때 사용

figure 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용

footer
(Layout) 문서나 특정 섹션의 하단부를 정의할 때 사용

form 사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용

h1 ~ h6 HTML 문서에서 제목을 정의할 때 사용

header
(Layout) 문서나 특정 섹션의 상단부를 정의할 때 사용

hgroup 문서 구획의 다단계 제목, 섹션의 제목 그룹을 나타낼 때 사용

hr
(Self Closing)
콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용

li <ul> 요소에 포함되는 아이템을 정의할 때 사용

main
(Layout)
<body> 요소의 주 콘텐츠를 정의할 때 사용

nav
(Layout)
다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용

ol 순서가 있는 HTML 리스트를 정의할 때 사용

p 문단을 정의할 때 사용

pre 미리 정의된 형식의 텍스트를 정의할 때 사용

section
(Layout)
HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용

table 데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용

ul 순서가 없는 HTML 리스트를 정의할 때 사용

Inline 요소 (HTML5 기준)

※ 특징
- 태그가 필요한 만큼만 공간을 차지하기때문에 한 라인에 여러개의 태그를 배치할 수 있다.
- 높이, 너비 속성을 사용할 수 없다.
- 내용을 작성할때 주로 사용된다.
- 내부에 inline 요소만 허용한다.

※ 종류 및 설명

b 다른 부가적인 목적 없이 단순히 굵게 표현되는 텍스트를 정의할 때 사용

big 글자 크기가 큰 텍스트를 정의할 때 사용

i 기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용 (항상 이텔릭체는 아님)

small 글자 크기가 작은 텍스트를 정의할 때 사용

abbr 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 사용

cite 책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용

code 컴퓨터 코드의 일부분을 나타낼 때 사용

dfn HTML에서 용어의 정의를 나타낼 때 사용

em 강조된 텍스트를 표현할 때 사용

kbd 키보드 입력을 나타낼 때 사용

strong 해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용

samp 컴퓨터 프로그램의 샘플 또는 인용 출력을 나타낼 때 사용

var 변수를 정의할 때 사용

a 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의할 때 사용

bdo 자식 요소의 텍스트 방향성을 정의할 때 사용

br
(Self Closing) 텍스트 내의 줄바꿈을 정의할 때 사용

map 클라이언트 사이드 이미지맵을 정의할 때 사용

object 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체를 정의할 때 사용

q 짧은 인용구를 정의할 때 사용

script 자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용

span 단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해 사용

sub 아랫첨자 텍스트를 표현할 때 사용

sup 윗첨자 텍스트를 표현할 때 사용

label 사용자 인터페이스 항목의 설명을 나타내는데 사용

option <select> 요소에서 사용되는 하나의 옵션을 정의할 때 사용

Inline-Block 요소 (HTML5 기준)

※ 특징
- 한줄에 여러개의 태그를 배치할 수 있는 inline 요소의 특징과 높이, 너비를 지정할 수 있는 block 요소의 특징을 모두 가지고 있다.

※ 종류 및 설명

button 클릭할 수 있는 버튼을 정의할 때 사용

img
(Self Closing)
HTML 문서에서 이미지를 정의할 때 사용

iframe 현재 HTML 문서에 다른 문서를 포함시킬 때 사용

input
(Self Closing)
사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용

select 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용

textarea 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용

address	문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용
article	해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용
aside	문서의 주요 내용과 간접적으로만 연관된 부분을 나타낼 때 사용 (사이드바 등)
blockquote	인용문에 사용
details	사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항을 명시할 때 사용
dialog	팝업 대화 상자나 모달을 생성할 때 사용
dd	<dl> 요소 내에서 설명 부분을 정의할 때 사용
div	레이아웃을 나누는데 주로 사용
dl	용어와 그에 대한 설명을 리스트 형식으로 정의할 때 사용
dt	<dl> 요소에서 용어 부분을 정의할 때 사용
fieldset	<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
figcaption	<figure> 요소의 캡션을 정의할 때 사용
figure	삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용
footer (Layout)	문서나 특정 섹션의 하단부를 정의할 때 사용
form	사용자로부터 입력을 받을 수 있는 HTML 입력 폼을 정의할 때 사용
h1 ~ h6	HTML 문서에서 제목을 정의할 때 사용
header (Layout)	문서나 특정 섹션의 상단부를 정의할 때 사용
hgroup	문서 구획의 다단계 제목, 섹션의 제목 그룹을 나타낼 때 사용
hr (Self Closing)	콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의할 때 사용
li	<ul> 요소에 포함되는 아이템을 정의할 때 사용
main (Layout)	<body> 요소의 주 콘텐츠를 정의할 때 사용
nav (Layout)	다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용
ol	순서가 있는 HTML 리스트를 정의할 때 사용
p	문단을 정의할 때 사용
pre	미리 정의된 형식의 텍스트를 정의할 때 사용
section (Layout)	HTML 문서에 포함된 독립적인 섹션을 정의할 때 사용
table	데이터를 포함하는 셀들의 행과 열로 구성된 2차원 테이블을 정의할 때 사용
ul	순서가 없는 HTML 리스트를 정의할 때 사용

b	다른 부가적인 목적 없이 단순히 굵게 표현되는 텍스트를 정의할 때 사용
big	글자 크기가 큰 텍스트를 정의할 때 사용
i	기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용 (항상 이텔릭체는 아님)
small	글자 크기가 작은 텍스트를 정의할 때 사용
abbr	단어의 축약형이나 머리글자로만 된 단어를 정의할 때 사용
cite	책이나 음악, 영화, 예술 작품 등과 같은 창작물의 제목을 정의할 때 사용
code	컴퓨터 코드의 일부분을 나타낼 때 사용
dfn	HTML에서 용어의 정의를 나타낼 때 사용
em	강조된 텍스트를 표현할 때 사용
kbd	키보드 입력을 나타낼 때 사용
strong	해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조할 때 사용
samp	컴퓨터 프로그램의 샘플 또는 인용 출력을 나타낼 때 사용
var	변수를 정의할 때 사용
a	하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크를 정의할 때 사용
bdo	자식 요소의 텍스트 방향성을 정의할 때 사용
br (Self Closing)	텍스트 내의 줄바꿈을 정의할 때 사용
map	클라이언트 사이드 이미지맵을 정의할 때 사용
object	외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체를 정의할 때 사용
q	짧은 인용구를 정의할 때 사용
script	자바스크립트와 같은 클라이언트 사이드 스크립트를 정의할 때 사용
span	단순 텍스트나 텍스트에 관련된 마크업 등 구문 콘텐츠에 스타일이나 속성의 범위를 적용하기 위해 사용
sub	아랫첨자 텍스트를 표현할 때 사용
sup	윗첨자 텍스트를 표현할 때 사용
label	사용자 인터페이스 항목의 설명을 나타내는데 사용
option	<select> 요소에서 사용되는 하나의 옵션을 정의할 때 사용

button	클릭할 수 있는 버튼을 정의할 때 사용
img (Self Closing)	HTML 문서에서 이미지를 정의할 때 사용
iframe	현재 HTML 문서에 다른 문서를 포함시킬 때 사용
input (Self Closing)	사용자로부터 입력을 받을 수 있는 입력 필드를 정의할 때 사용
select	옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용
textarea	여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의할 때 사용