-
[CSS] 미디어 쿼리Web/CSS 2020. 5. 16. 03:06
미디어 쿼리
반응형 웹: 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것
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/
'Web > CSS' 카테고리의 다른 글
[CSS] 분할태그와 CSS응용, block을 이용한 레이아웃 설계 (0) 2020.05.16 [CSS] CSS의 이해, CSS의 선택자, 웹폰트 적용 방법, 벤더 프리픽스 (0) 2020.05.16 [CSS] CSS 코드의 재사용 (0) 2020.05.16 [CSS] 블록 모델, 그리드 (0) 2020.05.15 [CSS] css를 이용한 텍스트 꾸미기, 사진 정렬, class와 id 선택자 (0) 2020.05.15