4.3 반응형 디자인 적용하기

약 7분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

4.3 반응형 디자인 적용하기

반응형 디자인은 다양한 화면 크기에서 웹사이트를 적절하게 표시할 수 있도록 설계하는 방법입니다. 이는 사용자 경험을 개선하고, 모바일 기기에서의 사용 편의성을 높입니다. Flexbox를 활용하면 요소들의 크기와 배치를 쉽게 조정할 수 있습니다. 이 섹션에서는 Flexbox와 미디어 쿼리를 사용하여 반응형 웹 디자인을 적용하는 방법을 배우겠습니다.

예제

아래는 기본적인 반응형 레이아웃을 구성하는 HTML과 CSS 예제입니다. 이 예제에서는 Flexbox와 미디어 쿼리를 사용해 두 개의 열로 나뉘어진 레이아웃을 구현합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>반응형 디자인 예제</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>반응형 웹사이트</h1>
    </header>
    <div class="container">
        <div class="left-panel">왼쪽 패널</div>
        <div class="right-panel">오른쪽 패널</div>
    </div>
</body>
</html>

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 15px;
}

.container {
    display: flex; /* 여기서 Flexbox를 사용하여 패널을 나란히 배치 */
}

.left-panel, .right-panel {
    flex: 1; /* 두 개의 패널이 동일한 비율로 분배되도록 설정 */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.left-panel {
    background-color: #f2f2f2;
}

.right-panel {
    background-color: #e7e7e7;
}

/* 화면 크기가 600px 이하일 때 레이아웃을 세로로 변경 */
@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Flexbox의 방향을 수직으로 바꿈 */
    }
}

실습

이제 실제로 위의 HTML과 CSS 코드를 작성해 보며 반응형 웹사이트를 만들어 보겠습니다. 다음 단계를 따라 해 보세요.

HTML 파일 생성하기: 위의 HTML 코드를 복사하여 'index.html' 파일로 저장합니다.
CSS 파일 생성하기: 위의 CSS 코드를 복사하여 'styles.css' 파일로 저장합니다.
실행: 브라우저에서 'index.html' 파일을 열어 결과를 확인합니다.

실습 결과 화면

화면 크기를 변경해 보세요. 컴퓨터의 브라우저에서 창의 크기를 줄이면서 두 패널이 세로로 나열되는 것을 확인할 수 있습니다. 이는 미디어 쿼리가 작동하여 스타일을 변경했기 때문입니다.

자주 발생하는 오류 및 해결 방법

레이아웃이 세로로 변경되지 않는 경우:
미디어 쿼리의 조건이 잘못 설정됐거나 flex-direction 속성이 누락되었는지 확인하세요. 예를 들어, @media (max-width: 600px) 아래에 flex-direction: column;이 포함되어야 합니다.
패널 색상이 나타나지 않는 경우:
.left-panel 및 .right-panel의 배경색 설정이 누락되지 않았는지 확인하세요. background-color 속성이 올바르게 정의되어 있는지 검토합니다.

정리

이번 강의를 통해 Flexbox와 미디어 쿼리를 사용하여 반응형 디자인을 구현하는 방법을 배웠습니다. 다양한 화면에서 웹사이트가 어떻게 변하는지 이해하는 것은 매우 중요합니다. 이번 실습을 통해 반응형 레이아웃을 손쉽게 만들 수 있는 기초를 다졌습니다.

과제

이제 여러분이 직접 반응형 웹 페이지를 만들어 볼 차례입니다. 아래의 요구 사항에 따라 과제를 수행해 보세요.

기본 레이아웃: 세 개의 패널로 나누어진 페이지를 만드세요 (왼쪽, 중앙, 오른쪽).
반응형 요구 사항: 화면 너비가 800px 이하일 때 패널이 세로로 나열되도록 미디어 쿼리를 추가하세요.
스타일 설정: 각각의 패널에 각각 다른 배경색을 지정하고, 패널 간의 간격을 조정하세요.

제출 기한 내에 과제를 제출해 주시기 바랍니다.

4.3 반응형 디자인 적용하기

4.3 반응형 디자인 적용하기

예제

실습

실습 결과 화면

자주 발생하는 오류 및 해결 방법

정리

과제

댓글 0