6.2 미디어 쿼리로 반응형 디자인

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

6.2 미디어 쿼리로 반응형 디자인

반응형 디자인은 웹 페이지가 다양한 화면 크기와 해상도에 맞춰 자동으로 조정되도록 만드는 기술입니다. 여러 기기에서 사용자의 경험을 극대화하기 위해 미디어 쿼리를 활용합니다. 미디어 쿼리는 특정 조건(예: 화면 넓이, 고해상도 디스플레이 등)에 따라 CSS 스타일을 적용하는 방법입니다.

예를 들어, 모바일 기기와 데스크탑 기기에서 보여지는 레이아웃을 다르게 설정할 수 있습니다. 이 강의에서는 미디어 쿼리를 사용하여 웹사이트의 레이아웃을 반응형으로 만드는 방법을 배워봅시다.

예제

아래는 간단한 웹 페이지의 HTML과 CSS 코드 예제입니다. 이 예제에서는 스크린 크기에 따라 배경색과 폰트 크기를 변경합니다.

HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>반응형 디자인 예제</title>
</head>
<body>
    <div class="container">
        <h1>반응형 디자인</h1>
        <p>이 웹페이지는 미디어 쿼리를 사용하여 반응형으로 구성되었습니다.</p>
    </div>
</body>
</html>

CSS 코드

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

.container {
    text-align: center;
    padding: 20px;
    background-color: lightblue; /* 기본 배경색 */
}

/* 모바일 기기 스크린 크기 설정 */
@media (max-width: 600px) {
    .container {
        background-color: lightcoral; /* 모바일 배경색 */
        font-size: 14px;  /* 모바일 폰트 크기 */
    }
}

/* 태블릿 및 큰 스크린 크기 설정 */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        background-color: lightgreen; /* 태블릿 배경색 */
        font-size: 18px; /* 태블릿 폰트 크기 */
    }
}

/* 데스크탑 기기 스크린 크기 설정 */
@media (min-width: 1025px) {
    .container {
        background-color: lightblue; /* 데스크탑 배경색 */
        font-size: 22px; /* 데스크탑 폰트 크기 */
    }
}

실습

이제 실제로 반응형 웹 페이지를 만들어 봅시다. 위의 HTML 및 CSS 코드를 복사해서 로컬에 파일을 생성하고, 브라우저에서 열어보세요. 이때, 브라우저의 창 크기를 조정해 보세요. 창 크기가 변경될 때마다 배경색과 폰트 크기가 변경되는 것을 확인할 수 있을 것입니다.

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

CSS가 적용되지 않음: CSS 파일 경로를 확인하세요. HTML 파일의 <link rel="stylesheet" href="styles.css"> 부분에서 styles.css가 올바른 경로인지 확인합니다.
배경색이 변경되지 않음: 미디어 쿼리의 조건이 제대로 설정되었는지 확인하세요. 예를 들어, 화면의 크기가 600px 이하가 되어야 모바일 스타일이 적용됩니다.

정리

이번 강의에서는 미디어 쿼리를 활용하여 반응형 디자인을 만드는 방법을 배웠습니다. 스크린 크기에 따라 서로 다른 스타일을 적용할 수 있으며, 이는 사용자 경험을 향상시키는 데 중요한 요소입니다. 앞으로 다양한 레이아웃을 시도하며 반응형 디자인의 응용력을 키워보세요!

실습 과제

자신의 아이디어로 새로운 웹 페이지를 제작해 보세요.

각기 다른 배경색과 폰트 크기를 가진 미디어 쿼리를 추가하며 실습을 진행합니다.
여러 기기에서 잘 보이도록 사용자의 요구를 고려한 디자인을 구현하려고 시도해 보세요.

6.2 미디어 쿼리로 반응형 디자인

6.2 미디어 쿼리로 반응형 디자인

예제

HTML 코드

CSS 코드

실습

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

정리

실습 과제

댓글 0