< CSS 고급 - 미디어 쿼리 (Media query), 반응형 웹(Responsive Web) >
- 화면의 크기에 따라 어떤 div 요소를 보이거나 안 보이게 할 수 있는 기술
즉, 화면의 크기에 따라 웹 디자인을 달리할 수 있음. (반응형 웹; responsive web)
- 화면의 크기는 크롬 개발자 도구의 우측 상단에 px로 표시됨.
- Media query 사용 방법
<head>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(max-width:800px) {
div{
display:none;
}
}
</style>
</head>
<body>
- @media(max-width:800px) {div{display:none;}}
; 0px~800px 까지는 요소를 가림. 즉, 800px 초과부터 요소를 보여줌.
- @media(min-width:800px) {div{display:none;}}
; 800px~ 최대px 까지는 요소를 가림. 즉, 800px 미만부터 요소를 보여줌.
- media query 안쪽 조건에 다양한 속성들을 넣음으로써 반응형 웹을 디자인 할 수 있음.
'프로그래밍(Programming) > CSS' 카테고리의 다른 글
| CSS 고급 - transition (0) | 2018.08.22 |
|---|---|
| CSS 고급 - LESS 언어(language), syntax, compile (0) | 2018.08.22 |
| CSS 중급 - z-index (0) | 2018.08.22 |
| CSS 중급 - Flex Layout (0) | 2018.08.22 |
| CSS 중급 - Float Layout (0) | 2018.08.22 |