2.2 태블릿

약 4분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

2.2 태블릿

이 섹션에서는 태블릿 장치에서의 반응형 웹 디자인을 이해하고 구현해 보겠습니다. 태블릿은 스마트폰보다 큰 화면을 가지며, 데스크톱보다 작은 화면을 갖는 중간 크기의 장치로, 다양한 해상도와 화면 비율을 제공합니다. 태블릿을 고려한 반응형 디자인은 사용자 경험을 향상시키는 데 매우 중요합니다.

태블릿 화면의 특징

태블릿의 해상도는 보통 768px에서 1024px 사이이며,세로 및 가로로 사용될 수 있습니다. 태블릿에 적합한 레이아웃을 디자인할 때는 Flexbox 또는 Grid를 활용해 보다 유동적인 레이아웃을 적용해야 합니다.

미디어 쿼리 및 브레이크포인트 설정

반응형 디자인을 위해, 태블릿 해상도에 맞는 미디어 쿼리를 설정합니다. 기본적으로 다음과 같은 방식으로 설정할 수 있습니다:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* 태블릿 전용 스타일 */
}

위 코드를 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>
    <header>
        <h1>태블릿에 최적화된 홈페이지</h1>
    </header>
    <main>
        <section class="hero">
            <h2>환영합니다!</h2>
            <p>반응형 디자인을 배우고 있습니다.</p>
        </section>
    </main>
    <footer>
        <p>© 2023 나의 웹사이트</p>
    </footer>
</body>
</html>

실습 과제

위의 HTML 및 CSS 코드를 기반으로 태블릿에 최적화된 디자인을 구현해 보세요.
각 스크린 사이즈(스마트폰, 태블릿, 데스크톱)에서의 레이아웃 변화를 확인하기 위해 Chrome DevTools Device Toolbar를 활용해 보세요.

정리

이번 섹션에서는 태블릿에 적합한 반응형 웹 디자인에 대해 알아보았습니다. 미디어 쿼리를 활용하여 화면 크기에 따라 다른 스타일을 적용하는 방법을 배웠으며, 실습을 통해 이를 실제로 구현해 보았습니다. 다음 세션에서는 더 복잡한 레이아웃을 다룰 준비를 하겠습니다.

코드 css

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* 태블릿 전용 스타일 */
}

2.2 태블릿

2.2 태블릿

태블릿 화면의 특징

미디어 쿼리 및 브레이크포인트 설정

실습 과제

정리

댓글 0