CSS Academy · 강의

백분율을 사용한 유동적 너비

백분율 기반 너비를 사용해 컨테이너에 맞춰 크기가 조정되는 레이아웃을 만듭니다.

백분율을 사용한 유동적 너비은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

유동적인 너비를 사용하는 이유

고정 너비 레이아웃은 픽셀 단위의 고정 크기보다 좁은 화면에서 깨집니다. 백분율을 사용하는 유동적인 너비는 모든 컨테이너나 뷰포트 크기에 비례하여 레이아웃을 조정합니다.

백분율 너비의 기본

백분율 너비는 부모 컨테이너의 너비를 기준으로 합니다. width: 50%인 자식 요소는 항상 부모 너비의 절반이 됩니다.

<div style="width:300px;border:1px dashed #999;padding:4px;">
  <div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
  <div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>

백분율과 상자 크기 지정

box-sizing: border-box를 사용하면 백분율 너비에 패딩과 테두리가 포함됩니다. 따라서 패딩과 관계없이 50%가 실제로 절반이 되어 백분율 열을 쉽게 만들 수 있습니다.

<div style="width:300px;border:1px dashed #999;">
  <div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>

유동적인 2열 레이아웃

float를 기반으로 한 간단한 레거시 유동 레이아웃입니다:

<div style="width:100%;overflow:auto;">
  <div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
  <div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>

유동적인 Flexbox 열

유동적인 열 레이아웃에 Flexbox를 사용하면 더 깔끔합니다:

<div class="flex-row">
  <div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
  <div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>

백분율 패딩

백분율 패딩은 위쪽과 아래쪽 패딩에서도 높이가 아니라 항상 부모의 너비를 기준으로 합니다. 이를 통해 종횡비 트릭을 사용할 수 있습니다:

<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

유동 레이아웃에서의 max-width

백분율 너비를 max-width와 결합하면 큰 화면에서 줄이 지나치게 넓어지는 것을 방지할 수 있습니다:

<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>

백분율 높이의 함정

백분율 높이를 사용하려면 부모 요소에 정의된 높이가 있어야 합니다. 부모 요소의 height: auto인 경우 자식 요소의 백분율 높이도 auto로 계산됩니다.

고유 크기 조정 키워드

최신 CSS에는 더욱 유연한 크기 지정 옵션이 추가되었습니다.

min-content: 콘텐츠가 들어갈 수 있는 가장 작은 크기
max-content: 모든 콘텐츠가 한 줄에 들어가는 크기
fit-content: min-content와 max-content 사이의 크기

<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>

유동적 격자 패턴

inline-block(기존 방식) 또는 최신 CSS를 사용하는 일반적인 유동적 격자입니다.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
  <div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>

빠른 확인

부모 요소의 너비가 600픽셀입니다. 자식 요소에는 width: 60%와 padding: 20px가 설정되어 있고(box-sizing: border-box), 자식 요소의 콘텐츠 너비는 얼마입니까?

복습

백분율 너비를 사용하면 부모 컨테이너의 크기에 따라 조정되는 유동적인 레이아웃을 만들 수 있습니다. 콘텐츠가 지나치게 넓어지지 않도록 max-width와 함께 사용하십시오. 반응형 미디어에는 aspect-ratio를 사용하십시오. Flexbox와 Grid를 사용하면 백분율 플로트보다 유동적인 열을 더 세련되게 처리할 수 있습니다.

자주 묻는 질문