유동형 레이아웃

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 63번째.

반응형 웹 디자인에서 유동형 레이아웃(fluid layout)은 고정된 픽셀 값 대신 퍼센트와 같은 유연한 그리드와 상대 단위를 사용하여 다양한 화면 크기에 맞춰 조정됩니다. 이는 레이아웃이 어떤 화면에도 맞게 확장되거나 축소되도록 도와주며, 모든 기기에서 부드러운 사용자 경험을 보장합니다.

유동형 레이아웃의 주요 원칙은 다음과 같습니다:

상대 단위: 너비, 높이, 여백 및 패딩에 고정 픽셀(px) 대신 백분율(%), 뷰포트 단위(vw, vh) 또는 ems(em)를 사용하는 것입니다.

유연한 그리드: CSS Grid 또는 Flexbox를 사용하여 다양한 화면 크기에 적응할 수 있는 그리드 기반 레이아웃을 생성합니다.

Max-width 및 min-width: 극단적인 화면 크기에서 요소가 너무 넓어지거나 너무 좁아지는 것을 방지하기 위해 요소의 최대 및 최소 너비를 설정합니다.

다음은 퍼센트를 사용한 기본적인 유동형 레이아웃(fluid layout)의 예시입니다:

.container {
    width: 90%; /* 컨테이너는 뷰포트 너비의 90%를 차지합니다 */
    max-width: 1200px; /* 컨테이너는 1200px를 초과하지 않습니다 */
}
.sidebar {
    width: 30%; /* 사이드바는 컨테이너 너비의 30%를 차지합니다 */
    float: left;
}
.main-content {
    width: 70%; /* 메인 콘텐츠 영역은 컨테이너 너비의 70%를 차지합니다 */
    float: left;
}

이 예제에서 .container 요소는 90%의 유동적인 너비를 가지며, 이는 항상 뷰포트 너비의 90%를 차지함을 의미합니다. max-width 속성은 큰 화면에서 컨테이너가 너무 넓어지는 것을 방지하기 위해 1200px로 설정되었습니다.

.sidebar 및 .main-content 요소는 각각 30%와 70%의 유동적인 너비를 가지며, 컨테이너의 너비에 맞춰 조절될 수 있습니다.

챌린지

쉬움

부모 div(<div>)와 sidebar 및 main 클래스를 가진 두 개의 자식 div(<div>)가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 백분율을 사용하여 유동형 레이아웃(fluid layout)을 만드는 것입니다. 아래 단계를 따르세요:

container 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width 속성을 80%로, margin을 0 auto로 설정하세요. 시각화를 위해 1px solid black의 border를 추가하세요.
sidebar 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width 속성을 25%로 설정하고 왼쪽으로 float 시키세요.
main 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. width 속성을 75%로 설정하고 오른쪽으로 float 시키세요.

치트 시트

유동형 레이아웃(fluid layout)은 고정된 픽셀 값 대신 퍼센트와 같은 상대 단위와 유연한 그리드를 사용하여 다양한 화면 크기에 맞춰 조정됩니다.

유동형 레이아웃의 핵심 원칙:

상대 단위: 고정 픽셀 대신 퍼센트(%), 뷰포트 단위(vw, vh) 또는 em(em)을 사용합니다.
유연한 그리드: 적응형 레이아웃을 위해 CSS Grid 또는 Flexbox를 사용합니다.
최대 너비 및 최소 너비: 요소가 너무 넓어지거나 좁아지는 것을 방지하기 위해 제한을 설정합니다.

기본적인 유동형 레이아웃 예시:

.container {
    width: 90%; /* 뷰포트 너비의 90%를 차지함 */
    max-width: 1200px; /* 1200px을 초과하지 않음 */
}
.sidebar {
    width: 30%; /* 컨테이너 너비의 30% */
    float: left;
}
.main-content {
    width: 70%; /* 컨테이너 너비의 70% */
    float: left;
}

직접 해보기

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>