[HTML] 2. HTML의 블록 vs 인라인

Mar 06, 2025


<!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>빈박스 : block (inset 영역포함)</div>   <!--inset 영역-->
    <div>빈박스 : block (inset 영역포함)</div>  <!--inset 영역-->
    <span>랩핑박스 : inline</span>  <!--inline 영역-->
    <span>랩핑박스 : inline</span>  <!--inline 영역-->
</body>
</html>

💡

1. 블록 요소 (`block`)

한 줄 전체를 차지하며 줄 바꿈이 자동으로 발생함

대표적인 예: <div>, <p>, <h1> ~ <h6>, <ul>, <ol>, <li>, <section> 등

width와 height 속성을 지정할 수 있음

🔹 예제 코드:


<div>빈박스 : block (inset 영역포함)</div>
<div>빈박스 : block (inset 영역포함)</div>

📌 두 개의 <div> 요소가 존재하며, 각각 새로운 줄에서 시작됨.

💡

2. 인라인 요소 (`inline`)

컨텐츠의 크기만큼만 영역을 차지하며, 줄 바꿈이 발생하지 않음

대표적인 예: <span>, <a>, <strong>, <em>, <label> 등

width와 height 속성은 적용되지 않음 (컨텐츠 크기에 맞춰짐)

🔹 예제 코드:


<span>랩핑박스 : inline</span>
<span>랩핑박스 : inline</span>

📌 <span> 요소는 연속해서 표시되며, 줄 바꿈 없이 이어짐.

블록 요소와 인라인 요소의 차이점 요약

요소 유형	줄 바꿈 발생	크기 지정 가능	대표 태그
Block	✅ (자동 줄 바꿈)	✅ (`width`, `height` 적용 가능)	`<div>`, `<p>`, `<h1>` ~ `<h6>`, `<ul>`, `<ol>`
Inline	❌ (줄 바꿈 없음)	❌ (내용 크기만큼 자동 설정)	`<span>`, `<a>`, `<strong>`, `<em>`

See more posts

[HTML] 2. HTML의 블록 vs 인라인

1. 블록 요소 (block)

🔹 예제 코드:

2. 인라인 요소 (inline)

🔹 예제 코드:

블록 요소와 인라인 요소의 차이점 요약

More articles

[HTML] 4. HTML 이미지 태그 사용법

[HTML] 3. HTML 제목 태그 정리

[HTML] 1. HTML 기본구조

[환경세팅] 8. Cursor 설치

1. 블록 요소 (`block`)

2. 인라인 요소 (`inline`)