0Pricing
Frontend Academy · 강의

display: block, inline, flex, grid 기초

display 값을 전환하며 block, inline, flex, grid가 콘텐츠를 서로 다르게 배치하는 방식을 살펴봅니다.

display: block, inline, flex, grid 기초은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

display 속성

display 속성은 배치에 가장 중요한 CSS 속성입니다. 요소가 배치 흐름에 참여하는 방식과 자식 요소가 배열되는 방식을 제어합니다. 가장 많이 사용하는 값은 block, inline, inline-block, flex, grid, none입니다.

display: block

블록 요소는 컨테이너의 전체 너비를 차지하고 새 줄에서 시작합니다. 예로 <div>, <p>, <h1>이 있습니다. 블록 요소에는 너비, 높이, 마진, 패딩을 설정할 수 있습니다.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

인라인 요소는 텍스트 안에서 흐르며 새 줄에서 시작하지 않습니다. 예로 <span>, <a>, <strong>이 있습니다. 인라인 요소에서는 너비, 높이, 세로 마진이 영향을 주지 않습니다.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block은 두 방식의 특징을 결합합니다. 요소가 텍스트처럼 인라인으로 흐르면서도 블록처럼 너비, 높이, 세로 마진을 적용할 수 있습니다. 한 줄 안에 배치해야 하는 버튼과 배지에 유용합니다.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none은 요소를 배치에서 완전히 제거하므로 공간을 차지하지 않습니다. 요소를 숨기면서 차지하던 공간은 유지하려면 visibility: hidden을 사용합니다.

플렉스박스 — 1차원 배치

display: flex는 요소를 플렉스 컨테이너로 바꿉니다. 직접적인 자식 요소는 플렉스 항목이 되어 기본값인 행 또는 열을 따라 배열됩니다. 플렉스박스는 공간을 분배하고 항목을 정렬하는 데 뛰어납니다.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

플렉스박스의 주요 속성

flex-direction: row | column. justify-content: space-between | center | flex-end. align-items: center | flex-start | flex-end | stretch. gap: 마진을 사용하지 않고 항목 사이의 간격을 설정합니다.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS 그리드 — 2차원 배치

display: grid는 요소를 그리드 컨테이너로 바꿉니다. grid-template-columns와 grid-template-rows로 행과 열을 정의합니다. 그리드는 페이지 배치와 카드 격자에 적합합니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

fr 단위

fr(분할) 단위는 사용 가능한 공간을 분배합니다. grid-template-columns: 1fr 2fr 1fr은 세 개의 열을 만들며, 가운데 열이 다른 열보다 두 배 많은 공간을 차지합니다.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

플렉스와 그리드 중 선택하기

플렉스박스는 1차원 배치(버튼 행, 카드 쌓기)에 사용합니다. 그리드는 2차원 배치(페이지 뼈대, 행과 열을 명시한 사진 갤러리)에 사용합니다. 두 방식은 같은 페이지에서 함께 사용할 수 있습니다.

display: none과 visibility: hidden 비교

display: none: 배치에서 제거되며 화면 낭독기가 접근할 수 없습니다. visibility: hidden: 보이지 않지만 공간을 차지하고 접근성 트리에 남습니다. opacity: 0: 보이지 않지만 공간을 차지하며 접근할 수 있습니다.

빠른 확인

여러 행과 열로 이루어진 반응형 카드 격자를 배치하려고 합니다. 가장 적합한 시작점이 되는 display 값은 무엇입니까?

복습: display 값

block은 전체 너비를 차지합니다. inline은 텍스트와 함께 흐릅니다. inline-block은 두 방식의 특징을 모두 가집니다. flex는 자식 요소를 1차원으로 배열합니다. grid는 자식 요소를 2차원으로 배열합니다. none은 배치에서 제거합니다. 이들을 익히면 웹의 모든 배치를 제어할 수 있습니다.

자주 묻는 질문

“display: block, inline, flex, grid 기초” 강의는 무료인가요?

네 — “display: block, inline, flex, grid 기초” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“display: block, inline, flex, grid 기초”에서 뭘 배우나요?

display 값을 전환하며 block, inline, flex, grid가 콘텐츠를 서로 다르게 배치하는 방식을 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“display: block, inline, flex, grid 기초” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 선택자와 캐스케이드
  2. 색상, 타이포그래피 및 박스 모델
  3. display: block, inline, flex, grid 기초
  4. 위치 지정: relative, absolute, fixed, sticky
← Frontend Academy(으)로 돌아가기