https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries를 읽고 정리한 문서입니다.
미디어 쿼리
문법 구조는 다음과 같다.
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
- media-type : 미디어 유형(ex: 인쇄 또는 화면)
- media-feature-rule : css 규칙이 적용될 조건(ex: min-width: 1024px)
- CSS rules : 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 CSS 규칙 집합
보통 쓰는 syntax
@media all and (min-width: 특정px) {
.클래스 {
/* css properties */
}
media-type(미디어 유형)
지정할 수 있는 미디어 유형은 다음과 같다.
- all
- print
- 페이지가 인쇄된 경우에만 CSS를 적용한다.
- screen
미디어 유형은 선택사항으로, 표시하지 않으면 기본값으로 all로 해석됨
media-feature-rule(미디어 기능 규칙)
반응형 디자인을 만들 땐 주로 min-width, max-width 등을 조건으로 활용. width를 활용하면 정확히 그 width인 경우만 특정하므로 잘 사용하지 않음
ex) 뷰포트가 정확히 600px인 경우 본문 색을 빨간색으로 변경하려면 width 사용
@media screen and (width: 600px) {
body {
color: red;
}
}
뷰포트가 600px보다 좁을 때 본문 색을 파란색으로 변경하려면 max-width 사용
@media screen and (max-width: 600px) {
body {
color: blue;
}
}
뷰포트가 600px보다 클 때 본문 색을 변경하려면 min-width 사용
@media screen and (min-width: 600px) {
body {
color: blue;
}
}
가로 모드/세로 모드 탐지
orientation으로 세로 모드인지 가로 모드인지 검사 가능
ex: 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 :
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
포인팅 장치 사용 탐지(수준 4 규격)
hover
hover 미디어 기능으로 사용자가 요소 위에 마우스 커서를 올릴 수 있는지 혹은 올릴 수 없는지 판별 가능.
(터치 스크린을 사용 중이거나 키보드 네비게이션을 사용할 경우, hover 불가능)
ex: hover가 가능한 장치로 접속중일 때만 본문 텍스트를 변경하려면 :
@media (hover: hover) {
body {
color: rebeccapurple;
}
}
pointer
세 가지 값을 취할 수 있음
- none : 사용자가 포인팅 장치가 없음. 키보드 또는 음성 명령만으로 탐색하고 있는 경우
- fine : 사용자가 작은 영역을 정확하게 공략할 수 있는 경우. 마우스나 트랙패드를 사용중인 경우
- coarse : 가능은 하지만 세밀하진 못할 경우. 터치스크린일 경우
그 외에도 여러 탐지 기준이 있음. (mdn을 찾아보길)
반응형 디자인에 대한 두 가지 접근법
- 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 분기점을 추가하는 것(max-width 사용)
- 가장 작은 뷰로 시작한 뒤 뷰포트의 크기 확대에 맞춰 레이아웃을 추가하는 것(min-width 사용, 모바일 우선 반응형 디자인, 주로 선호되는 접근법)
모바일 뷰는 단순한 단일 열 형태의 콘텐츠가 일반적이므로, 소스를 순서대로 잘 정렬하기만 하면 됨.(레이아웃이 단순)
⇒ 모바일 우선 방식은 뷰포트가 커가면서 피쳐를 추가하고 레이아웃을 키우는 접근 방식이므로 개발경험상 직관적이고 효율적이라는 듯
모바일뷰 최적화 사이트가 구글 SEO 상에서도 우선시된다고 ..
미디어 쿼리가 꼭 필요한가?
flex, grid 레이아웃은 미디어 쿼리 없이도 반응형 구성 요소를 만들 수 있는 방법을 제공함
ex) 적어도 200px 너비의 카드가 뷰포트에 맞아 떨어지게 하고 싶을 경우, grid 레이아웃으로 가능 -
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
clamp()
min, max() 함수와 더불어 쓰이는 함수
최댓값과 최솟값을 모두 설정할 수 있으며 그 가운데에 "이상적인" 크기에 대한 인수를 받음. 이상적인 목표에 도달하려 하면서도 조건 범위 내로 값을 "고정"하는 것
- clamp(최솟값, 선호값, 최댓값) 형식으로 요소의 최소, 선호, 최댓값을 정할 수 있다.
- 일반적으로 선호값이 지정되지만 최솟값 미만, 최댓값 초과의 값은 지정되지 않는다.
출처
'공부 > HTML, CSS' 카테고리의 다른 글
| HTML Element의 dataset property (0) | 2023.06.15 |
|---|