미디어 쿼리 적용법
1. CSS 파일 불러오기 : <head> 태그 안에 <link> 태그
- HTML 파일의
<head> 태그 안에 <link> 태그를 위치시켜 CSS 파일을 불러오기
media 속성을 사용해 조건을 지정
👉🏽 해당 조건을 만족할 경우에만 해당 CSS 파일을 불러온다
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
2. <style> 태그 안에 스타일 작성
- HTML 파일 내
<head>태그 안에서 <style> 태그를 열어 CSS 속성을 작성한다
media 속성을 사용해 조건을 지정
👉🏽 해당 조건을 만족할 경우에만 해당 CSS 속성이 적용된다
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
</style>
3. CSS 파일 혹은 태그 안에서 직접 미디어쿼리 작성
미디어 쿼리 기본 형식
@media 미디어 타입 (조건(너비 및 높이)) {
CSS 입력하는 부분
}
미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.조건(너비 및 높이) : 미디어 쿼리가 적용되는 조건 (보통 지정한 창의 너비나 높이를 기준으로 한다) CSS 입력하는 부분 : 조건을 충족하고, 미디어 타입이 올바른 경우 스타일이 적용된다.
Ex)
@media screen (max-width: 400px) {
body {
color: red;
}
}
- all : 모든 미디어 타입
- print : 프린터
- screen : 컴퓨터 화면 (화면을 출력하는 디스플레이가 있는 미디어들은 대개 screen 타입에 속한다.)
- speech : 스크린 리더
조건(너비 및 높이)
- 반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이다.
min-width와 max-width, width 등을 활용해 뷰포트 너비 조건을 준다.
방향성
- 세로 모드인지 가로 모드인지
orientation으로 지정 가능
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
- 가로 방향이면 orientation: landscape
복잡한 미디어 쿼리
논리곱(and) 미디어 쿼리
and를 사용해 해당 조건들을 모두 만족 시 미디어 쿼리를 적용시킨다.
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
- 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우
논리합(or) 미디어 쿼리
콤마(,)를 사용해 해당 조건 중 어느 하나를 만족시킬 때 미디어 쿼리를 적용한다.
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}
- 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우
부정(not) 미디어 쿼리
not 연산자를 사용해 명시한 조건의 반대의 경우 미디어 쿼리를 적용한다.
@media not all and (orientation: landscape) {
body {
color: blue;
}
}
레퍼런스
https://mediaqueri.es/
https://www.awwwards.com/
