미디어쿼리란
- pc뿐만 아니라
모바일과태블릿에도 대응되는 웹사이트를 만들기 위해 - 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
반응형→ 자연스러운 리사이즈가 일어나는 현상적응형→ 뚝뚝 끊겨서 레이아웃에 폰트크기가 달라지는 현상
→ 즉 자연스럽냐 아니냐
- Orientation : landscape (가로에 적용) / portrait(세로 적용)
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
div {
width: 300px;
height: 300px;
background-color: teal;
}
@media screen and (min-width: 601px) and (max-width: 1200px) {
div {
background-color: wheat;
}
}
span {
font-size: 36px;
}
@media screen and (orientation: landscape) {
span {
display: none;
}
}
</style>
<body>
<div></div>
<span>Please flip your phone :( </span>
</body>viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0" >위의 코드가 작성되어 있지않으면 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로
viewport로 너비와 배율을 설정해야 모바일 디바이스에서 의도한 화면을 볼 수 있음.
viewport너비와 배율을 설정할 때 사용하는 메타 태그의 속성 중 하나- 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
width=device-width: viewport의 가로폭 = 디바이스의 가로폭으로 지정하겠다.initial-scale=1.0: 비율은 항상 1.0
! 출처 : 노마드코더 코코아톡 클론코딩 고급 css 편
! 출처 : 엘리스 sw css 교육 과정
728x90
반응형
'프로그래밍 공부 > html,css' 카테고리의 다른 글
| [Css] - @keyframes , 애니메이션 (animation) 속성 (0) | 2021.11.01 |
|---|---|
| [Css] - Transformation , 트랜스폼 (0) | 2021.10.31 |
| [Css] - transition (트랜지션) 정리 (0) | 2021.10.31 |
| [Html,Css] - 의사 요소, 의사 클래스, 선택자 -- 추후 수정 (0) | 2021.10.31 |
| [Css] - position (0) | 2021.10.31 |