미디어 쿼리를 이용한 반응형 디자인 학습
반응형 디자인
화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 된다.미디어 쿼리
CSS 문법 중 하나이며, 사이트에 접속하는 장치에 따라 특정한 조건에 맞는 CSS 스타일을 사용하도록 도와주는 모듈이다.@media(max-width:800px) { div { display:none; } }
- style 태그 아래에 미디어 쿼리(@media 항목) 삽입
- 800px 이하 일때는 그리드가 없어지고 텍스트가 다른 형태로 정렬
<style> body { margin:0; } a { color:black; text-decoration: none; } h1 { font-size: 45px; text-align: center; border-bottom:1px solid gray; margin:0; padding:20px; } ol { border-right:1px solid gray; width:100px; margin:0; padding:20px; } #grid { display: grid; grid-template-columns: 150px 1fr; } #grid ol { padding-left: 40px; } #grid #article { padding-left: 25px; } @media(max-width:800px) { #grid { display: block; } ol { border-right:none; } h1 { border-bottom:none; } } </style>