반응형 웹(responsive web)
반응형 웹이란 하나의 웹사이트로 데스크탑 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지이다.
미디어 쿼리는 CSS3부터 지원되는 CSS기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용할 수 있도록 해준다. 이를 이용해서 화면 크기가 변할 때 스타일이 바뀌도록 반응형 웹을 구현할 수 있다.
모바일 웹을 작성하게 되면 뷰포트(viewport)라는 것을 고려하게 된다. 뷰포트는 웹페이지가 사용자에게 보여지는 영역을 말한다. 데스크탑 PC에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다 보여지지 않고 스크롤해서 봐야 되는 경우가 있다. 이때도 브라우저에 보여지는 부분이 뷰포트이다. 데스크탑 PC는 브라우저의 크기를 바꿔서 뷰포트의 크기를 바꿀 수 있는 것이다.
뷰포트(viewport)
뷰포트 <meta>태그를 사용하면 모바일 기기에서 실제 랜더링되는 영역과 뷰포트의 크기를 조절할 수 있다. 아래는 가장 일반적으로 사용되는 설정이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">-
width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정. 즉, 렌더링 영역을 기기의 뷰포트의 크기와 같게 만들어 준다.
-
initial-scale=1.0 : 처음 페이지 로딩시 확대/축소가 되지 않은 원래 크기를 사용하도록 한다. 0~10 사이의 값을 가진다.
이 외에도 다음과 같은 값을 지정할 수 있다.
-
minimum-scale : 줄일 수 있는 최소 크기를 지정한다. 0~10 사이의 값을 가진다.
-
maximum-scale : 늘릴 수 있는 최대 크기를 지정한다. 0~10 사이의 값을 가진다.
-
user-scalable : yes 또는 no 값을 가지며 사용자가 화면을 확대/축소 할 수 있는지를 지정한다.
미디어 쿼리
미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다.
미디어 쿼리는 두 가지 방법으로 사용할 수 있다.
<link>요소에 사용하여 특성이 조건에 맞을때 css 파일을 불러온다.
media속성의screen and (max-width: 768px)의 의미는 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것이다. 그러므로 화면의 너비 768px 이하 일때가 적용된다.
<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />- 스타일 시트내에서
@media를 사용한다. 위와 동일한 조건이고, 그 조건이 맞으면 {...} 안의 스타일이 적용된다.
@media screen and (max-width: 768px) {
body {
background-color: lightgreen;
}
}@media (max-width: 768px) {...} 처럼 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용된다.
미디어 타입에 사용되는 값으로는 여러종류가 있지만 웹 사이트를 만드는데는 screen을 사용하거나 all 을 사용하는것이 일반적이다.
미디어 특성에서 max-width 와 min-width 가 가장 일반적으로 쓰인다. 그외 height, color, orientation(화면의 가로 세로 방향) 등이 있다.
반응형 웹을 만들때 스타일을 작성하는 기준으로 모바일을 우선할것인지, 데스크탑을 우선할 것인지가 먼저 고려해야 한다.
- 모바일을 우선으로 할 경우
/* 모바일에 적용될 스타일을 먼저 작성합니다. */
@media screen and (min-width: 769px) {
/* 데스크탑에서 사용될 스타일을 여기에 작성합니다. */
}- 데스크탑을 우선으로 할 경우
/* 데스크탑에서 사용될 스타일을 먼저 작성합니다. */
@media screen and (max-width: 768px) {
/* 모바일에 사용될 스트일 시트를 여기에 작성합니다. */
}출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]
