AAtomic CSS

display

요소의 렌더링 방식을 결정하는 가장 기본적인 속성입니다. 레이아웃의 시작점이며, flex와 grid를 활성화하는 역할도 합니다.

클래스 목록

클래스CSS설명
dfdisplay: flex플렉스 컨테이너. 자식을 가로 방향으로 배치
difdisplay: inline-flex인라인 플렉스. 텍스트 흐름에 참여하면서 flex 동작
dgdisplay: grid그리드 컨테이너. 2차원 레이아웃
dbdisplay: block블록 요소. 한 줄 전체를 차지
dibdisplay: inline-block인라인 블록. 텍스트처럼 흐르면서 width/height 적용 가능
didisplay: inline인라인 요소. 텍스트처럼 흐름, width/height 무시
dndisplay: none완전히 숨김. DOM에 존재하지만 공간을 차지하지 않음
dtdisplay: table테이블처럼 동작. 비-테이블 요소에 테이블 레이아웃 부여
dtcdisplay: table-cell테이블 셀처럼 동작. 동일 높이 컬럼에 활용

시각적 비교

각 display 값이 요소에 어떤 영향을 주는지 비교합니다.

Block — db

Item 1Item 2Item 3

각 요소가 한 줄 전체를 차지합니다

Flex — df

Item 1Item 2Item 3

자식 요소가 가로로 나란히 배치됩니다

Inline Block — dib

Item 1Item 2Item 3

텍스트처럼 흐르면서 크기 제어 가능

Inline — di

Item 1Item 2Item 3

width/height가 무시됩니다 (padding만 적용)

Grid (3열) — dg gtcr3-1fr

Item 1Item 2Item 3

2차원 그리드로 배치됩니다

None (Item 2 숨김) — dn

Item 1Item 2Item 3

Item 2가 숨겨지고 공간도 사라짐

dn vs vh — 숨김 방식 비교

dn(display: none)과 vh(visibility: hidden)은 모두 요소를 숨기지만, 공간 차지 여부가 다릅니다.

display: none — dn

Item 1Item 2Item 3

공간 자체가 사라짐. Item 1과 3이 붙음

visibility: hidden — vh

Item 1Item 2Item 3

공간은 유지됨. Item 2 자리가 비어 있음

dn (display: none)vh (visibility: hidden)
공간 차지차지하지 않음 (완전히 제거)차지함 (빈 공간 유지)
스크린리더읽지 않음읽지 않음
이벤트 수신불가불가
트랜지션불가 (on/off 전환)가능 (opacity와 조합)
자식 요소모두 숨김자식에 vv 부여 시 개별 표시 가능
주요 용도반응형 숨김, 조건부 렌더링레이아웃 유지하며 숨김

언제 뭘 쓸까?

상황추천이유
1차원 가로/세로 배치dfflex는 한 방향 정렬에 최적화
2차원 행/열 레이아웃dggrid는 행과 열을 동시에 제어
태그, 뱃지 나열dib텍스트 흐름 + 크기 제어
전체 너비 섹션db기본 블록 흐름
반응형 숨김/표시dn / dbsm-dn, md-db 등 미디어 조합
동일 높이 컬럼dt + dtc테이블 셀의 자동 높이 맞춤
아이콘 + 텍스트 정렬difinline-flex로 텍스트 흐름 유지

클래스별 상세

dfdisplay: flex

자식 요소를 가로 방향으로 나란히 배치합니다. Atomic CSS에서 가장 많이 사용하는 레이아웃 클래스이며, jcc, aic, gap 등과 조합하여 사용합니다.

<!-- 가로 정렬 + 가운데 -->
<div class="df jcc aic gap16px">
  <span>Logo</span>
  <nav>Menu</nav>
  <button>CTA</button>
</div>

<!-- 세로 정렬 (폼) -->
<div class="df fdc gap8px">
  <input type="text" placeholder="이름" />
  <input type="email" placeholder="이메일" />
  <button>가입</button>
