1. 블록(block)과 인라인(inline)
“브라우저가 요소를 줄(라인)에서 어떻게 배치하느냐” 기준으로 나뉨
실무에서 레이아웃/정렬 문제 대부분이 여기서 시작
1️⃣ 블록 태그(Block-level element)
1) 특징
- 한 줄을 통째로 차지(기본적으로 줄바꿈이 일어남)
- 다음 요소는 무조건 다음 줄로 내려감
- 보통 “영역/구조(레이아웃)”를 잡는 데 사용
2) 대표 태그
div, p, h1~h6, ul/ol/li, section, article, header, footer, main, nav, form3) 예시
<p>문단 1</p>
<p>문단 2</p>➡ 문단 1 아래에 문단 2가 자동으로 내려감
2️⃣ 인라인 태그(Inline element)
1) 특징
- 내용만큼만 공간을 차지
- 줄바꿈 없이 옆으로 쭉 이어짐
- 보통 “텍스트 흐름 안에서 일부만” 꾸미거나 의미 부여
2) 대표 태그
span, a, strong, em, label, code3) 예시
<p>
저는<strong>강조</strong>와<ahref="#">링크</a>가 있어요.
</p>➡ 같은 문장 줄 안에서 자연스럽게 섞여서 보여요.
3️⃣ 너비/높이(width/height) 설정 차이 (중요!)
1) 블록 요소
- 기본
width: 100%처럼 부모의 가로폭을 꽉 채우는 느낌
width,height를 원래 잘 적용 가능
2) 인라인 요소
- 기본적으로
width,height를 줘도 잘 안 먹힘
- 가로/세로 크기는 콘텐츠(글자) 크기에 의해 결정
예
<spanstyle="width:200px; height:200px; background:yellow;">
span
</span>➡ 배경색은 보이는데 “박스처럼 200x200”이 잘 안 잡히는 게 일반적이에요.
4️⃣ 실습
1) div와 span 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- div는 행 전체를 잡는 블럭 속성을 가짐 -->
<div>1</div>
<div>2</div>
<!-- span은 자기 자신의 크기만 잡는 인라인 속성을 가짐 -->
<span>3</span>
<span>4</span>
<div>5</div>
</body>
</html>
2) div (블록 속성)
div= 빈 박스 태그 (행 전체) → 블럭 속성
- 브라우저의 크기에 비례함
3) span (인라인 속성)
span= 빈 박스 태그 (자기 자신만) → 인라인 속성
- 크기 고정
Share article