CSS display 속성 정리

웹 페이지에서 요소가 화면에 어떻게 배치되고 보이는지를 결정하는 핵심 속성이 바로 display 입니다. 레이아웃을 다룰 때 반드시 이해해야 하는 부분으로, 기본적인 흐름부터 최신 레이아웃 방식까지 폭넓게 사용됩니다.

아래에서 자주 쓰이는 display 속성과 특징들을 정리해 보겠습니다.

1. 기본 값들

block

• 요소가 블록 레벨 요소로 동작
• 항상 새로운 줄에서 시작
• 전체 가로 너비 차지 가능
• div, p, h1~h6 태그 등이 기본적으로 block

div {
  display: block;
}

inline

• 요소가 인라인 요소로 동작
• 줄 바꿈 없이 옆으로 나란히 배치
• 너비/높이 직접 지정 불가 (내용 크기만큼 차지)
• span, a, strong 태그 등이 기본적으로 inline

span {
  display: inline;
}

inline-block

• inline처럼 옆으로 배치되지만, block처럼 너비/높이 지정 가능
• 메뉴 버튼, 레이아웃 요소에 자주 활용

button {
  display: inline-block;
  width: 100px;
  height: 40px;
}

none

• 요소를 화면에서 완전히 숨김 (자리도 차지하지 않음)
• 자주 쓰이는 예: 탭 메뉴, 토글 버튼 등

.hidden {
  display: none;
}

2. 레이아웃 관련 값

flex

• 플렉스박스 레이아웃 활성화
• 가로/세로 정렬, 간격 조절에 탁월
• 부모 요소에 display: flex; 지정 → 자식 요소 배치 관리

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

grid

• 그리드 레이아웃 활성화
• 행과 열을 동시에 관리할 수 있는 강력한 레이아웃 방식
• 부모 요소에 display: grid; 지정 → 자식 요소를 셀에 배치

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

3. 잘 쓰이진 않지만 알아두면 좋은 값들

• inline-flex: flex이면서 inline처럼 옆으로 배치
• inline-grid: grid이면서 inline처럼 옆으로 배치
• table: 요소를 테이블처럼 배치
• list-item: 목록 항목처럼 표시 (<li> 기본값)

4. visibility vs display

• display: none; → 화면에서 제거, 공간도 차지하지 않음
• visibility: hidden; → 화면에 보이지 않지만 공간은 그대로 유지

마무리

display 속성은 CSS 레이아웃의 출발점이자 핵심입니다. 기본적인 block/inline 개념을 이해한 뒤, flex와 grid를 익히면 현대적인 웹 디자인 대부분을 구현할 수 있습니다.