1.2.3 Breakpoint

약 6분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.2.3 Breakpoint

반응형 웹 디자인에서 Breakpoint는 웹 페이지의 레이아웃이 변경되는 지점을 의미합니다. 이 지점은 화면의 크기나 장치의 종류에 따라 다릅니다. Breakpoint를 활용하면 다양한 디바이스에서 최적화된 사용자 경험을 제공할 수 있습니다. 이를 위해 CSS에서 Media Query를 사용하여 특정 조건이 충족될 때 적용할 스타일을 정의합니다.

예를 들어, 모바일과 데스크톱에서 다른 스타일을 적용하려면 다음과 같은 코드를 사용할 수 있습니다.

기본적으로 모바일 우선 전략을 사용하여 스타일을 정의합니다.
데스크톱에 최적화된 추가 스타일은 해당 Breakpoint에서 정의합니다.

예제

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>Responsive Design Example</title>
</head>
<body>
    <header>
        <h1>반응형 웹 디자인 예제</h1>
    </header>
    <main>
        <section>
            <h2>소개</h2>
            <p>이곳은 반응형 웹 디자인 예제입니다.</p>
        </section>
    </main>
</body>
</html>

CSS 스타일은 다음과 같습니다:

body {
    font-size: 1rem;
    margin: 0;
}

header {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

main {
    padding: 20px;
}

/* Breakpoint: 768px 이상 */
@media (min-width: 768px) {
    header {
        background-color: lightcoral;
        padding: 40px;
    }
    main {
        max-width: 800px;
        margin: 0 auto;
    }
}

위 코드는 화면의 크기에 따라 헤더의 배경색과 패딩이 변화하며, 메인 콘텐츠가 가운데 정렬됩니다. 이러한 방식으로 Breakpoint를 설정함으로써 화면 크기에 따라 다른 스타일을 쉽게 적용할 수 있습니다.

실습

위 예제를 바탕으로 다양한 Breakpoint를 추가하여 다른 스타일을 적용해보세요.
스마트폰, 태블릿, 데스크톱에서 어떻게 변화하는지 확인합니다.
Chrome DevTools를 활용하여 화면을 조정하며 Breakpoint가 잘 적용되는지 확인합니다.

정리

Breakpoints는 반응형 웹 디자인의 핵심 요소입니다. 다양한 디바이스에서 균일한 사용자 경험을 제공하기 위해서는 적절하게 설정하고 활용하는 것이 중요합니다. 반응형 웹 디자인 특징을 이해하고 Media Query와 Breakpoint를 활용하여 최적의 웹 페이지를 만들어보세요.

코드 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>Responsive Design Example</title>
</head>
<body>
    <header>
        <h1>반응형 웹 디자인 예제</h1>
    </header>
    <main>
        <section>
            <h2>소개</h2>
            <p>이곳은 반응형 웹 디자인 예제입니다.</p>
        </section>
    </main>
</body>
</html>

1.2.3 Breakpoint

1.2.3 Breakpoint

예제

실습

정리

댓글 0