치춘짱베리굿나이스
미디어 쿼리 본문
미디어 쿼리
미디어 쿼리란?
현재 브라우저 또는 장치 환경이 프로그래머가 정의한 규칙에 부합할 때 특정 css를 적용하도록 해주는 구문
특히 반응형 웹을 만들고자 할 때 화면 크기에 따라 서로 다른 css 스타일을 적용하기 위해 많이 사용한다
미디어 쿼리 기본
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
구성 요소
@media
- 미디어 쿼리의 시작 부분
media-type
- 미디어 유형
all
,print
,screen
,speech
네 가지 중 하나를 지정할 수 있다all
: 모든 장치에 적용 (기본값)print
: 인쇄 결과물 및 출력 미리보기 화면에 적용screen
: 화면에 적용speech
: 음성합성장치에 적용
- 논리합 및 논리곱 연산자를 이용하여 연결하여 사용할 수 있다
and
/ ,
/ not
- 논리합 (or) 또는 논리곱 (and) 또는 부정 (not)
- 앞뒤 조건을
&&
또는||
으로 묶어주는 역할을 하거나, 조건을 뒤집는다and
: 논리곱 (앞뒤로 연결된 조건문이 모두 참이어야 스타일 적용),
: 논리합 (앞뒤로 연결된 조건문이 하나라도 참이면 스타일 적용)not
: 부정 (모든 미디어 쿼리 부정 = 뒤따라오는 조건 중 하나라도 참이면 스타일 적용하지 않음)not
사용 시에는 미디어 유형을 반드시 지정해주어야 하며, 한 개의 조건만 부정할 수 없다 (무조건 모든 미디어 쿼리를 부정하므로, 맨 마지막에 적용된다)
media-feature-rule
- 미디어 특성 표현식
- 일종의 조건문이라고 보면 된다
- 각각의 조건문은 괄호로 묶어주고, 논리 연산자를 통해 여러 조건을 함께 적용할 수 있다
- 올 수 있는 특성의 일부는 다음과 같다
device-height
: 출력 장치 화면의 높이devide-width
: 출력 장치 화면의 너비width
: 뷰포트의 너비height
: 뷰포트의 높이orientation
: 뷰포트의 방향 (landscape
/portrait
)- 더 많은 특성은 여기서 확인
- 미디어쿼리 level 4 사양에선 특성 표현식 괄호 안에서 비교연산자 (
<
,>
,≤
,≥
) 와and
,or
,not
연산자를 사용할 수 있다
@media (30 <= width <= 80) {
어쩌구
}
@media (not(hover)) {
어쩌구
}
미디어 쿼리 구성 팁
반응형 웹을 구성할 땐 데스크탑 기준으로 작업 후 미디어 쿼리를 이용하여 모바일 화면을 줄이거나, 모바일 기준으로 작업 후 미디어 쿼리를 이용하여 데스크탑 화면으로 늘리는 두 가지 방법 중 하나가 이용된다
후자의 작업법은 모바일 우선 반응형 디자인으로 불리는데, 모바일은 화면이 데스크탑에 비해 훨씬 작기 때문에 더 작은 컴포넌트들로 화면을 구성해야 하며 따라서 요소들을 더 잘게 잘라 작업하게 된다
데스크탑을 기준으로 작업할 경우 모바일 화면을 구성할 때 이미 만들어진 컴포넌트들을 더 쪼개주는 추가적인 작업이 필요한데, 모바일 기준으로 작업할 경우 데스크탑 화면을 구성할 땐 추가적인 분할 없이 작은 원소들을 갖다 붙이기만 하면 되므로 작업량이 현저히 줄어든다
참고자료
미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN
미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN
'ClientSide > html css' 카테고리의 다른 글
가상선택자 ::before, ::after (0) | 2022.05.09 |
---|---|
CSS 선택자 (0) | 2022.05.09 |
html DOM (0) | 2022.03.25 |
Attribute vs Property (0) | 2022.03.25 |
[CSS] 길이 단위 (0) | 2022.03.25 |
Comments