css 반응형 미디어쿼리 뷰포트 짚고 넘어가기

나는 현업에서 웹 디자인이 자유롭게 뽑아나와졌던 편이였다.

그래서 미디어 쿼리를 왠만해서 고정 시켜놓고 작업하다가 

예외 케이스가 생길때만 세부적으로 분기처리를 하면서 작업 했었는데

 

어떤식으로 작업했었는지 정리 해보려고 한다.

 

반응형 웹이란?

웹 사이트의 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는 것이다.

화면 사이즈에 맞게 레이아웃들이 재배치 된다.

 

적응형도 있는데 적응형은 웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러오는 것이다.

(나는 카페24 쇼핑몰 작업을 할 때 적응형 작업을 많이 해왔고, 모바일은 도메인에 앞에 주로 m.이 붙었었다.)

 

 

뷰포트란?

 

뷰포트는 웹 페이지 컨텐츠들을 모바일 브라우저로 출력하여 실제 사용자들에게 보여지는 영역이다.

meta태그를 이용하여 웹 페이지가 모바일 브라우저에서 최적의 상태로 화면에 구현될 수 있도록 한다.

 

나는 보통 뷰포트를 head태그에 아래와 같은 meta로 작성해왔다.

<meta name="viewport" content="width=device-width, initial-scale=1">

 

*initial-scale="속성값" 

초기 확대/축소 값을 지정한다.

- 0~10 사이의 값 : 페이지 로딩 시 확대, 축소 값을 지정한다.

- initial-scale=1.0 (기본값) : 페이지 로딩 시, 확대 축소가 되지 않은 본래의 크기를 사용한다.

- 값이 클 수록 확대 된 화면을 로딩한다.

 

미디어 쿼리란?

각각 다른 디바이스 화면 크기를 인식해서 서로 다른 css 스타일을 적용시켜 보여주는 것이다.

보통 pc, tablet, mobile로 인식해서 보여준다.

보통 사용하는 해상도 넓이 값
320px ~ 768px 미만 : mobile
768px ~ 1024px 미만 : tablet
1024px : pc

 

미디어쿼리를 적용하는데에는 크게 3가지 방법이 있다.

1.html 문서 head에 미디어쿼리 관련 css연결

2. css 스타일 문서 내에 @media 작성

3. css 파일 내에 @import "media.css" 불러오기

-> 1번이나 3번 처럼 파일을 분리하게 되면 랜더링을 두번해야되서 이것 보다는 2번처럼 스타일 내에 직접 작성하는걸 선호 했다.

 

---

미디어쿼리 작성

@media only/not 미디어유형 and/콤마 (속성:속성값) ... {
     속성 : 속성값;
}

 

• only : 미디어쿼리를 지원하지 않는 브라우저에서는 미디어쿼리를 실행하지 않겠다. 
• not : 뒤에 오는 미디어유형은 제외시키겠다.
• ex) not tv : tv를 제외한 모든 유형에 미디어쿼리를 대응하겠다.
• and/콤마 : 미디어쿼리 조건문은 and 또는 콤마를 사용하여 두가지 이상 조건을 작성 할 수 있다. and : 앞뒤 조건이 모두 사실일 때 사용 / 콤마 : 앞뒤 조건중 하나라도 사실 일 때 

 

미디어유형 종류

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

미디어쿼리 속성 

width	웹페이지 뷰포트 너비 지정(min-width, max-width)
height	웹페이지 뷰포트 높이 지정(min-height, max-height)
device-width	디바이스 너비를 지정(min-device-width, max-device-width)
device-height	디바이스 높이를 지정
orientation : landscape /   orientaiton : portrait	디바이스 화면을 가로 기준으로 지정 / 디바이스 화면을 세로 기준으로 지정
aspect-ratio	웹 페이지 뷰포트 너비와 높이 비율 지정 너비 / 높이 순으로 작성,  (aspect-ratio : 5/4) : 뷰포트 너비가 5, 높이가 4인 비율일때 조건 적용
device-aspect-ration	디바이스의 너비와 높이 비율 지정 (ex. device-aspect-ratio:5/4)
color	디바이스에 표현가능한 최대 색상 비트수를 지정
color-index	매체에서 표현 가능한 색상의 개수를 지정
monochrome	흑백 디바이스의 픽셀당 비트수 지정
resolution	디바이스의 해상도를 지정

 

*orientation을 제외한 모든 속성은 min / max 접두사를 사용할 수 있다.

 

/*데스크탑*/
@media all and (min-width : 1200px){
 ...
} 

/*테블릿*/
@media all and (min-width : 768px) and (max-width:1199px){
 ...
} 


/*모바일*/
@media all and (min-width : 360px) and (max-width:767px){
 ...
}

위 처럼 미디어쿼리를 보통 사용해왔다.

 

320도 맞추거나 768px~1199px사이를 아래처럼 더 쪼개서 작업해봤는데,

/*데스크탑*/
@media all and (min-width : 1025px){
 ...
} 

/*테블릿*/
@media all and (min-width : 769px) and (max-width:1024px){
 ...
} 

@media all and (min-width : 321px) and (max-width:768px){
 ...
} 


/*모바일*/
@media all and (max-width : 320px){
 ...
}

 

상황에 따라 맞는 미디어쿼리로 대응하면 될 듯 싶다. 

---

요즘 어떤 해상도를 쓰는지 궁금하다 싶으면 아래 사이트를 참고 하면된다.

 

https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

1. pc 해상도

pc는 아직까지도 1920 * 1080이 대부분이고 가장 작은 사이즈는 1280px 이므로 

1280px 사이즈 위로 pc용 미디어 쿼리를 작성하면 대부분의 pc에서는 스크롤 없이 보여질 것 이다.

 

2. table 해상도

pc에 비해 더 다양한 해상도를 가지고 있는 것을 볼 수 있다.

768*1024를 가장 많이 사용하고, 나머진 그 이상의 사이즈 임을 알 수 있다.

 

3. mobile

모바일의 경우 360*800을 가장 많이 사용하고 있고 

가장 작은 사이즈임을 알 수 있다.

그래서 가장 작은 사이즈를 360, 큰 사이즈를 테블릿 포인트 전 까지 767로

맞춰주면 대부분의 모바일을 대응할 수 있을 것이다.

 

디바이스들이 다양해지면서 반응형도 점점 더 많아지는 것 같아서 

주기적인 확인과 공부가 필요할 것 같다.