미디어 쿼리(media query)란?
화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나
●반응형웹
하나의 웹사이트에서 PC,스마트폰, 테블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법
문법
@media 매체유형 and(속성에 대한 조건){
css코드
....
}
✔매체유형
all : 모든 매체
screen : 컴퓨터,테플릿,스마트폰
print : 프린터
speech : 스크린 리더
예시를 보며 결과를 보자
HTML 코드
<!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/instagram.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. Ipsum officiis nemo aliquam laborum assumenda, sed architecto ad eius quibusdam veritatis, tempora reiciendis eum cupiditate exercitationem optio quam repellat! Cum, nisi.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit ullam, nam in temporibus quaerat veritatis porro placeat dolore iure distinctio ex ratione provident voluptatem blanditiis, quod molestiae commodi architecto rem.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Enim quo commodi repellat cupiditate expedita optio vitae unde totam veniam dolorum! A quasi quibusdam iste praesentium? Corporis eius voluptates eum sapiente.
</p>
</section>
</div>
<footer>
<p>copyright 2023 by TI</p>
</footer>
</body>
</html>
크기에 따라 변하는 결과를 살펴보자
결과1 (모바일)
결과2(태블릿)
결과3(pc)
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_transition (0) | 2023.04.03 |
|---|---|
| CSS_transfrom (0) | 2023.04.03 |
| CSS_Felx 레이아웃 (0) | 2023.03.30 |
| CSS_다단 레이아웃 (0) | 2023.03.30 |
| CSS_clear (0) | 2023.03.30 |
