사용자는 모바일기기, 태블릿, PC 등 화면의 크기가 제각각인 기기에서 웹페이지를 이용한다. 우리가 평상시에 이용하는 웹페이지들을 보면 PC를 통해서 접속할 때와 모바일기기를 이용해서 접속할 때의 레이아웃이 차이가 나는 것을 확인할 수 있다. 당연히 디바이스의 크기가 제한되어 있기 때문에 사용자 환경에 최적화된 웹페이지를 제공하기 위해서는 각 기기마다 다른 형태로 웹페이지를 제공해야 한다. 그 방법에는 적응형과 반응형이 있다.
적응형
적응형 웹페이지는 각 기기 별로 별도의 사이트를 제작하고, 서버 또는 브라우저에서 기기 환경을 감지한 뒤 독립적인 페이지를 제공하는 방식이다. 감지된 기기에 필요한 파일만 다운받으면 되기 때문에 속도가 반응형보다는 빠르다. 콘텐츠의 양을 조절하고 최적화된 디자인을 하기 때문에 콘텐츠 양이 많은 웹사이트를 제작할 때 적합하다.
장점
- 기기에 맞는 파일만 다운로드하면 되기 때문에 속도가 빠르다.
- 디자인을 하기에 자유롭다.
- 반응형보다 기기에 따른 다양한 레이아웃의 웹페이지 환경을 갖게 된다.
단점
- 기기마다 다른 독립적인 템플릿을 제공해야 하기 때문에 번거롭다.
- 고려하지 않은 특정 장치를 이용해 웹페이지에 접근할 수 있기 때문에 반응형 웹페이지보다 덜 유연하다.
반응형
화면의 크기에따라 웹페이지가 변경되는 것이 반응형 웹페이지이다. 일단 모든 CSS파일을 다운받고 미디어 쿼리로 화면 사이즈 변경시마다 반응하는 것이기 때문에 속도가 비교적으로 느리다.
장점
- 여러가지 독립된 템플릿을 제작해야 하는 적응형과 달리 유지 보수가 편리하다.
- 거의 모든 기기에서 렌더링을 할 수 있을만큼 유연하다.
단점
- 일단 모든 컨텐츠를 다운로드 받아야 하기 때문에 리소스가 낭비될 수 있고, 로딩 속도도 상대적으로 느리다.
- 고정된 픽셀값이 아닌
%,vh,vw,rem,em등의 상대 단위를 사용해야 하기 때문에 코드가 복잡해질 수 있다.
Media Query
반응형 웹을 제작하기 위해서는 디바이스 타입이나 뷰포트의 너비 등을 인식해서 화면을 다르게 렌더링해야 하는데 이 때 사용할 수 있는 기술이 media query이다. media query는 미디어 유형이나 미디어 특성 등에 반응하여 웹 스타일을 변경한다.
미디어 유형
media query를 사용하기 위해서는 @media로 시작하고 뒤에는 다룰 디바이스의 타입을 지정한다. print, screen, speech 등의 기기를 설정할 수 있는데 아무것도 지정하지 않으면 default로 all이 되는데 모든 장치에 적용하는 것이다.
all: 모든 장치에 적용print: 프린트 기기screen: 스크린 화면speech: 음성 합성 장치
논리 연산자
media query에도 논리 연산자가 존재한다. and, not , only와 같은 논리 연산자를 사용해서 복잡한 쿼리를 만들 수 있다. and는 미디어 특성이 모두 참일 때만 적용하는 것이고, not은 쿼리가 거짓일 때만 지정한 속성들이 나타나게 한다. only는 구형 브라우저의 오작동을 방지하기 위해서 주로 쓰이는 논리 연산자이다. 전체 쿼리가 참일때만 적용하게 하는 것으로 only를 사용할 때는 디바이스의 타입은 무조건 지정해야 한다. ,를 사용할 수도 있는데 이는 or과 같은 역할을 한다.
미디어 특성
논리 연산자를 작성했다면 그 다음 괄호 안에 max-width나 min-width를 설정해주면 된다. 이 외에도 height, color 등 많은 미디어 특성을 지정할 수 있는데 가장 많이 사용되는 것은 max-width, min-width, orientation(뷰포트의 방향)이다. orientation:landscape는 가로 방향을 의미하는 것이고 orientation:portrait은 세로 방향을 의미하는 것이다.
만약 다음과 같이 코드를 작성한다면
@media all and (max-width:500px){
body{
color:blue;
}
}브레이크 포인트는 다음처럼 설정할 수 있다.
/* 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용) */
@media (max-width: 575px) {...}
/* 가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용) */
@media (min-width: 576px) and (max-width: 767px) {...}
/*태블릿 디바이스 (가로 해상도가 768px보다 크고 991px 보다 작은 화면에 적용) */
@media (min-width: 768px) and (max-width: 991px) {...}
/* 데스크탑 (가로 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용) */
@media (min-width: 992px) and (max-width: 1199px) {...}
/* 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용) */
@media (min-width: 1200px) {...}뷰포트
모바일 웹 제작시 에러가 나는 경우 아래와 같은 코드를 head태그 안에 넣는다.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1, user-scalable=yes, initial-scale=1.0" />name : 메타 태그로 뷰포트 선언
content : 메타 태그 내용
-
width: 컨텐츠를 표현할 넓이 (device-width: 디바이스의 크기) -
initial-scale: 초기 크기 설정 (기본 꽉찬 화면) -
minimum-scale: 최소 크기 설정 (0.25 ~ 10.0) -
maximum-scale: 최대 크기 설정 (0 ~ 10.0) -
user-scalable: 사용자 단말의 확대 기능 사용 유무 (yes/no)
출처
