실행 가능한 CSS 문서: width와 height

Q: height: 100%가 동작하지 않는 이유는 무엇인가요?

퍼센트 높이는 부모 높이의 퍼센트이고, 그 높이가 확정되어 있을 때만 동작해요. 부모 높이가 auto(콘텐츠로 크기가 정해짐)이면 퍼센트는 auto로 취급돼요. 부모에 높이를 주거나, 퍼센트 없이 자식을 늘려 주는 flexbox나 grid를 쓰세요.

Q: width: 100%와 width: auto는 무엇이 다른가요?

블록 요소에서 auto는 padding과 border를 포함해서 컨테이너를 채워요. width: 100%는 콘텐츠 너비를 컨테이너 너비로 정하기 때문에, 기본값 box-sizing: content-box에서는 padding이나 border가 있으면 요소가 넘쳐요.

Q: CSS에서 min-height는 무엇을 하나요?

요소가 가질 수 있는 가장 작은 높이를 정하면서, 콘텐츠에 따라 커질 수 있게 해 줘요. min-height: 200px는 빈 카드에 200px을 주고, 텍스트가 더 많은 카드는 넘치지 않고 더 높아져요. 고정 height로는 그럴 수 없어요.

Q: width와 max-width는 무엇이 다른가요?

width는 정확한 크기를 정해요. max-width는 상한을 정해요. 휴대폰처럼 좁을 때는 더 좁아질 수 있지만 절대 더 넓어지지 않아요. width: 100%; max-width: 600px;는 작은 화면을 채우고 큰 화면에서는 600px에서 멈춰요.

Q: 요소를 화면 전체 높이로 만들려면 어떻게 하나요?

min-height: 100vh(모바일 브라우저 툴바까지 고려하려면 100dvh)를 쓰세요. height 대신 min-height를 쓰면 콘텐츠가 화면보다 길 때 섹션이 커질 수 있어요.

width와 height 지정하기

