웹개발 웹언어 CSS 웹꾸미기 디바이스모드, 미디어 쿼리

디바이스 모드를 통해 각종 기기의 웹 사이즈를 제공 받을 수 있습니다. 설명에 앞서 알아두면 유용한 사이트를 소개해 드리겠습니다.

---

1. 네이버 디벨로퍼스

https://developers.naver.com/main/

NAVER Developers

 

위처럼 개발자 도구 창을 여는 방법은 F12를 해당 홈페이지에서 누르면 위 사진의 오른쪽과 같은 창이 열리는 것을 확인 할 수 있습니다.
Responsive 탭을 클릭하면 여러 기기들이 확인 됩니다. 항목을 클릭하면 사이즈를 확인 할 수 있습니다.

---

2. 기기 뷰포트 크기 확인

https://screensiz.es/

Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices

모바일 기기 뿐만 아니라 각종 기기들의 웹 구현을 위한 사이즈를 확인 할 수 있습니다.

---

3. 미디어 쿼리 사이트

https://mediaqueri.es/

Media Queries

 

---

본격적으로 미디어 쿼리에 대해 알아 보도록 하겠습니다.

@media media-type (and 조건 and 조건)
media-type	all
	braille	점자 표시 장치
	embossed	점자 프린터
	handheld	패드 장치
	print	인쇄 장치
	projection	프로젝터
	screen	컴퓨터 스크린, 스마트폰 스크린
	speech	음성 신시사이저용
	tty	디스플레이 기능이 제한된 장치
	tv	음성 영상이 동시 출력되는 장치

media-type에 not, only 구문 이용
예) not print = print 제외한 미디어 유형에만 적용
only = 쿼리를 지원하지 않는 웹 브라두저에서는 미디어 쿼리 무시 하고 실행하지 않습니다.

width, height
min-	최소 너비 높이 지정
max-	최대 너비 높이 지정

 

단말기의 속성

device-width, device-height
min-
max-

 

회전 속성

orientation: portrait	세로모드
orientation: landscape	가로모드

---

예제

@media screen and (min-width:768px) and (max-width:1439px) {
  body {
     background: url(image1.jpg)
  }
}

@media screen and (min-width:1440px) {
  body {
    background: rul(image2.jpg)
  }
}

768px~1439px까지 image1 사진이

1440px 부터는 image2 사진이 출력될 수 있도록 사이즈에 따른 웹 출력이 다르게 가능.