display 속성 완전 정복 – block, inline, inline-block, none의 차이

 

 

웹페이지에서 요소들을 어떻게 배치할지는 HTML/CSS에서 정말 중요한 주제입니다.
그 중심에 있는 속성이 바로 **display**예요.

이번 포스팅에서는 실무에서 자주 쓰이는 4가지 기본 display 타입을 쉽게 정리해볼게요.

---

 

✅ display: block

• 기본적으로 한 줄 전체를 차지하고
• 아래로 쌓이는 구조예요.
• width, height 조절이 가능합니다.

📌 대표 태그: div, p, section, article 등

<div>첫 번째 박스</div>
<div>두 번째 박스</div>

 

---

 

✅ display: inline

• 한 줄에 나란히 배치되지만
• width, height 설정이 불가능해요.
• 글자처럼 다뤄지는 요소라고 생각하면 돼요.

📌 대표 태그: span, a, strong, em 등

<span>첫 번째</span>
<span>두 번째</span>

 

---

 

✅ display: inline-block

• inline처럼 가로로 배치되면서
• block처럼 크기를 조절할 수 있어요.
• 버튼 UI에 자주 사용돼요.

<span style="display: inline-block; width: 100px; height: 50px;">버튼</span>

 

---

 

✅ display: none

• 화면에 아예 표시되지 않게 만들어요.
• 공간도 사라지고, 화면에서도 보이지 않아요.
• 토글 메뉴나 조건부 UI에 필수로 쓰이죠.

.hidden {
  display: none;
}

 

---

 

🔄 display 속성 한눈에 비교

속성	줄바꿈	크기 조절	설명
block	O	O	기본 구조 블록
inline	X	X	글자처럼 동작
inline-block	X	O	버튼형 UI
none	X	X	아예 안 보임

 

---

 

✅ 마무리 정리

• display 속성은 레이아웃의 가장 기초
• UI 구조 잡을 때 무조건 사용됩니다
• 다음에 배울 Flex, Grid를 위한 기초도 여기서 시작돼요