</div>

<!-- 양쪽 정렬 (헤더) -->
<header class="df jcsb aic px2rem py16px">
  <div>Logo</div>
  <nav class="df gap2rem">
    <a href="#">Home</a>
    <a href="#">About</a>
  </nav>
</header>

자주 쓰는 조합

df jcc aic가로 세로 모두 가운데 정렬
df jcsb aic양쪽 끝 정렬 (헤더, 네비게이션)
df fdc gap8px세로 방향 + 간격 (폼, 목록)
df fww gap16px줄바꿈 허용 (태그, 카드 목록)
df aic gap8px세로 가운데 + 간격 (아이콘+텍스트)

difdisplay: inline-flex

외부에서는 인라인 요소처럼 텍스트 흐름에 참여하면서, 내부 자식은 flex 규칙을 따릅니다. 아이콘 + 텍스트, 뱃지 등 인라인 요소 안에서 정렬이 필요할 때 사용합니다.

<!-- 아이콘 + 텍스트 뱃지 -->
<p>
  상태:
  <span class="dif aic gap4px bg34D399 c000000 py2px px8px br4px fs13px">
    <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
    </svg>
    활성
  </span>
  입니다.
</p>

df vs dif 차이

텍스트 df: 줄 전체 차지 텍스트
텍스트 dif: 인라인 흐름 텍스트

dgdisplay: grid

2차원 그리드 레이아웃을 활성화합니다. 반드시 gtc(grid-template-columns)와 함께 사용합니다. 카드 목록, 대시보드, 갤러리 등에 적합합니다.

<!-- 3열 균등 카드 -->
<div class="dg gtcr3-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
</div>

<!-- 반응형 auto-fit (화면에 맞게 자동 조절) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">자동 열 수</div>
  <div class="bg18181B p2rem br8px">화면 크기에 반응</div>
  <div class="bg18181B p2rem br8px">최소 28rem 보장</div>
</div>

<!-- 사이드바 + 메인 -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside class="bg18181B p2rem br8px">사이드바</aside>
  <main class="bg27272A p2rem br8px">메인 콘텐츠</main>
</div>

자주 쓰는 조합

dg gtcr3-1fr gap2rem3열 균등 그리드
dg gtcrfit-minmax28rem-1fr gap2rem반응형 auto-fit (자동 열 조절)
dg gtc25rem-1fr gap2rem사이드바 + 메인 레이아웃
dg gtrauto-1fr-auto h100vh헤더-메인-푸터 전체 높이
dg pic가운데 정렬 (place-items: center)

dbdisplay: block

한 줄 전체를 차지하는 블록 요소로 만듭니다. div, p 등은 기본값이 block이므로, 주로 인라인 요소를 블록으로 변환하거나 반응형에서 dn과 쌍으로 사용합니다.

<!-- 인라인 요소를 블록으로 -->
<span class="db w100p py12px bg18181B tac">전체 너비 배너</span>

<!-- 반응형 표시 전환 -->
<div class="db sm-dn">데스크탑에서만 표시</div>
<div class="dn sm-db">모바일에서만 표시</div>

dibdisplay: inline-block

텍스트처럼 가로로 흐르면서 width, height, 상하 margin을 적용할 수 있습니다. 태그, 뱃지, 버튼 그룹 등에 활용합니다.

<!-- 태그 목록 -->
<div>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">HTML</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">CSS</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">JavaScript</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">TypeScript</span>
  <span class="dib py4px px12px bg27272A cFAFAFA br4px mr8px mb8px fs14px">Vue</span>
</div>

<!-- 크기가 있는 인라인 요소 -->
<span class="dib w10rem h10rem bg6366F1 br8px"></span>
<span class="dib w8rem h8rem bg34D399 br8px ml8px"></span>

didisplay: inline

텍스트 흐름에 완전히 참여합니다. width, height, 상하 margin이 무시됩니다. 블록 요소를 강제로 인라인으로 전환할 때 사용합니다.