width와 height는 요소의 콘텐츠 상자 크기를 정해요. 기본적으로 padding과 border는 그 크기 바깥에 더해져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Width and height</title>
  <style>
    .box {
      width: 240px;
      height: 80px;
      background: #2563eb;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="box" id="box"></div>
  <script>
    const box = document.getElementById('box');
    box.textContent = 'width 240px + padding = ' + box.offsetWidth + ' x ' + box.offsetHeight + 'px';
  </script>
</body>
</html>

상자는 가로 260, 세로 100픽셀이에요. 콘텐츠 240 x 80에 사방 10px padding을 더한 값이에요. box-sizing: border-box라면 정확히 240 x 80이 돼요. 두 경우 모두 박스 모델 페이지에서 설명해요.

값

값	예시	뜻
`auto`	`width: auto`	기본값. 블록은 컨테이너 너비를 채우고, 높이는 콘텐츠에 맞아요
길이	`300px`, `20rem`	고정 크기
퍼센트	`50%`	포함 블록의 너비(`width`) 또는 높이(`height`) 기준
뷰포트 단위	`100vh`, `50vw`, `100dvh`	브라우저 창 기준
`min-content`	`width: min-content`	가능한 한 좁게, 가장 긴 단어가 결정해요
`max-content`	`width: max-content`	콘텐츠가 한 줄에 들어가는 너비
`fit-content`	`width: fit-content`	`max-content`와 같지만 컨테이너보다 넓어지지 않아요

height: 100%가 아무 일도 하지 않는 이유

퍼센트 height가 동작하려면 퍼센트를 계산할 기준, 즉 높이가 확정된 부모가 있어야 해요. 부모 높이가 auto이면(보통 그래요) 자식의 height: 100%도 auto처럼 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height 100%</title>
  <style>
    .parent { background: #e5e7eb; padding: 6px; margin-bottom: 12px; display: flow-root; }
    .fixed { height: 120px; }
    .child { height: 100%; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Parent height auto: 100% is ignored</div>
  </div>
  <div class="parent fixed">
    <div class="child">Parent height 120px: 100% works</div>
  </div>
</body>
</html>

첫 번째 자식은 텍스트 높이만큼만 돼요. 두 번째는 부모에 높이가 있어서 부모를 채워요. 페이지 전체를 퍼센트로 연결하려면 html과 body까지 모든 조상에 높이가 필요해요. 그래서 대부분의 레이아웃은 대신 flexbox나 grid를 써요. 그 자식들은 퍼센트 없이도 늘어나서 채워요.

min-height와 max-width: 유연한 크기

고정 크기는 쉽게 깨져요. 고정 높이는 텍스트가 예상보다 길면 넘치고, 고정 너비는 휴대폰에서 너무 넓어요. min-과 max- 속성은 정확한 크기 대신 한계를 정해요.

속성	뜻
`min-width`	이보다 좁아지지 않아요
`max-width`	이보다 넓어지지 않아요
`min-height`	이보다 낮아지지 않지만 커질 수 있어요
`max-height`	이보다 높아지지 않아요(넘치는 콘텐츠는 overflow)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>min and max</title>
  <style>
    .card {
      max-width: 360px;   /* narrower on small screens, never wider */
      min-height: 50px;   /* at least 50px, grows with content */
      border: 2px solid #2563eb;
      padding: 10px;
      margin-bottom: 12px;
    }
    .fixed {
      max-width: 360px;
      height: 50px;       /* fixed: long text spills out */
      border: 2px solid #f59e0b;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="card">Short card: the 50px minimum.</div>
  <div class="card">A card with much more text. It keeps its 360px limit but grows taller, because min-height sets a floor, not a fixed size. The border stays around all of the text, however many lines there are. Add another sentence here and the card simply gets taller again.</div>
  <div class="fixed">A fixed height of 50px with long text. The text no longer fits, so it spills past the amber border and over whatever comes next on the page. A fixed height cannot know how long the text will be, or how large the reader has set the font.</div>
</body>
</html>

휴대폰처럼 360px보다 좁은 화면에서는 카드가 함께 줄어들어요. max-width는 상한일 뿐이기 때문이에요.

크기와 한계가 함께 적용되면 한계가 이겨요. max-width는 width를 이기고, min-width는 max-width를 이겨요.

width: auto와 width: 100%

블록 요소라면 width를 auto로 두는 게 거의 항상 원하는 결과예요. auto는 padding과 border를 포함한 상자 전체를 컨테이너에 맞춰요. 100%는 콘텐츠를 컨테이너만큼 넓게 만든 다음 padding과 border를 위에 더해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto vs 100%</title>
  <style>
    .container { width: 300px; background: #e5e7eb; padding: 8px 0; }
    .item { padding: 10px; border: 3px solid #2563eb; margin: 6px 0; }
    .auto { width: auto; }
    .full { width: 100%; }
  </style>
</head>
<body>
  <div class="container">
    <div class="item auto">width: auto, fits</div>
    <div class="item full">width: 100%, overflows</div>
  </div>
  <p id="out"></p>
  <script>
    const w = (s) => document.querySelector(s).offsetWidth;
    document.getElementById('out').textContent =
      'container 300px, auto ' + w('.auto') + 'px, 100% ' + w('.full') + 'px';
  </script>
</body>
</html>

width: 100%는 기본이 블록이 아닌 요소(<input>, <img>, inline-block)에는 여전히 유용하고, box-sizing: border-box와 함께 쓰는 게 좋아요.

콘텐츠에 맞추기: fit-content

블록을 inline-block으로 바꾸지 않고 텍스트 너비만큼만 넓게 하려면 fit-content를 쓰세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fit-content</title>
  <style>
    div { background: #16a34a; color: white; padding: 6px 10px; margin-bottom: 8px; }
    .fit { width: fit-content; }
    .min { width: min-content; }
  </style>
</head>
<body>
  <div>auto: full width</div>
  <div class="fit">fit-content: as wide as the text</div>
  <div class="min">min-content: one word per line</div>
</body>
</html>

fit-content와 margin-inline: auto를 함께 쓰면, 텍스트 너비를 정확히 유지하는 레이블이나 버튼 같은 블록을 가운데 정렬할 수 있어요.

전체 높이 섹션과 뷰포트 단위

vh는 뷰포트 높이의 1%, vw는 너비의 1%예요. 휴대폰에서는 스크롤할 때 브라우저 주소창이 커졌다 작아져서 100vh가 보이는 영역보다 클 수 있어요. 동적 단위 dvh는 보이는 영역을 따라가고, svh는 가장 작은 보이는 높이를 써요.

.hero {
  min-height: 100vh;  /* fallback */
  min-height: 100dvh; /* follows mobile toolbars */
}

전체 화면 섹션에는 height가 아니라 min-height를 쓰세요. 그래야 텍스트가 많은 작은 화면에서도 섹션이 커져요. 콘텐츠가 들어가지 않는 고정 높이는 콘텐츠가 넘쳐 나오고, 이는 CSS overflow 페이지에서 다뤄요.

자주 하는 실수

높이 없는 부모 안의 height: 100%. auto처럼 동작해요. 부모에 높이를 주거나 flex나 grid를 쓰세요.
width: 100%에 padding 더하기. 요소가 컨테이너를 넘쳐요. 블록 너비는 auto로 두거나 box-sizing: border-box를 쓰세요.
텍스트 컨테이너에 고정 높이. min-height를 써서 긴 텍스트나 큰 글꼴이 넘치지 않게 하세요.
인라인 요소에 width. <span>과 <a>는 width와 height를 무시해요. inline-block이나 block으로 만드세요.
페이지 래퍼에 width: 1200px. 모든 휴대폰에서 옆으로 스크롤돼요. 대신 max-width: 1200px를 쓰세요.

자주 묻는 질문

height: 100%가 동작하지 않는 이유는 무엇인가요?

퍼센트 높이는 부모 높이의 퍼센트이고, 그 높이가 확정되어 있을 때만 동작해요. 부모 높이가 auto(콘텐츠로 크기가 정해짐)이면 퍼센트는 auto로 취급돼요. 부모에 높이를 주거나, 퍼센트 없이 자식을 늘려 주는 flexbox나 grid를 쓰세요.

width: 100%와 width: auto는 무엇이 다른가요?

블록 요소에서 auto는 padding과 border를 포함해서 컨테이너를 채워요. width: 100%는 콘텐츠 너비를 컨테이너 너비로 정하기 때문에, 기본값 box-sizing: content-box에서는 padding이나 border가 있으면 요소가 넘쳐요.

CSS에서 min-height는 무엇을 하나요?

요소가 가질 수 있는 가장 작은 높이를 정하면서, 콘텐츠에 따라 커질 수 있게 해 줘요. min-height: 200px는 빈 카드에 200px을 주고, 텍스트가 더 많은 카드는 넘치지 않고 더 높아져요. 고정 height로는 그럴 수 없어요.

width와 max-width는 무엇이 다른가요?

width는 정확한 크기를 정해요. max-width는 상한을 정해요. 휴대폰처럼 좁을 때는 더 좁아질 수 있지만 절대 더 넓어지지 않아요. width: 100%; max-width: 600px;는 작은 화면을 채우고 큰 화면에서는 600px에서 멈춰요.

요소를 화면 전체 높이로 만들려면 어떻게 하나요?

min-height: 100vh(모바일 브라우저 툴바까지 고려하려면 100dvh)를 쓰세요. height 대신 min-height를 쓰면 콘텐츠가 화면보다 길 때 섹션이 커질 수 있어요.