디자인과 개발 그 사이

미디어 쿼리(Media Queries) / 적용방법 / css 반응형 본문

css

미디어 쿼리(Media Queries) / 적용방법 / css 반응형

짧은 양다리 2023. 7. 21. 17:55
728x90

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀

 

미디어 쿼리(Media Queries)

화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성

 

@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}

 

only 또는 not

only : 다음에 오는 조건을 지원하는 브라우저에서만 미디어 쿼리를 적용, 생략시 기본값

not : 다음에 오는 조건을 제외한 모든 미디어 유형에만 적용

 

미디어 유형

미디어별로 적용할 CSS를 따로 작성하는 것, 생략시 all로 적용

기기명 설명
all 모든장치
print 인쇄 장치
screen 컴퓨터 화면 장치 또는 스마트 기기의 화면
tv 영상과 음성이 동시에 출력되는 장치
projection 프로젝터 장치
handheld 손에 들고다니는 소형 장치
speech 음성 출력 장치
aural 음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty 디스플레이 기능이 제한된 장치
braille 점자 표시 장치

 

and 또는 ,

and: 앞뒤 조건이 모두 포함일 때  적용

, : 앞뒤 조건 중 하나만 포함 되더라도 적용, 생략 가능

@media A and B {실행문}
@media A , B {실행문}
@media (min-height: 720px), screen and (orientation: Landscape) {실행문}
/* 모든 유형의 장치 , 창크기가 720px 이상일때 랑 컴퓨터 스크린이 가로모드일때 적용 */

 

 

(조건문)

조건문이 일때 뒤에 따라오는 것{실행문}을 적용

조건문도 and나 ,(콤마)를 이용하여 두 가지 이상 작성할 수 있으며 생략도 가능

@media (min-width:360px){실행문}
/* 모든 유형의 장치 , 창크기가 360px 이상일때 적용 */
@media (min-width:360px) and (max-width:720px){실행문}
/* 모든 유형의 장치 , 창크기가 360px 이상이고 창크기가 720px 이하일때 적용 */
조건문 설명 조건값/예시
width 웹페이지의 가로 너빗값
 (스크롤바를 포함한) 		 - 값: 길이 (px, em, ...)
- min, max 머리말 사용가능

예시:
@media(min-width:300px){실행문}
height 웹 페이지의 세로 높잇값
 (스크롤바를 포함한) 		 - 값: 길이 (px, em, ...)
- min, max 머리말 사용가능

예시:
@media(height:750px){실행문}
Device-width 실제 기기 스크린의 너빗값 - 값: 길이 (px, em, ...)
- min, max 머리말 사용가능

‘width’와 ‘device-width’의 차이:
iPhone4 기기 스크린은 320x480이지만 해상도는 640x960 인 경우을 보면 ‘device-width’ 는 320px이고, ‘width’는 640px

예시:
@media(device-width:320px){실행문}
Device-height 실제 기기 스크린의  높잇값 - 값: 길이 (px, em, ...)
- min, max 머리말 사용가능

예시:
@media screen and (max-device-height: 799px){실행문}
orientation 기기의 화면 방향 Portrait(세로) / Landscape(가로)

예시:
@media (min-width: 720px) and (orientation: portrait) {실행문}
Aspect-ratio 화면 비율 width와 height의 비율 - 값: ratio (예: 16/9)
   브라우저 화면 비율 (1)
   브라우저 종횡비 (16/9)
   기기 해상도 (640/320)
- min, max 머리말 사용가능

예시:
@media all and (aspect-ratio:1) {실행문} 
// 320*320, 640*640 등이 대응

@media all and (aspect-ratio:16/9) {실행문} 
// HDTV에 일반적인 화면 비율인 16:9 인 경우에 대응
(예: 1920*1080)
Device-aspect-ratio 단말기의 화면 비율
device-width와
device-height의 비율
 - 값: ratio (예: 16/9)
   기기 화면 비율 (1)
   기기 종횡비 (16/9)
   기기 해상도(640/320)
- min, max 머리말 사용가능

예시:
@media all and (device-aspect-ratio:16/9) {실행문}
color 색상 구성요소 당 비트 수
(장치가 색깔 장치가 아니면 값은 0)
 - 값: 정수
- min, max 머리말 사용가능

예시:
 @media all and (color) {실행문}
// 모든 색상 장치에 적용
@media all and  (min-color: 4){실행문}
// 색상 구성요소당 최소 4비트를 지닌 장치에 적용
Color-index 기기의 색상 수 - 값: 정수
- min, max 머리말 사용가능
- 128 (색상 수 단위)

