7.1 복습 문제

약 5분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

7.1 복습 문제

복습 문제를 통해 반응형 웹 디자인의 핵심 개념을 다시 한 번 정리하고 이해도를 높이겠습니다. 다음 질문에 대한 답변을 작성해 보세요. 또한 각 문제에 대해 실제로 코드를 작성해보는 것도 좋습니다.

Viewport의 정의와 중요성
Viewport란 무엇이며, 반응형 웹 디자인에서 왜 중요한지 설명하세요.
Mobile First 접근법
Mobile First 접근법의 의미와 장점에 대해 설명하세요. 관련된 CSS 예제도 작성해 보세요.
Media Query 활용 예
미디어 쿼리를 사용하여 특정 해상도에서 스타일을 변경하는 코드를 작성하세요. 예를 들어, 768px 이하에서 글자 크기를 조정하는 방법을 보여주세요.
Flexbox와 Grid의 차이점
Flexbox와 CSS Grid의 주요 차이점은 무엇인지 설명하고, 각각을 활용한 기본 레이아웃 코드를 작성해보세요.
반응형 단위
em, rem, %, vw, vh 등 반응형에 적합한 CSS 단위의 특징과 사용 예를 설명하세요. 각 단위로 글자 크기를 다르게 설정한 예제를 작성해보세요.
최신 CSS 기능
Container Query, aspect-ratio, object-fit 등의 최신 CSS 기능을 소개하고, 각 기능을 사용하는 예제를 작성하세요.

복습 문제를 완료한 후, 실습으로 넘어가 실제로 작은 프로젝트를 진행해 보세요. 이 과정에서 자신이 작성한 코드를 테스트하고, Chrome DevTools를 활용하여 다양한 화면 크기에서의 반응성을 확인해보십시오.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>복습 문제 예제</title>
    <style>
        body {
            font-size: 1rem;
            line-height: 1.5;
        }
        @media (max-width: 768px) {
            body {
                font-size: 0.875rem;
            }
        }
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            padding: 10px;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <h1>복습 문제 예제</h1>
    <div class="flex-container">
        <div>Flex Item 1</div>
        <div>Flex Item 2</div>
        <div>Flex Item 3</div>
    </div>
    <div class="grid-container">
        <div>Grid Item 1</div>
        <div>Grid Item 2</div>
        <div>Grid Item 3</div>
    </div>
</body>
</html>

7.1 복습 문제

7.1 복습 문제

댓글 0