HTML 공부하기 (5) HTML 태그 성질 (블록, 인라인, 인라인블록 요소)

1. 블록 요소

• 한 줄 전체를 차지함 → 자동으로 줄바꿈 발생
• 기본적으로 가로 100% 폭을 가짐
• width/height, margin, padding 모두 적용 가능
• 내부에 블록/인라인 요소 모두 포함 가능
• 레이아웃의 큰 구조를 짜는 데 사용됨

​

대표 태그​

html, body, div, p, ul, ol, li, dl , dt, dd, h태그 등

​

2. 인라인 요소

• 줄바꿈이 없음 → 옆으로 계속 이어짐
• 컨텐츠의 크기만큼만 공간 차지
• width/height 지정 불가
• margin 좌우만 적용, 상하 margin은 적용 안 되는 것으로 취급됨
• (padding은 가능하지만 상하 padding은 레이아웃에 큰 영향 없음)
• 텍스트/문장 안에서 사용됨

​

대표 태그

a, span, strong, b, em, i 등

​

3. 인라인 블록 요소

• 줄바꿈 없음(인라인처럼)
• width/height 지정 가능(블록처럼)
• margin/padding 모두 정상적으로 적용
• 요소 자체는 인라인처럼 흐르지만, 크기 조절은 자유로운 하이브리드 성질

​

대표 태그

img, input, button, select 등

​

​

구분	줄바꿈	width/height	margin/padding	용도
블록(Block)	O	O	O	레이아웃 큰 구조 잡기
인라인(Inline)	X	X	margin 좌우만 / padding 제한적	텍스트 안 강조·링크 등
인라인-블록(Inline-block)	X	O	O	버튼, 입력창, 작은 UI 배치