[CSS] 미디어 쿼리
미디어 쿼리
반응형 웹: 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것
1. 아무런 의미도 없는 <div> 태그 하나에 "responsive"라는 내용을 넣고, <div> 태그에 border: 10px solid green;을 지정, 폰트 크기를 6px로 지정
mediaquery.html 파일 생성
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 10px solid green;
font-size: 60px;
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
2. 화면의 너비가 800px보다 크다면 <div> 태그에 display:none; 을 설정. 화면의 크기가 800px보다 크다는것은 화면 크기의 최솟값이 800px라는 것과 같음.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@media(min-width: 800px) {
div{
display: none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>
이렇게 하면 화면 크기가 800px보다 클 경우 <div>의 display가 none이 되어, 화면 크기가 800px가 넘는 순간 <div>의 내용이 사라짐. min 대신 max를 넣으면 반대로 화면 크기가 800px 미만일 때 실행
미디어 쿼리 실습
1. 화면의 크기가 줄어들면 선도 없어지고 본문이 아래쪽에 배치되며 'web'이란 타이틀도 작아지게 하는 것
screen side < 800px 에 해당하는 내용을 추가하면 됨
<style>
@media(max-width: 800px){
]
</style>
2. 다음으로, grid 부분을 제거
<style>
@media(max-width: 800px){
#grid{
display: block;
}
]
</style>
3. 다음으로, 선을 제거
<style>
@media(max-width: 800px){
#grid{
display: block;
}
#grid ol{
border-right: none;
}
h1{
border-bottom: none;
}
]
</style>
www.evernote.com/l/AlcXvaq4VJBHd7y-s-59IOULs0r6c9KhS_U/