Responsive Web

오민영·2023년 2월 13일

responsive resposive web 모바일 대응 반응형 반응형 웹

CSS

목록 보기

5/22

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

meta 요소 - viewport

데스크탑 (PC)

데스크탑 (PC)의 뷰포트는 웹 브라우저 창 (visibla area)의 뷰포트와 같다.
때문에 사용자가 브라우저 창의 크기를 조절하면서 뷰포트의 크기를 조절할 수 있다.
웹페이지가 뷰포트보다 작으면 스크롤로 나머지를 볼 수 있다.
모바일 뷰포트는 웹 브라우저 창(visible area)보다 크거나 작을 수 있다.

아래 viewport 메타 태그는 모바일 반응형을 만들 때 필요하다.

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

뷰포트(viewport)란, 웹 페이지에서 사용자의 보이는 영역(visible area)을 말한다. 사용자 별로 사용하는 디바이스가 다르기 때문에 (OS 별, 모바일 / 테블릿 / PC 별 등) 사용자가 볼 수 있는 범위는 각각 다르다.

즉, 이 태그는 뷰포트를 지정해주는 역할을 한다.

width → 뷰포트의 가로 크기를 정한다. width=”500” 는 500만큼의 픽샐 개수를 가진 너비로 설정되고, width=”device-width” 는 기기의 스크린 너비에 맞추라는 의미이다.

initial-scale → 페이지에 처음 접속했을 때 보여질 확대 비율을 설정한다. 1로 정하면, CSS픽셀과 화면에 보여질 픽셀이 1:1을 이룬다. 즉, 1보다 작으면 페이지는 축소되어 보이고 1보다 크면 확대되어 보인다.

content 속성	설명
width	뷰포트의 가로 크기
initial-scale	페이지 처음 접속했을 때, 보여질 배율
user-scalable	사용자의 축소/확대 허용 여부, Default 값은 yes
minimum-scale	뷰포트의 최소 배율값 (0~10), 거의 1.0으로 지정
maximum-scale	뷰포트의 최대 배율값 (0~10), 거의 1.0으로 지정

미디어 쿼리

미디어 쿼리는 반응형을 위한 기본이자 핵심이다.

예) title을 16px로 하되, 600px 보다 작은 화면에서는 12px로 줄인다.

.title{
	font-size: 18px;
}

@media (max-width: 600px){
	.title{
		font-size: 12px;
	}
}

구문

미디어 쿼리 구문은 ‘미디어 유형 / 논리 연산자 / 특성' 으로 이루어지며, 대소문자를 구분하지 않는다.

미디어 유형

유형	설명
all	모든 디바이스 대상
print	인쇄 결과물 및 미리보기 문서
screen	화면 대상

@media screen{} 을 쓰면 스크린이 있는 디바이스에서만 적용이 된다. 유형을 지정하지 않는 경우엔 디폴트인 all이 적용된다.

논리 연산자

연산자	설명
and	모든 쿼리가 참이여야 적용
not	모든 쿼리가 거짓이여야 적용
, (comma)	어느 하나라도 참이면 적용 (or)
only	미디어 쿼리를 지원하는 브라우저만 적용

@media only screen{} 과 같이 only 를 사용하면, 미디어쿼리를 지원하지 않는 브라우저 (IE8 이하)에서는 해당 스타일을 무시한다.

미디어 쿼리를 지원하는 브라우저는 only 키워드를 만나면, 그 스타일을 그대로 읽어들인다. 반면, 미디어 쿼리를 지원하지 않는 브라우저는 only라는 미디어 유형이 있다고 생각한다. 하지만 only라고 정의된 미디어 종류는 없기 때문에, only에 적용된 스타일을 아무것도 적용하지 못한다.

특성

속성	설명
width	뷰포트 너비
height	뷰포터 높이
aspect-ratio	뷰포트 가로세로비
orientation	뷰포트 방향

orientation 속성은 모바일 전용 속성이 아니다. 가로가 세로보다 긴지 / 세로가 가로보다 긴지에 따라 가로모드 / 세로모드 라고 판단한다.

유형 + 연산자 + 특성을 조합한 다양한 구문 예시

모든 디바이스 & 최소 너비가 768 이상 & 최대 너비가 1080px 이하 라는 조건을 모두 만족할 때 적용

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

최소 높이가 680px 이상 이거나. 세로 모드의 스크린 기기 중 하나를 만족하는 경우에 적용

@media (min-height: 680px), screen and (orientation: portrait) { }

모바일과 데스크 탑, 누가 먼저?

미디어 쿼리의 분기는 대부분 width 값을 사용하는데, 이 때 min을 쓸지 max를 쓸지 고민이 된다..

이럴때 추천하는 방법

모바일 퍼스트라면? min-width
데스크탑 퍼스트라면? max-width

모바일 퍼스트

모바일에 대한 스타일이 우선 적용되도록, 분기점(break point)가 낮은 순서대로 작성해 나간다.

모바일 = 작다 = min, 모바일 기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합하도록 한다.

/* Mobile First */
 
.title { font-size: 12px; }
 
@media (min-width: 640px) {
  .title { font-size: 14px; }
}
 
@media (min-width: 768px) {
  .title { font-size: 16px; }
}
 
@media (min-width: 1024px) {
  .title { font-size: 18px; }
}

위와 같이 작성한 경우, iPhone 사이즈 (375px)의 기기에서는 폰트 사이즈는?

어떤 미디어 쿼리 구문도 만족하지 못하므로 기본 12px 이 적용된다.

800px 너비의 뷰포트에서 폰트 사이즈는?

우선 12px이 적용 되지만, 최소 너비 640px을 만족하므로 스타일을 덮어써서 14px이 된다. 그리고 또 최소 너비 768px이라는 조건도 만족하므로 스타일을 다시 덮어써서 16px이 된다.

데스크탑 퍼스트

분기점(break point)을 높은 순서부터 작성한다.

데스크탑 = 크다 = max, 데스크탑은 해상도가 크기 때문에 큰 조건을 먼저 부합하도록 한다.

/* Desktop First */
 
.title { font-size: 18px; }
 
@media (max-width: 1023px) {
  .title { font-size: 16px; }
}
 
@media (max-width: 767px) {
  .title { font-size: 14px; }
}
 
@media (max-width: 639px) {
  .title { font-size: 12px; }
}