CSS : 반응형 웹(Responsive Web) > HTML,CSS,레이아웃

본문 바로가기

검색취소

CSS : 반응형 웹(Responsive Web)

검색 다음 목록

본문

 

CSS : 반응형 웹(Responsive Web)

CSS : 반응형 웹(Responsive Web)

태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다.

 

반응형 웹(Responsive Web)

그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이죠. 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공합니다.

jsseo-140329-CSS-01-1

반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트입니다. 모바일 퍼스트는 웹 디자인을 할때,  PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법입니다. 이 개념은 앞서 말했 듯 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐습니다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있습니다. 모바일의 제약은 크게 세가지로 나눌 수있습니다.

  1.  모바일 기기의 스크린 크기
  2. 네트워크 속도 및 품질
  3. 사용하는 모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단합니다.  불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타냅니다. 그리고  사용자들에게 사용하기 편하고 작업을 빠르게 처리할수 있는 웹을 제공 합니다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫 화면부터 컨텐츠를 보여주는 것입니다.

반응형 웹은 고 사양(고 해상도)웹이 저 사양(저 해상도) 모바일 기기에서도 불편함이 없이 구현이 되는데 초점이 맞춰져 있습니다. 주로  레이아웃과 스타일 변화에 초점을 맞추어서 진행이 됩니다. 하지만,  레이아웃과 스타일 보다는 웹 컨텐츠를 모바일 퍼스트 관점으로 재구성하는 반응형 웹도 있습니다.  이는 사용자가 사용하는 기능에 대해 연구하고 사용자가 필요로하는 기능을 중심으로 우선순위를 둬서 제공합니다.  반응형 웹의 최종형은 위 두가지를 섞어놓아 모든 기기에서 사용사자 원하는 컨텐츠를 보기좋게 제공하는 것 이라고 생각합니다.

 

미디어 쿼리(Media Query)

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했습니다. 하지만 미디어 타입만으로는 해당 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지 않았습니다. CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다.

미디어 쿼리를 적용하는 방법은 다음과 같습니다.

미디어 쿼리 적용법
1) <link>
<link>태그는 <head>태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 CSS파일을 불러옵니다.

2) <style>
<style>태그는 <head>태그 안에 위치하여  media 속성 안 조건에 만족 할 때 스타일을 적용 시킵니다.

3) <style> – @import
<style>태그 안에서 @import를 사용하여 뒷 부분의 미디어 쿼리를 만족 할 때 해당 CSS파일을 불러옵니다.

4) CSS파일
불러온 CSS파일 안 혹은 <style>태그 안에서 직접 미디어 쿼리를 작성하여 만족할 때 해당 스타일을 적용 시킵니다.

media속성이 뭔지, 또는 미디어 쿼리의 문법이 무엇인지 궁금하셨을텐데요. 미디어 쿼리의 문법은 다음과 같습니다.

 

미디어 쿼리 문법

jsseo-140329-CSS-02

only | not의 위치에는 말 그대로 only키워드 또는 not키워드가 들어가게 되는데 only키워드는 뒤의 조건 만, not키워드는 뒤의 조건을 제외한 조건을 뜻 합니다.  미디어 쿼리를 지원하지 않는 브라우저는 only키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할경우 적어주는 것이 좋습니다.

미디어 타입의 종류는 다음과 같습니다.

  • all : 모든 미디어 타입
  • aural : 음성 합성장치
  • braille : 점자 표시 장치
  • handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
  • print : 인쇄 용도
  • projection : 프로젝터
  • screen : 컴퓨터 스크린
  • tty : 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치등 고정 된 글자를 사용하는 미디어
  • tv : 음성과 영상이 동시 출력 되는 장치
  • embrossed : 페이지에 인쇄된 점자 표지 장치

위 타입에서 실제로 많이 쓰이는 미디어 타입은 all과 screen, print 입니다 . screen의 경우 대부분의 컴퓨터와 모바일 기기를 뜻합니다. handheld를 모바일 기기로 생각하시는 분들도 계시겠지만 모바일 기기는 handheld가 아닌 screen이라는 것을 꼭 확인 하셔야합니다. 위 문법에서 미디어 타입은 한 가지만 들어올 수 있는 것이 아닙니다. 쉼표(,)를 통해서 미디어 타입을 나열하면 나열한 모든 미디어 타입을 뜻합니다.

