<반응형 디자인과 미디어 쿼리>
- 반응형 웹(responsive web): 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해 최적화된 모양으로 바뀌는 것
- 미디어 쿼리: CSS를 통해 반응형 웹을 구현하는 핵심적인 개념
→목표: 미디어 쿼리를 통해 웹의 가로 사이즈가 특정 수준 이상이거나 이하면 태그가 보이지 않게 만드는 것
-우선 responsive라는 단어를 쓴 div 태그 생성
-div 태그 박스 설정 (border값:10px, 초록색 실선, 폰트 크기:60px)
-@media(min-width:800px) {
div {
display:none;
}
}
→ min-width(최소 폭)이 800px을 만족할 때 중괄호 안의 내용(=display:none;) 실행
→즉, 폭이 800px을 넘으면 display:none; 실행(=보이지 않게 한다)
+) max-width:800px; -> 최대 폭이 800px을 만족할 때, 즉 폭이 800px보다 작으면 display:none; 실행
<미디어 쿼리 활용>
→@media(max-width:800px) {
#grid {
display:block;
}
ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}
→ 최대 폭이 800px일 때(=폭이 800px보다 작으면)
1) display를 grid에서 block으로 바꾼다. (block level element가 되면 화면 전체를 차지하기 때문에 CSS 글 부분이
자연스럽게 밑으로 내려오게 된다.
2) ol 태그의 border-right 속성값을 none으로 설정해 선을 없앤다.
3) h1(=WEB)의 bother-bottom 속성값을 none으로 설정해 선을 없앤다.
