JunO3O
미디어 쿼리
미디어 쿼리
2023. 3. 21. 03:11ㆍCSS
미디어 쿼리
# 미디어 퀴리
- 접속하는 장치(미디어)에 따라 특정한 CSS 스타일을 사용하도록 하는 것을 미디어 쿼리라고 합니다.
- https://colly.com 사이트의 경우, 브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라집니다.
- PC 나 태블릿, 스마트폰의 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀝니다.
# 미디어 쿼리 구문
- 미디어 쿼리 구문은 아래 형식을 기본으로 합니다. [only | not] 은 생략할 수 있습니다.
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
| 연산자 | 설명 |
| and | 조건을 계속 추가할 수 있습니다. |
| , (쉼표) | 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가합니다. |
| only | 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 됩니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. |
| not | not 다음에 지정하는 미디어 유형을 제외합니다. 예를 들어 'not tv' 라고 지정한다면 TV를 제외한 미디어 유형에만 적용합니다. |
ex) 미디어 유형이 'screen' 이면서 최소 너비가 '200px' 이고 최대 너비가 '360px'일 경우에 적용할 CSS를 정의하는 구문
@media screen and (min-width:200px) and (max-width:360px) {
...
}
| 미디어 유형 | 사용 가능한 미디어 | 미디어 유형 | 사용 가능한 미디어 |
| all | 모든 미디어 유형 | braille | 점자 표시 장치 |
| 인쇄 장치 | handheld | 패드처럼 손에 들고 다니는 장치 | |
| screen | 컴퓨터 스크린(스마트폰 포함) | projection | 프로젝터 |
| tv | tv | tty | 디스플레이 기능이 제한된 장치 |
| aural | 음성 합성 장치(화면을 읽어 소리로 출력해주는 장치) | embossed | 점자 프린터 |
# 미디어 쿼리 조건
1. 웹 문서의 가로 너비와 세로 높이(뷰포트)
| 가로, 세로 값 설정하는 속성 | 설명 |
| width, height | 웹 페이지의 가로 너비, 세로 높이 |
| min-width, min-height | 최소 너비, 최소 높이 |
| max-width, max-height | 최대 너비, 최대 높이 |
<style>
body {
background:url(images/bg0.jpg) no-repeat fixed;
background-size:cover;
}
@media screen and (max-width:1024px) { /* max-width 가 1024px 이라면 */
body {
background: url(images/bg1.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:768px) { /* max-width 가 768px 이라면 */
body {
background: url(images/bg2.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width :320px) { /* max-width 가 320px 이라면 */
body {
background: url(images/bg3.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
2. 단말기의 가로 너비와 세로 높이
- 단말기 크기와 뷰포트 크기를 하나로 통일해 사용하기 위해 뷰포트를 지정할 때 width="device-width" 로 놓고 사용합니다.
| 단말기의 가로, 세로 값을 설정하는 속성 | 설명 |
| device-width, device-height | 단말기의 가로 너비, 세로 높이 |
| min-device-width, min-device-height | 단말기의 최소 너비, 최소 높이 |
| max-device-width, max-device-height | 단말기의 최대 너비, 최대 높이 |
3. 화면 회전
- orientation 속성을 사용해서 화면 방향 체크
| 속성 | 설명 |
| orientation : portrait | 단말기 세로 방향 |
| orientation : landscape | 단말기 가로 방향 |
<style>
@media screen and (orientation:landscape) {
body {
background-color: orange;
}
}
@media screen and (orientation:portrait) {
body {
background-color: yellow;
}
}
</style>
# 미디어 쿼리 중단점 만들기
- 중단점(breakpoint)이란 서로 다른 CSS 를 적용할 화면 크기를 말합니다.
- 대부분 기기의 화면 크기를 기준으로 하지만 모든 기기를 반영할 수 없기 때문에 스마트폰과 태블릿, 데스크톱 정도로 구분합니다.
- 모바일 퍼스트(mobile first)라는 모바일 기기 레이아웃을 기본으로 작성하여 태블릿 또는 PC 레이아웃을 작성하는 기법입니다.
- 미디어 쿼리 중단점은 개발자나 작업 조건에 따라 달라질 수 있습니다.
/* 스마트폰 세로 */
@media only screen and (min-width:320px) {
...
}
/* 스마트폰 가로 */
@media only screen and (min-width:480px) {
...
}
/* 태블릿 세로 */
@media only screen and (min-width:768px) {
...
}
/* 태블릿 가로, 데스크톱 */
@media only screen and (min-width: 1024px) {
...
}
# 외부 CSS 파일 연결
1. <link> 태그 사용하기
- <link> 태그를 사용하여 외부 CSS 파일을 HTML 파일에 가져옵니다.
- <head> 태그와 </head> 태그 사이에 삽입합니다.
<link rel="stylesheet" media="미디어 쿼리 조건" href="CSS 파일 경로">
ex) 화면 너비가 768px 이하일 때, 미리 만들어 놓은 태블릿용 스타일 시트 파일을 적용합니다.
<link rel="stylesheet" media="screen and (max-width:768px)" href="css/tablet.css">
2. @import 구문 사용하기
- <style> 태그와 </style> 태그 사이에 삽입합니다.
@import url(CSS 파일 경로) 미디어 쿼리 조건
ex) 화면 너비가 321px 이상 768px 이하일 떄 미리 만들어 놓은 태블릿용 스타일 시트 파일을 적용합니다.
@import url("css/tablet.css") only screen and (min-width:321px) and (max-width:768px);
3. 웹 문서에서 직접 정의하기
- <style> 태그 안에 media 속성을 사용합니다.
<style media="미디어 쿼리 조건">
스타일 규칙들
</style>
ex) 최대 너비가 320px 일 때(=너비가 320px 이하인 경우)
<style media="screen and (max-width:320px)">
body {
background-color:orange;
}
</style>
4. <style> 태그 안에 @media 구문 사용하기
- 3번과 비슷한 방식입니다.
<style>
@media 미디어 쿼리 조건 {
스타일 규칙들
}
</style>
<style>
@media screen and (max-width:320px) {
body {
background-color:orange;
}
}
</style>'CSS' 카테고리의 다른 글
| 반응형 웹 디자인 (0) | 2023.03.21 |
|---|---|
| 글자 생략 (0) | 2023.03.21 |
| 요소 배치 (0) | 2023.03.21 |
| 수평 / 중앙 / one true 레이아웃 (0) | 2023.03.21 |
| 그림자 / 그레이디언트 속성 (0) | 2023.03.21 |