미디어 쿼리문의 속성과 속성 값은 다음과 같습니다.

  • width : 웹페이지의 가로 길이를 판단합니다.
  • height : 웹페이지의 세로 길이를 판단합니다.
  • device-width : 단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가로 길이를 판단합니다.
  • device-height : 단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세로 길이를 판단합니다.
  • orientation :  width와 height을 구하여 width 값이 길면 landscape로, height 값이 길면 portrait로 판단합니다.
  • aspect-ratio : width/height 비율을 판단합니다.
  • device-aspect-ratio : 단말기의 물리적인 화면 비율을 판단합니다.
  • color-index : 단말기에서 사용하는 최대 색상수를 판단합니다.
  • monochrom : 흑백 컬러만을 사용하는 단말기에서 흰색과 검은색 사이의 단계를 판단합니다.
  • resolution : 지원하는 해상도를 판단합니다. 값으로 dip(인치당 도트 수)나 dpcm(cm당 도트 수)를 사용합니다.
  • color : 단말기에서 사용하는 최대 색상 수의 비트 수를 판단합니다. 자연수를 쓰지만  2의 지수를 뜻합니다.예: 1 은 2 , 2는 4 , 3은 8…

미디어 쿼리 속성은 프로그래밍 언어와같이 =, >, < 등의 연산자를 사용하지 않으며 속성 명 앞에 min- 또는 max- 를 붙여서 최솟 값 , 최댓 값을 판단합니다. 속성은 and (속성 : 속성 값) and (속성 : 속성 값)으로 나열 할 수 있으며 min- max-를 이용 할 경우 범위로도 설정이 가능합니다. resolution  같은 기능이 필요한 이유는 아이폰3 와 아이폰 4같이 화면의 크기는 같지만 지원하는 해상도가 다른 기기의 경우를 판단할 때 쓰면 좋습니다.

jsseo-140329-CSS-03

추천 0

등록된 댓글이 없습니다.

검색취소

HTML,CSS,레이아웃

검색
  • no image
  • CSS : 반응형 웹(Responsive Web)

     CSS : 반응형 웹(Responsive Web)Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많…

  • no image
  • CSS 글 자간 줄간 설정방법

    CSS 글 자간 줄간 설정방법 글 꼴의 종류와 크기를 결정했다면, 볼드/이텔릭과 같은 글꼴의 장식 및 자간, 줄간 들여쓰기와 같은 문단 편집기능에 대하여 살펴봅니다. 몇몇 기능은 브라우저에 따라, 적용/미적용 여부가…

  • #5cf039 헥스 색상 코드
  • #5cf039 헥스 색상 코드

    첨부파일

    #5cf039 정보 반전#a30fc625% 포화도#52ff2a그레이스케일#949494 25% 밝게#94f57e원본#5cf03925% 어둡게#34cf0f lawngreen#7cfc0025% 포화도 저하#6ad94f웹 …

  • CSS 레이아웃... Copy & Paste
  • CSS 레이아웃... Copy & Paste

    첨부파일

    오랜만에 그냥 팁 하나! CSS 레이아웃이 익숙치 않은 나 같은 분을 위한 친절한 사이트.. Copy & Paste를 해도 걱정 없다.Dynamic Drive CSS Layouts via Ajaxian 덤으로 왼쪽 …

  • XHTML+CSS 레이아웃 디자인 예제
  • XHTML CSS 레이아웃 디자인 예제

    첨부파일

    XHTML과 CSS로 레이아웃 디자인을 할 때 많이 쓰이는 레이아웃 디자인 템플릿을 모아둔 싸이트가 있다.http://www.intensivstation.ch/en/templates/일반적으로 사용되는 웬만한 레이아…

  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기
  • CSS 레이아웃 - Float 속성을 이용한 레이아웃 만들기

    *예전에 작성했던 강좌의 마지막 부분입니다. CSS를 통해 이전 강좌에서 작성한 마크업에 모양새를 입히기 전에 한 번 복습 하는 의미로 참고하면 좋겠네요 float 속성이번 시간에는 css를 통해 레이아우팅을 할 때…

?>