<!-- 블록 요소를 인라인으로 -->
<div class="di">이 div는</div>
<div class="di">인라인으로</div>
<div class="di">흐릅니다</div>

주의

di는 width, height, 상하 margin이 무시됩니다. 크기를 제어하려면 dib를 사용하세요.

dndisplay: none

요소를 완전히 숨깁니다. 공간을 차지하지 않으며 스크린리더에서도 읽히지 않습니다. 반응형 표시/숨김에 가장 많이 사용됩니다.

<!-- 반응형 숨김 -->
<div class="db sm-dn">768px 이하에서 숨김</div>
<div class="dn sm-db">768px 이하에서만 표시</div>

<!-- 조건부 표시 (JS와 조합) -->
<div :class="isOpen ? 'db' : 'dn'">
  토글 콘텐츠
</div>

접근성 주의

dn은 스크린리더에서도 완전히 숨겨집니다. 시각적으로만 숨기고 스크린리더에는 노출하려면 별도의 sr-only 패턴을 사용하세요.

dtdtcdisplay: table / table-cell

테이블이 아닌 요소에 테이블 동작을 부여합니다. 자식을 dtc로 지정하면 동일한 높이의 컬럼이 자동으로 만들어집니다.

<!-- 동일 높이 2컬럼 -->
<div class="dt w100p">
  <div class="dtc p2rem bg18181B vat w50p">
    짧은 내용
  </div>
  <div class="dtc p2rem bg27272A vat w50p">
    긴 내용이 들어가도 양쪽 셀의 높이가
    동일하게 유지됩니다.
    테이블 셀의 자동 높이 맞춤 특성 덕분입니다.
  </div>
</div>

반응형 표시/숨김

미디어 쿼리 프리픽스와 조합하면 특정 화면에서만 요소를 표시하거나 숨길 수 있습니다.

<!-- 데스크탑에서만 표시 -->
<div class="db sm-dn">데스크탑 전용 콘텐츠</div>

<!-- 모바일에서만 표시 -->
<div class="dn sm-db">모바일 전용 콘텐츠</div>

<!-- 태블릿 이하에서 세로 전환 -->
<div class="df md-fdc gap16px">
  <div>좌측</div>
  <div>우측 → 태블릿 이하에서 아래로</div>
</div>
클래스 조합동작
db sm-dn기본 표시 → 768px 이하에서 숨김
dn sm-db기본 숨김 → 768px 이하에서만 표시
df md-dn기본 flex → 1024px 이하에서 숨김
dn md-df기본 숨김 → 1024px 이하에서만 flex 표시
dg lg-dn기본 grid → 1280px 이하에서 숨김
db es-dn기본 표시 → 640px 이하에서 숨김

의사 클래스 조합

hover, focus 등의 상태에서 display를 변경할 수 있습니다.

<!-- 호버 시 드롭다운 표시 -->
<div class="pr">
  <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">메뉴 열기</button>
  <ul class="pa t100p l0 dn hover-db bg18181B b1pxsolid27272A br8px p16px mt4px lsn">
    <li class="py4px">항목 1</li>
    <li class="py4px">항목 2</li>
    <li class="py4px">항목 3</li>
  </ul>
</div>

팁 & 주의사항

df vs dg 선택 기준

한 방향(가로 또는 세로)만 제어하면 df, 행과 열을 동시에 제어해야 하면 dg를 사용하세요.

inline-flex와 inline-block의 차이

dif는 외부에서는 인라인이지만 내부 자식은 flex 규칙을 따릅니다. dib는 단순히 인라인 흐름에 크기 제어만 추가합니다.

반응형 숨김 패턴

기본값을 설정하고 미디어 쿼리로 전환하세요. 예: db sm-dn은 "기본 표시, 768px 이하 숨김"입니다. 반대는 dn sm-db.

visibilityflex-directiongrid-template-columnsoverflow반응형 디자인