HTML과 CSS 기초 : 레이아웃의 기본 원리 display 속성

HTML과 CSS에서 웹 페이지의 요소를 배치하고 시각적으로 표현하는 데 중요한 속성 중 하나는 display입니다.

이 속성은 HTML 요소의 기본적인 레이아웃 방식을 정의하며, 다른 요소와의 관계에서 어떻게 배치될지를 결정합니다.

 

1. display 속성이란?

display 속성은 HTML 요소가 화면에 어떻게 나타날지를 정의하는 CSS 속성입니다. 요소를 블록, 인라인, 플렉스, 그리드 등으로 표현할 수 있습니다. 이 속성을 잘 이해하면 요소 배치를 효과적으로 관리하고, 다양한 레이아웃을 쉽게 구현할 수 있습니다.

2. display의 주요 값

1) block (블록 요소)

- 요소가 새로운 줄에서 시작하며, 기본적으로 너비는 부모 요소의 100%를 차지합니다.
- 다른 요소들은 그 아래에 배치됩니다.

div {
  display: block;
}

 

예시

<div>첫 번째 블록</div>
<div>두 번째 블록</div>

 

특징

블록 요소는 높이와 너비, 마진, 패딩을 자유롭게 설정할 수 있습니다.
대표적인 블록 요소: <div>, <p>, <h1>~<h6>.

 

 

2) inline (인라인 요소)

- 요소가 같은 줄에 연속해서 배치됩니다.
- 내용에 맞는 크기를 가지며, width와 height를 지정할 수 없습니다.

span {
  display: inline;
}

 

예시

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

 

특징
- 주로 텍스트와 함께 사용됩니다.
- 대표적인 인라인 요소: <span>, <a>, <strong>.

 

 

 

3) inline-block

- 인라인 요소처럼 한 줄에 배치되지만, 블록 요소처럼 크기를 설정할 수 있습니다.

div {
  display: inline-block;
}

 

예시

<div style="display: inline-block; width: 100px; height: 50px; background: lightblue;">첫 번째</div>
<div style="display: inline-block; width: 100px; height: 50px; background: coral;">두 번째</div>

 

특징
- 인라인의 연속 배치와 블록 요소의 크기 조정 가능.
- 버튼, 카드형 레이아웃 등에 유용.

 

 

4) none

- 요소를 화면에서 숨깁니다. 해당 요소는 DOM에는 존재하지만, 화면 상에서 보이지 않습니다.

div {
  display: none;
}

 

예시

<div style="display: none;">보이지 않는 요소</div>

 

특징
- 요소를 완전히 숨기고, 레이아웃 공간도 차지하지 않음.
- 팝업, 토글 UI에서 자주 사용.

 

5) flex (플렉스 컨테이너)

- 유연한 박스 모델을 사용하여 자식 요소를 배치하는 데 적합합니다.
- display: flex;는 자식 요소들을 정렬하고 배치하는 강력한 도구입니다.

.container {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center; /* 세로 가운데 정렬 */
}

 

예시

<div class="container">
  <div>첫 번째</div>
  <div>두 번째</div>
  <div>세 번째</div>
</div>

 

특징
- 주로 정렬과 배치를 간단하게 해결할 때 사용.
- 부모 요소에 설정하며, 자식 요소들은 유연하게 배치됨.

 

6) grid (그리드 컨테이너)

- 2차원 레이아웃을 다룰 수 있는 강력한 속성.
- 행(row)과 열(column)을 사용해 복잡한 레이아웃을 쉽게 구현 가능.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3열 레이아웃 */
  grid-gap: 10px; /* 요소 간 간격 */
}

<div class="container">
  <div>첫 번째</div>
  <div>두 번째</div>
  <div>세 번째</div>
</div>

 

특징
- 복잡한 웹 페이지 레이아웃에서 강력한 도구.
- 자식 요소의 위치를 지정하거나 간격을 제어하기 용이.

 

 

3. display 속성 선택 가이드

값특징사용 예시

값	특징	사용 예시
block	새 줄에서 시작, 100% 너비 차지	<div>, <p>
inline	한 줄에 연속 배치, 크기 설정 불가	<span>, <a>
inline-block	한 줄에 배치 + 크기 설정 가능	버튼, 아이콘
none	화면에서 숨김, 레이아웃 영향 없음	팝업, 숨김 UI
flex	유연한 정렬, 부모와 자식 관계 중심	네비게이션 바, 갤러리
grid	2차원 레이아웃, 행과 열 기반 정렬	복잡한 레이아웃, 카드 배치

 

 

display 속성은 웹 페이지 레이아웃을 구성하는 가장 기본적이고 강력한 도구입니다. block과 inline처럼 단순한 값부터, flex와 grid처럼 복잡한 레이아웃까지 다양한 값을 제공합니다. 각 값의 특성과 활용법을 잘 이해하면, 효율적이고 직관적인 디자인을 구현할 수 있습니다.