과거에는 PC로만 인터넷에 접속했기 때문에 웹 사이트 디자인을 할 때 PC의 모니터를 기준으로 했다면 요즘은 PC, 테블릿, 스마트폰 등 다양한 기기들의 출현으로 글씨가 작게 보이는 등의 문제가 발생했다. 그런 이유로 PC버전과 모바일버전의 웹사이트를 따로 제작하게 되면 비용, 시간, 인력이 모두 2배로 들기 때문에 비효율적이다. 그리고 드디어 반응형 웹이라는 기술이 등장했다.
반응형 웹이라는 것은 다양한 기기, 환경마다 최적화된 웹사이트를 제공하는 것을 말한다.
반응형 웹의 장점
1. 유지보수가 간편하다.
- 모바일 버전과 데스크톱 버전을 따로 만들 경우 새로운 내용을 추가하거나 수정할 때 개별적으로 수정하는 반면 반응형 웹에선 한번에 할 수 있다.
2. 모바일 점유율의 증가.
- 모바일로 인터넷에 접속하는 사람들을 위한 모바일화면에 최적화된 화면을 구성할 수 있다.
3. 마케팅에 유리하다.
- 각 기기들에 최적화된 화면을 제공함으로써 웹 사이트에서 보여주고자 하는 내용을 잘 전달할 수 있다.
4. 검색 엔진 최적화가 가능하다.
- 검색 엔진 최적화(SEO, Search Engine Optimize)란, 포털 사이트나 검색 사이트에서 사용자가 특정 키워드로 검색했을 때 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말하는데 데스크톱 전용 웹사이트와 모바일 전용 웹사이트 등으로 사이트가 나눠지면 주소 또한 나눠지게 되고 이런 경우, 검색엔진이 검색 결과를 나타냄에 있어서 불리함을 가진다. 반면에 반응형 웹을 이용하여 웹 사이트를 만들면 하나의 주소만을 사용하게 되어 검색 결과 노출에 유리함을 가지게 된다.
5. 미래 지향적 기술이다.
- 미래에는 테블릿, 스마트폰뿐만 아니라 TV, 냉장고, 내비게이션 등 더 다양한 기기들로 웹 사이트를 접속할 수 있게 될 것이다. 그렇기 때문에 다양한 화면에 최적화가 가능한 반응형 웹 기술이 필수적이다.
반응형 웹의 단점
1. 기획력과 디자인의 어려움
- 기기, 환경마다 최적화된 구조를 설계해야 하기 때문에 제작함에 있어서 조금 더 어렵다.
2. 높은 비용
- PC만 지원하는 웹 사이트 제작보다 더 많은 비용이 발생하며 유지 보수 비용 또한 높다.
반응형 웹을 만들기 위해서는 미디어 쿼리가 필요하다.
미디어 쿼리는 CSS3부터 지원되는 기술로 미디어 타입, 화면 크기 등을 기준으로 다른 스타일 시트를 적용시켜 주며 이를 이용하여 화면 크기가 달라질 때 스타일을 바꿀 수 있고 반응형 웹을 만들 수 있다.
'Web development > HTML & CSS' 카테고리의 다른 글
| window.open() 을 이용한 팝업 및 오늘 하루 열지 않기 (1) | 2017.12.25 |
|---|---|
| 모달(레이어)팝업 및 오늘 하루 열지 않기 (0) | 2017.12.25 |
| 11가지 한글 구글 폰트 (0) | 2017.09.30 |
| CSS 속성 선택자, 가상 클래스 종류,정리,요약하기 (0) | 2017.08.12 |
| CSS 선택자(selector) 종류 정리 요약 (0) | 2017.07.26 |
