1976s
이 블로그는 웹 개발, 프로그래밍, IT 활용법을 다루며, 실용적인 팁과 정보를 제공합니다.
-
recentPost
-
popularPost
-
Archive
-
recentComment
공부/CSS
CSS 미디어 쿼리 (Media Queries)
반응형 웹 (Resposible Web) 이란?
반응형 웹(Responsible Web)이란 디바이스(전자기기) 별로 각각 레이아웃(grid)이 달라지는 웹입니다.
미디어 쿼리 (Media Queries) 란?
미디어 쿼리란 반응형 웹을 구현하기 위해 필요한 기술 중에 하나로, 컴퓨터나 기기에게 ‘너는 어떤 종류의 미디어니?’ 또는 ‘미디어의 화면 크기는 어느 정도나 되니?’라고 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다. 또한, 기기의 종류뿐만이 아니라 해상도, 비트 수, 가로/세로 여부 등 세밀한 부분까지 감지가 가능하여 유용하게 사용됩니다.
미디어 쿼리 작성
@media not|only mediatype and (media features) {
CSS-Code;
}- @media : 미디어 쿼리 문법의 시작.
- [only 또는 not] : only는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드이고, not은 다음에 따라오는 미디어 유형 조건을 부정하는 키워드입니다.
- [미디어 유형] : all(모든 장치), print(인쇄 장치), screen(컴퓨터 화면 장치 또는 스마트 기기의 화면) 등이 있습니다.
- [and 또는 , ] : 'and'는 앞뒤 조건 모두 사실이어야 뒤에 실행문을 실행합니다. ', 콤마'는 앞뒤 조건 중 하나만 사실이어도 뒤에 실행문을 실행합니다.
- (조건문) : 조건문이 사실일 때 뒤에 따라오는 것을 해석하라는 의미입니다.
- {실행문} : 앞의 조건들이 모두 사실일 때 실행되며 일반적으로 CSS 코드를 작성.
@media
미디어 쿼리가 시작됨을 선언합니다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적.
[only 또는 not]
only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능합니다. 생략했을 때 기본 값은 only로 처리 됩니다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않습니다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 합니다.
미디어 유형 (media type)
| 정의된 곳 | 목록 |
|---|---|
| HTML | all, aural, braille, handheld, print, projection, screen, tty, tv |
| CSS | all, braille, embossed, handheld, print, projection, screen, speech, tty, tv |
| media type | 설명 |
|---|---|
| all | 모든 장치 |
| braille | 점자 표시 장치 |
| embossed | 점자 인쇄 장치 (화면을 읽어 종이에 점자를 찍어내는 장치) |
| handheld | 손에 들고 다니는 소형 장치 |
| 인쇄 장치 | |
| projection | 프로젝터 장치 |
| screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
| speech | 음성 출력 장치 |
| aural | 음성 합성 장치 (화면을 읽어 소리로 출력해 주는 장치) |
| tty | 디스플레이 기능이 제한된 장치 |
| tv | 영상과 음성이 동시에 출력되는 장치 |
[and 또는 , ]
and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미합니다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 합니다. and 대신 콤마 , 기호를 사용하면 ‘OR’ 연산을 수행되며 ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석됩니다.
미디어 기능 (media feature) - 조건문
미디어 피쳐에 사용하는 이름들은 대표적으로 dimensions과 aspect ratio로 나눌 수 있습니다.
dimensions
width, height와 같은 크기 관련 속성들이 사용됩니다. 물론 접두사를 붙이는 것이 더 좋고, 보통은 값의 단위로 px을 사용합니다. 화면의 픽셀에 따라 모바일 및 태블릿, 데스크탑을 구분하죠. em단위를 사용한다면 사용자의 확대/축소에 유연하게 대응할 수 있다고 합니다. (rem은 사파리에서 버그가 있다고 하네요.)
main {
display: flex;
flex-direction: column;
}
@media (min-width: 40rem) {
main {
flex-direction: row;
}
}aspect ratio
높이와 너비의 비율인 aspect-ratio나 orientation을 사용할 수도 있습니다.
@media (aspect-ratio: 16/9) {
/* 화면비가 16:9인 경우*/
}
@media (min-aspect-ratio: 1/1) {
/* 최소 화면 비가 1:1 이상인 경우. 즉, 화면의 높이에 비해 너비가 더 넓은 경우 */
/* (orientation: landscape) 와 동일 */
}
@media (max-aspect-ratio: 1/1) {
/* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에 비해 높이가 더 높은 경우 */
/* (orientation: portrait) 와 동일 */
}더 자세한 정보는 https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/를 참고해주세요.
{실행문}
일반적인 CSS 코드를 이 괄호 안에 작성합니다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석합니다.
미디어 퀴리 적용 방법
적용방법은 크게 두가지가 있습니다.
첫 번째는 <link> 요소에 사용하여 특성이 조건에 맞을 때 css 파일을 불러옵니다.
<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />두 번째는 스타일 시트 내에서 @media를 사용합니다.
@media screen and (max-width: 768px) {
body {
background-color: lightgreen;
}
}@media (max-width: 768px) {...}처럼미디어 타입을 생략하면 'all' 이 기본값이 되어 모든 미디어 타입에 적용이 됩니다.
사용 시 참고
참고(띄어쓰기)
/* 만약 아래와 같이 문법을 작성 하면 동작 하지 않습니다. */
@mediaalland(min-width:769px)and(max-width:1024px) {...}
/* 아래와 같이 띄어쓰기를 해야 합니다. */
@media all and (min-width:769px) and (max-width:1024px) {...}조건문의 경우에는 (...) 괄호 안에 입력해야 합니다.
실행문의 경우에는 {...} 괄호 안에 입력해야 합니다.
mobile first vs desktop first
반응형 디자인을 설계할 때 크게 mobile first design과 desktop first design 두 가지를 고려합니다.
- mobile first design : 모바일 화면을 우선으로 디자인하며, min-width 미디어 피쳐를 이용해 데스크탑 화면을 고려한다.
- desktop first design : 데스크탑 화면을 우선으로 디자인하며, max-width 미디어 피쳐를 이용해 모바일 화면을 고려한다.
대부분은 mobile first design을 사용하는 듯합니다. 아무래도 작은 화면을 넓은 화면에 맞도록 늘리기는 쉽지만 반대는 어려워서 그렇지 않나 싶습니다.
mobile first design
@charset “utf-8”;
/* All 버전 */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
/* Phone 버전 */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.
/* Tablet & Desktop 버전 */
@media only screen and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}
/* Tablet 버전 */
@media only screen and (min-width:768px) and (max-width:1199px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}
/* Desktop 버전 */
@media only screen and (min-width:1200px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}
위 코드가 대표적인 mobile first design을 적용한 스타일이라고 할 수 있습니다.반응형 웹에 대해 더 자세히 알고 싶으시다면, 반응형 웹을 위한 그라운드 룰을 참고해주세요.
theme (mode)
@media (prefers-color-scheme: dark) {
/* dark mode */
}
@media (prefers-color-scheme: light) {
/* light mode */
}
나머지 더 복잡한 미디어 쿼리는
The complete guide to CSS media queries
Respond.js
IE 6~8 버전에서 미디어쿼리를 해석할 수 있도록 만들어주는 자바스크립트 라이브러리이다.
https://github.com/scottjehl/Respond
마무리
위의 내용은 제가 필요한 부분만 정리 한 것입니다.