반응형 웹
반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다. 사이트를 이루는 소스 코드는 하나지만 접속하는 스크린 크기에 따라 레이아웃을 유동적으로 보여줄 수 있다.
테스크톱, 태블릿, 스마트폰 등 다양한 전자기기로 웹에 접속을 할 수 있게 되면서 여러 가지 버전의 웹페이지를 만들어야하는 경우가 발생하게 되었고 반응형 웹페이지가 탄생하게 되었다. 반응형 웹에는 사용자 경험을 디자인할 때 모바일일 경우를 최우선으로 초점을 맞춰서 디자인하는 모바일 퍼스트(mobile first)라는 개념이 있다.
반응형 웹의 특징과 장단점
반응형 웹의 특징
반응형 웹 디자인은 유연한 레이아웃으로 다양한 스크린 사이즈의 디바이스에 적응할 수 있으며 하나의 URL을 기반으로 화면이 바뀐다. 모바일로 연결되는 별도의 URL(도메인 앞에 "m"이 붙음)이 있는 경우에는 반응형 웹이라고 할 수 없다.
반응형 웹의 장점
- 효율적인 유지보수
하나의 HTML 소스가 있으므로 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰서 수정이 가능하므로 유지보수에 효율적이며 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다. - 검색엔진(SEO) 최적화에 유리
검색엔진 최적화에 유리하며 하나의 URL로 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다
반응형 웹의 단점
- 사이트의 속도 저하
모바일을 전용으로 하는 사이트보다 반응형 웹은 읽어야할 소스가 많을 수 있어 불필요한 데이터 소비를 하게 되면 사이트 속도가 저하될 수 있다. 사용하지 않는 자원을 전송받거나 사용되는 이미지보다 큰 이미지를 사용할 수 있다. - 웹브라우저 호환성 문제
웹 브라우저는 스펙 및 사양이 각각 다르므로 어떤 웹 브라우저에서는 잘 반응하지만 다른 웹 브라우저에서 디자인이 깨지는 문제가 발생할 수 있다. 디자인의 자유도가 떨어지며 100%에 맞는 디자인이 어렵다는 부분이 발생한다.
미디어 쿼리
미디어 쿼리는 반응형 웹 디자인에서 중요한 역할을 하는 도구이다. 웹사이트 뷰포트(브라우저 창)의 크기에 따라 다른 스타일이나 레이아웃을 적용하여 사용자 경험을 최적화할 수 있다.
미디어 쿼리 적용법
HTML 파일 태그 안에 적용
1. CSS 파일을 적용하던 것처럼 HTML 파일의 태그 안에 태그를 적용한다. 미디어 속성을 사용하여 미디어 속성내 해당 조건을 만족할 때만 해당 css 파일을 불러오게 된다.
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">- HTML 파일 내 태그 안에서
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* css 작성 */
</style>CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
CSS 파일이나 태그 안에서 미디어 쿼리를 작성하여 해당 미디어 쿼리의 조건을 만족할 때 스타일을 적용시키는 방법이다
- 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.
- 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
- CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 해당하는 경우 스타일이 적용된다.
@media 미디어 타입 (조건(너비 및 높이)) {
(CSS 입력)
}
--예제
@media screen (max-width: 400px) {
body {
width: 300px;
}
}미디어 타입(Media Type)
미디어 타임에는 all(모든 미디어 타입), print(프린터), screen(컴퓨터 화면), speech(스크린 리더) 외 다양한 타입이 있으며 화면을 출력하는 디스플레이가 있는 미디어들은 보통 screen 타입에 속한다.
조건(너비 및 높이)
반응형 디자인을 만들 때 가장 많이 사용하는 기능은 뷰포트 너비이다. min-widht, max-width, width 등으로 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용한다. min- 이나 max- 를 붙이면 최소값인지 최대값인지 표시할 수 있다.
@media screen and (width: 1200px) {
body {
font-size : 14px;
}
}@media screen and (max-width: 400px) {
body {
color: orange;
}방향성
orientation으로 세로 모드인지 가로 모드인지 검사한 후에 CSS 스타일을 적용할 수 있다.
// 장치가 가로인 경우
@media (orientation: landscape) {
body {
color: beige;
}
}논리곱(and) 미디어 쿼리
and를 사용하여 미디어 기능을 합칠 수 있다.
//뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: yellow;
}
}논리합(or) 미디어 쿼리
콤마로 분리하며 조건 중에 한가지만 만족해도 CSS 스타일을 적용할 수 있다.
//뷰포트의 너비가 600px이상이거나, 장치가 가로 방향인 경우
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
font-size: 10px;
}
}부정(not) 미디어 쿼리
not 연산자를 사용하면 반대로 적용할 수 있다.
//세로인 경우
@media not all and (orientation: landscape) {
body {
color: green;
}
}