Responsive Web(반응형 웹)
- 디바이스의 디스플레이 크기에 따라 자동으로 페이지의 크기가 대응하도록 제작하는 방법.
Viewport 설정
- 뷰포트(viewport)는 사용자의 가시영역(visible area) 의미.
- meta tag에서
viewport설정을 통해 해당 페이지의 크기 설정. - 반응형 웹 구성을 위해 필수적 설정.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
width 속성
- 너비(width)의 기본값은
980px. - 너비(width)를 기준으로 잡는 이유는 관례적으로 아래 스크롤 하기 때문.
width=device-width- 페이지의 크기를 디바이스의 크기와 맞춤.
- 어떠한 크기에서 렌더링하든 콘텐츠를 표시.
initial-scale 속성
- 초기 확대 비율.
initial-scale=1.0- 1배율 즉, 1:1 관계.
참고 속성
<meta name="viewport" content="user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>user-scalable: 사용자의 축소/확대 허용 여부. (초기값=yes)minimum-scale: 뷰포트의 최소 배율값. (0~10)maximum-scale: 뷰포트의 최대 배율값. (0~10)
미디어 쿼리(Media Query)
flexbox와%등을 이용해서 어느정도 반응형을 실현 가능하지만, 부족한 부분이 존재.- 미디어 쿼리로 분기점(종단점)을 나누어 명확하게 반응형을 설정할 수 있음.
@media [not or only] [media type] and ([속성]){...}[not or only]- 큰 의미 없음. (생략 가능)
not: 뒤의 조건을 제외. (일반적인 의미)noly: 뒤의 조건을 충족할 때.
[media type]all: 모든 미디어 타입.print: 인쇄 용도.screen: 컴퓨터 스크린. (모바일 기기 포함)tv: 음성과 영상 동시 출력 장치.projection: 프로젝터.
[속성]: 아래 분기점(종단점)에서 설명.
분기점(종단점)
- 필터링의 기준점.
- 연산자 이용 불가 하고, 속성 앞에
min-또는max-를 붙여 최솟값과 최댓값을 판단. - 속성은
and로 나열 가능. width(가로),height(세로) 등의 값 이용 가능.- 보통 3개의 분기점을 나눠 설정하는데,
/*
기본 pc창 style
*/
@media all and (max-width: 1024px) {
/* pc 작은창, 태블릿 style */
}
@media all and (max-width: 767px) {
/* 모바일 style */
}- 더 많은 분기점으로 최적화 가능.
모바일 퍼스트?
- 반응형 웹은 일반적으로 데스크탑에서 시작해 분기점을 구분 하면서 점차 작은 디바이스에 대응함.
- 이와 반대로 시작점을 모바일로 잡고 점차 큰 디바이스로 올라가는 것을 모바일 퍼스트라고 함.
- 2015년 구글에서 모바일 친화도를 검색 순위 산정에 적용(모바일겟돈; Mobilegeddon)하면서 트렌드가 됨.
/*
기본 모바일 style
*/
@media all and (min-width: 768px) {
/* pc 작은창, 태블릿 style */
}
@media all and (min-width: 1024px) {
/* pc style */
}- 최근 사용자는 주로 모바일을 이용하기 상당히 합리적이라 생각하는데,
- 작은 스크린의 가독성을 생각하면 심플함(간결함)이 관건.
- 이런 제약은 어쩌면 컨텐츠의 집중의 기회 일지도?
- 웹까지 미니멀리즘으로 가는 건가?
궁극적으로 모바일 퍼스트 반응형 웹디자인은 기본적으로 점진적 개선(Progressive Enhancement)이라는 웹의 전략과 디자인에 기반한 것이다. 점진적 개선이라는 방법을 사용하면, 강력한 토대 위에 개선용 층위를 영리하게 추가하는 식의 방법으로, 모두에게 접근성을 향상시킬 수 있다. -Brad frost-
사용 예시를 보고 싶다면 반응형 웹 구현를 참고하세요.
Dev