Language/HTML, CSS

[반응형 웹]

깨구르르 2024. 3. 5. 18:11
728x90

1. 반응형 웹이란?

1-1. 정의

: 웹 페이지 하나로도 데스트톱, 태플릿PC, 스마트폰에 맞게 디자인이 자동으로 반응해서 변경되는 웹 페이지

1-2. 장점

- 효율적인 개발 가능

- 유지 보수가 용이함

1-3. 방법

- 미디어 쿼리 사용 👉 스마트폰의 방향 파악뿐만 아니라 시각 장애인 전용 웹 페이지 개발 등에 활용할 수 있음

1-4. 미디어쿼리란?

- 미디어 타입에 따라 CSS를 적용할 수 있는 기능

- 활용법

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 너비가 1024보다 넓은 경우 */
        body {
            background: url('../images/bg0.jpg') no-repeat fixed;
            background-size: cover;
        }

        /* 768 < screen <= 1024 */
        @media screen and (max-width:1024px) {
            body {
                background: url('../images/bg1.jpg') no-repeat fixed;
                background-size: cover;
            }
        }

        /* 320 < screen <= 768 */
        @media screen and (max-width:768px) {
            body {
                background: url('../images/bg2.jpg') no-repeat fixed;
                background-size: cover;
            }
        }

        /* screen <= 320 */
        @media screen and (max-width:320px) {
            body {
                background: url('../images/bg3.jpg') no-repeat fixed;
                background-size: cover;
            }
        }
    </style>
</head>

<body>
    
</body>

</html>

- 미디어 타입이란?: 장치

예) 프린터, 데스크톱, 스마트폰, 태블릿PC, 시청각 장애인 등이 사용하는 웹 브라우저

 

728x90