더보기
화면크기에 따라서 페이지의 구성을 다르게 표현하는 페이지를 반응형이라고 함
해당 화면 크기일 때, 안에 있는 CSS를 적용 :
- 생김새:
@media 화면크기{
선택자{속성들;}
}
- 생김새 해설 :
@midea[미디어타입 and] 화면크기{
선택자{속성들;}
}
- 미디어타입
- all : 모든 장치(기본값)
- print : 프린터에 사용
- screen : PC, 태블릿, 스마트에 사용
- speech : 스크린리더기가 페이지를 읽는데 사용
- 화면크기
- (min-width : 값) : 값(ex:600px) 이상
- (max-width : 값) : 값(ex:600px) 미만
- @media를 이용하여 반응형으로 만들 때 배치 순서가 중요
min-width:600px => 최소 600너비정도 되줘야 설정한 크기가 된다
max-width:600px => 너비가 최대600까지는 설정한 크기로 있는다
min-width:600px and max-width:1200px => 너비가 최소 600에서 최대 1200사이 크기가 되야 설정한 크기
<!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>
/* 둘다우선순위가 똑같아서 밑에있는게 적용되기때문에, .box가 밑으로내려가면
반응형 적용이 되지 않음*/
.box, .box2, .box3{width: 100px; height: 100px; background-color: darkred;
margin-bottom: 10px;}
/* 브라우저크기가 600px이상*/
@media screen and (min-width: 600px) {
.box{width: 300px; height: 300px;}
}
/* 브라우저크기가 600px미만*/
@media screen and (max-width:600px) {
.box2{width: 300px; height: 300px;}
}
/* 브라우저크기가 600px이상 1200px미만*/
@media screen and (min-width:600px) and (max-width: 1200px) {
.box3{width:300px; height:300px}
}
</style>
</head>
<body>
<div class="box">600px이상</div>
<div class="box2">600px미만</div>
<div class="box3"> 600px이상 1200px미만</div>
</body>
</html>
'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_hover (0) | 2021.06.14 |
|---|---|
| CSS_투명도 opacity, rgba (0) | 2021.06.14 |
| CSS_display, visibility, flex (0) | 2021.06.13 |
| CSS_크기조절 resize (0) | 2021.06.13 |
| CSS_다단(column-span모름) (0) | 2021.06.13 |