실행 가능한 CSS 문서: CSS display

Q: block, inline, inline-block은 무엇이 다른가요?

block 요소는 새 줄에서 시작하고 사용 가능한 너비를 채워요. inline 요소는 텍스트 안에서 흐르고 width, height, 세로 margin을 무시해요. inline-block은 inline처럼 텍스트 안에서 흐르지만 block처럼 너비, 높이, padding, margin을 받아요.

Q: display: none과 visibility: hidden은 무엇이 다른가요?

display: none은 요소와 그 공간을 없애요. visibility: hidden은 요소를 보이지 않게 하지만 레이아웃에서 공간은 유지해서 아무것도 움직이지 않아요.

Q: div는 기본이 block인가요, inline인가요?

block이에요. div, p, 제목, ul, section, form은 기본이 block이고, span, a, strong, em, img, input, button은 inline이나 inline-block이에요.

Q: inline-block 요소 사이에 틈이 생기는 이유는 무엇인가요?

HTML의 태그 사이 공백이 단어 사이처럼 띄어쓰기로 렌더링되기 때문이에요. 대신 부모에 display: flex와 gap을 쓰거나 공백을 지우세요.

display가 하는 일

모든 요소에는 배치 방식을 정하는 display 값이 있어요. 처음 만나는 세 가지는 block, inline, inline-block이에요. 여기 width, height, padding, margin이 똑같고 display만 다른 상자 세 개가 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
새 줄에서 시작	해요	안 해요	안 해요
기본 너비	컨테이너를 채워요	콘텐츠에 맞아요	콘텐츠에 맞아요
`width`와 `height`	적용돼요	무시돼요	적용돼요
세로 margin	적용돼요	무시돼요	적용돼요
세로 padding	콘텐츠를 밀어요	그려지지만 줄 간격을 벌리지 않아요	콘텐츠를 밀어요
대표 요소	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (대체 요소가 이렇게 동작해요)

미리보기에서 block 상자는 120px 너비로 자기 줄에 놓여요. inline 상자는 너비와 높이를 무시하고 단어만 감싸며, 세로 padding과 테두리가 줄 위아래로 삐져나오지만 줄을 더 높이지는 않아요. inline-block 상자는 텍스트 줄 안에 머물면서 크기를 온전히 유지해요.

display: block

block 요소는 사용 가능한 너비 전체를 차지하고 뒤에 오는 것을 새 줄로 밀어요. 링크를 block으로 바꾸면 한 줄 전체를 클릭할 수 있게 돼요.

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

block은 너비를 정할 수 있고, 너비가 있으면 div 가운데 정렬 페이지에서 보여 주듯 margin: 0 auto로 가운데 정렬돼요.

display: inline-block

inline-block은 중간 지점이에요. 단어처럼 줄 안에서 흐르지만 크기를 정할 수 있어요. 텍스트 안의 배지, 버튼, 아이콘에 유용해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

inline-block 상자 여러 개를 한 줄에 두면 HTML의 공백 때문에 사이에 작은 틈이 생겨요. 상자를 한 줄로 늘어놓을 때는 부모에 display: flex를 쓰는 게 더 좋은 도구예요.

display: none과 visibility: hidden

둘 다 요소를 보이지 않게 해요. 차이는 공간을 유지하느냐예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
공간 차지	안 해요	해요	해요
클릭 가능	안 돼요	안 돼요	돼요
스크린 리더가 읽음	안 읽어요	안 읽어요	읽어요
부드러운 애니메이션	안 돼요	안 돼요	돼요

HTML hidden 속성은 브라우저 스타일시트를 통해 display: none과 같은 일을 해요. 그래서 요소에 display를 지정하는 CSS 규칙(예: .card { display: flex; })이 있으면 이를 덮어써서 요소가 다시 보여요. 이 문제를 겪는다면 [hidden] { display: none !important; }를 추가하세요.

화면에서는 숨기되 스크린 리더에는 남겨 두려면(아이콘 버튼의 레이블 같은 것) display: none 대신 "visually hidden" 클래스를 쓰세요.

display: flex와 display: grid

이 둘은 요소를 자식들을 위한 레이아웃 컨테이너로 만들어요.

display: flex는 자식을 한 줄이나 한 열로 배치하고 정렬과 간격을 제어해요. flexbox를 보세요.
display: grid는 자식을 행과 열에 동시에 배치해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

컨테이너 자체는 block으로 남아요. inline-flex와 inline-grid는 자식에게는 같은 일을 하지만 컨테이너를 inline-block처럼 인라인으로 흐르게 해요.

다른 값들

값	하는 일
`flow-root`	float을 품고 자식 margin이 새어 나가지 않게 하는 block. 최신판 "clearfix"예요
`contents`	요소 자신의 상자는 사라지고 자식이 부모의 자식처럼 동작해요. 버튼, 목록, 표에는 피하세요. 일부 브라우저는 스크린 리더용 요소 의미를 잃어요
`list-item`	목록 표시가 있는 block, `li`의 기본값
`table`, `table-row`, `table-cell`	표가 아닌 요소에 표 레이아웃
`inline-flex`, `inline-grid`	인라인으로 놓이는 flex나 grid 컨테이너

자주 하는 실수

span이나 a에 width나 height 지정하기. 인라인 요소는 무시해요. inline-block이나 block을 쓰세요.
인라인 요소에 세로 margin. 이것도 무시돼요. 해결 방법은 같아요.
스크린 리더용 텍스트를 display: none으로 숨기기. 스크린 리더에서도 숨겨져요.
display: none 부모 안의 자식이 보일 거라고 기대하기. 숨겨진 부모 안의 어떤 것도 렌더링되지 않아요.
display 규칙이 hidden 속성을 덮어쓰기. CSS 규칙이 이겨요.
display 애니메이션 시도하기. display: none은 페이드 없이 즉시 숨겨요. opacity를 애니메이션하고 끝에서 display(또는 visibility)를 바꾸세요.

자주 묻는 질문

block, inline, inline-block은 무엇이 다른가요?

block 요소는 새 줄에서 시작하고 사용 가능한 너비를 채워요. inline 요소는 텍스트 안에서 흐르고 width, height, 세로 margin을 무시해요. inline-block은 inline처럼 텍스트 안에서 흐르지만 block처럼 너비, 높이, padding, margin을 받아요.

display: none은 무엇을 하나요?

요소를 페이지에서 완전히 없애요. 공간을 차지하지 않고, 렌더링되지 않고, 스크린 리더에서도 숨겨져요. 자식도 함께 숨겨지고, 자식 자신의 display 값으로 보이게 할 수 없어요.

display: none과 visibility: hidden은 무엇이 다른가요?

display: none은 요소와 그 공간을 없애요. visibility: hidden은 요소를 보이지 않게 하지만 레이아웃에서 공간은 유지해서 아무것도 움직이지 않아요.

div는 기본이 block인가요, inline인가요?

block이에요. div, p, 제목, ul, section, form은 기본이 block이고, span, a, strong, em, img, input, button은 inline이나 inline-block이에요.