[ 목차 ]
728x90
반응형
✔ 미디어쿼리
미디어 쿼리(media query)
- 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도록 변경하지 않아도 알맞는 형태로 스타일을 조절
@media 매체유형 and(속성에 대한 조건){
css코드
...
}✔ 미디어쿼리 코드1
<!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: aqua;
}
}
</style>
</head>
<body>
<h2>미디어쿼리</h2>
</body>
</html>
✔ 미디어쿼리 결과
✔ 미디어쿼리 코드2
<!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 id="contents">
<section id="intro">
<img src="./이미지/인스타.png"alt="인스타그램">
<img src="./이미지/유투브,.png"alt="유튜브">
<img src="./이미지/페이스.png"alt="페이스북">
<img src="./이미지/트위터.png"alt="트위터">
</section>
<section id="desc" class="text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima ratione voluptatem ducimus laudantium, voluptatum eum illo deserunt exercitationem reiciendis tenetur dignissimos officiis maiores facere minus. Officiis impedit consectetur reiciendis labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil incidunt fugiat explicabo, quisquam, repellat sapiente accusantium modi esse soluta sit illo delectus porro nobis officiis tempora labore adipisci voluptatem excepturi?</p>
</section>
</div>
<footer>
<p>copyright 2022 by song</p>
</footer>
</div>
</body>
</html>
✔ 미디어쿼리 결과
✔ 매체유형
all : 모든 매체
screen : 컴퓨터, 태블릿, 스마트폰 ..
print : 프린터
speech : 스크린 리더✔ em, rem
em과 rm
상대적인 크기를 정하는 단위
em : 부모 요소 크기의 몇 배인지로 크기를 설정
pc의 일반 텍스트 크기 : 16px(기본값)
16px = 1em
모바일의 일반 텍스트 크기 : 12px(기본값)
12px = 1em
#hello {front-size : 2em} /* pc 기준으로 32px*/
<div id="hello">
<div>안녕하세요</div> <!-- 1em = 32px -->
// 기본 크기가 2이엠이 32픽셀에서 내부에 있는 디아이브이가 받으면 1이엠이 32로 인식한다.
</div>rem : 문서의 최상위 요소(html)의 몇 배인지로 크기를 설정
html {font-size :2rem}
<html>
>body>
<div>...</div>
</body>
</html>✔ em, rem 코드
<!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>em_rem</title>
<style>
html{font-size: 14px;} /*1rem =14px 정해준것을 기준으로 계산해주는 것이다. 장점으로는 html만 수정해주면 전체적으로 rem이 변한다는 편의성이 있다. */
/* body{font-size: 1.2em;}
.em{font-size: 1.2em;} 내부요소는 1.2 가 1로 인식한다. - */
.rem{font-size: 1.2rem;}
</style>
</head>
<body>
<h2>em_rem</h2>
<p class="em">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sint delectus odio unde ullam eius hic ab culpa laborum, est, quisquam voluptatum! Tempore at possimus labore repellendus corporis nisi dolores!</p>
<p class="rem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate sint delectus odio unde ullam eius hic ab culpa laborum, est, quisquam voluptatum! Tempore at possimus labore repellendus corporis nisi dolores!</p>
</body>
</html>
✔ em, rem 결과
반응형
'Frontend > CSS' 카테고리의 다른 글
| CSS 홈페이지 틀 만들기(휴대폰, 태블릿, 컴퓨터) (0) | 2022.11.01 |
|---|---|
| CSS (transform, animation, transition) (0) | 2022.10.31 |
| CSS (레이아웃 종류, flex 종류) (0) | 2022.10.31 |
| CSS (box-model, padding, margin, border, display, form) (0) | 2022.10.31 |
| CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0) | 2022.10.31 |
