[CSS] 미디어 쿼리 - @media, 반응형 웹

728x90

SMALL

1. 미디어 쿼리(Media Query)

1-1. 반응형 웹

하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법

@media 매체유형 and (속성에 대한 조건) {
    css코드
    ...
}

✔️ 매체유형

all: 모든 매체
screen: 컴퓨터, 태블릿, 스마트폰 ...(해상도로 구분함)
printer: 프린터
speech: 스크린 리더

✅ 화면크기에 따라 배경 색상이 달라지는 반응형 웹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어 쿼리1</title>
    <style>
        body {
            background-color: beige;
        }
        @media screen and (min-width: 1024px) {
            body {background-color: salmon;}
        }
    </style>
</head>
<body>
    <h2>미디어 쿼리</h2>
</body>
</html>

✅ 다음 페이지를 반응형 웹으로 만들어보자.

📄 외부 스타일로 적용한 css 파일

media.css

0.00MB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리 2</title>
    <link rel="stylesheet" href="./CSS/media.css">
</head>
<body>
    <div id="container">
        <header>
            <nav>
                <ul>
                    <li>인스타그램</li>
                    <li>유튜브</li>
                    <li>페이스북</li>
                    <li>트위터</li>
                </ul>
            </nav>
        </header>
    </div>
    <div id="contents">
        <section id="intro">
            <img src="./images/insta.png" alt="인스타그램">
            <img src="./images/youtube.png" alt="유튜브">
            <img src="./images/facebook.png" alt="페이스북">
            <img src="./images/twitter.png" alt="트위터">
        </section>
        <section id="desc" class = 'text'>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto possimus eaque eligendi maiores doloremque amet praesentium nesciunt placeat esse ex, alias fugit aperiam recusandae sequi. Reprehenderit dolore veniam omnis dolorum?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto possimus eaque eligendi maiores doloremque amet praesentium nesciunt placeat esse ex, alias fugit aperiam recusandae sequi. Reprehenderit dolore veniam omnis dolorum?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto possimus eaque eligendi maiores doloremque amet praesentium nesciunt placeat esse ex, alias fugit aperiam recusandae sequi. Reprehenderit dolore veniam omnis dolorum?</p>
        </section>
    </div>
    <footer>
        <p>copyright 2023 by 고예성</p>
    </footer>
</body>
</html>

728x90

LIST

'Web > CSS' 카테고리의 다른 글

[CSS] Flex 레이아웃 - 요소 정렬, 배치하기 (0)	2023.04.04
[CSS] 레이아웃 설정하기 - 2단 레이아웃, 3단 레이아웃, 다단 레이아웃 (0)	2023.03.31
[CSS] 포지션(Position), 위치 지정방식의 종류, z-index (0)	2023.03.31
[CSS] 디스플레이(display) 속성, 폼(form) 알아보기! (0)	2023.03.31
[CSS] 패딩(padding), 마진(margin), 테두리(border) 속성 알아보기! (0)	2023.03.31