예시:
@media all and (min-color-index:256) {실행문} 
// 출력 장치가 256 이상 색을 지원하면 실행
monochrome 기기가 흑백일 때 픽셀당 비트 수
장치가 흑백이 아니면, 값은 0
 - 값: 정수
- min, max 머리말 사용가능

예시:
@media all and (monochrome) {실행문}
// 기기가 흑백이면 실행
@media all and (monochrome:0) {실행문}
// 기기가 흑백이 아니면 실행
resolution 기기의 해상도 - 값: 해상도 dpi 또는 dpcm
- min, max 머리말 사용가능
  min max 없는경우 사각형 픽셀 화소에만 대응

예시:
@media all and (resolution:96dpi) {실행문} 
// 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (min-resolution:96dpi) {실행문} 
// 1인치당 96개 이상의 화소를 제공하면 실행
scan TV의 스캔 방식 - progressive : 초당 60 회 정도의 고화질 스캔
- interlace : 초당 30회 정도의 보통 스캔

예시:
@media tv and (scan:progressive) {실행문}
grid 기기의 그리드/비트맵 값 : 0 / 1  기본값 : 1

예시:
@media all and (grid:0) {실행문} 
// 그리드 방식이 아니면
(비트맵을 기반으로 하는 그래픽 표시 장치. 
대부분의 컴퓨터와 스마트폰 웹브라우저에 해당)

@media all and (grid:1) {실행문} 
// 그리드 방식이면
(문자로만 표기되는 tty, 터미널, 전화 액정화면)

 

미디어 쿼리 적용 방법

1. 링크 방식
 <link></link> 태그로 CSS파일을 연결하여 적용

: HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도 빠름 (가장 많이 사용)

<link rel="stylesheet" href="style.css">
/* style.css 안에서 미디어 쿼리 사용 */



2. 링크 방식
 <link></link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS파일을 연결

: 조건이 여러 개로 나눠지게 되면 그만큼 CSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와 웹사이트 속도가 느려질 수 있음.

<link rel="stylesheet" media="all and (max-width:720px)" href="media_720.css">
<link rel="stylesheet" media="all and (max-width:320px)" href="media_320.css">
/* 미디어 조건에 따라 각각의 css 연결 */



3. 문서 내에서 작성하는 방식
HTML 문서 내에 미디어 쿼리를 작성

: CSS 코드를 문서 내에 작성하게 되면 문서의 용량이 커지고, 커진 용량으로 인하여 속도가 짐. 

<head>
    <style>
        @media all and (max-width:320px){실행문}
    </style>
</head>



4. 임포트 방식
CSS 파일 내에서 CSS 파일을 불러오는 방식

: 조건이 늘어나게 되면 여러 개의 CSS 파일을 불러와야 되서 웹사이트의 속도가 저하됨

@import url("media_720.css") all and (max-width:720px);
@import url("media_320.css") all and (max-width:320px);

 

 

※ 주의사항

1. 띄어쓰기
 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄어줘야 함.

만약, 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않음.

@media all and (max-width:320px){실행문}
/*올바르게 띄어쓰기 한 구문*/

@media all and(max-width:320px){실행문}
/*올바르지 않게 띄어쓰기 한 구문*/



2. min/max 사용 시 작성 순서
min을 사용할 때는 반드시 크기가 작은 순서대로 작성

(min은 최소 그 이상이라는 뜻으로, 점차 커지는 것을 의미하기 때문)

 

max를 사용할 때는 반드시 크기가 큰 순서대로 작성

(max는 최대 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)

 

@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}

 

가장 많이 사용하는 반응형 미디어 쿼리 👍

/* 기본 1920 기준 pc */ 
/* PC */ 
@media screen and (max-width: 1920px){
    /* 1920 기준 vw (1441 ~ 1920) */ 
}
/* 태블릿 */ 
@media screen and (max-width: 1440px){
    /* 1024 기준 px (721 ~ 1440) */ 
}
/* 모바일 */ 
@media screen and (max-width: 720px){
    /* 360 기준 px (~ 720) */ 
}

 

 

 

 

 

참고 사이트

https://naradesign.github.io/media-query.html 

 

참고 이미지

 

 

728x90

'css' 카테고리의 다른 글

모바일 디바이스별 글자크기 다름 / text-size-adjust  (0) 2023.07.24
[오버스크롤 동작] ios 모바일 스크롤 바운스 막기 / 스크롤 체이닝 막기  (0) 2023.07.24
웹폰트 사용하기 / @font-face  (0) 2023.07.20
table 기본 셋팅/border-spacing/border-collapse  (0) 2023.07.17
css 줄바꿈 지정하기 white-space/word-wrap/word-break  (0) 2023.07.14
'css' Related Articles more