|
반응형 웹디자인 모바일 테블릿, 데스크탑 등 다양한 장치들이 생겨 나면서 이를 하나의 웹으로 다양한 환경의 사용자들이 사용할 수 있게 제공하는것이 목적.
반응형 웹디자인을 위해서는 레이아웃을 유동적으로 제작해야 한다. 상대적으로 (% 이용) 지정하여 브라우저의 width 값에 따라 유동적으로 변화하게 만들어야 한다.
반응형 웹의 가장 핵심포인트는 미디어쿼리(media query)를 사용해야 하는데 미디어쿼리는 css3 속성으로서 지원되는 브라우저는 IE9이상, 파이어폭스, 오페라, 사파리, 크롬등이 있다.
IE9 이하를 위한 설정
IE9 이전버전에서는 CSS3 미지어 쿼리를 지원 않는다. IE6~IE8을 비롯한 구식 브라우져에서 미디어 쿼리가 작동하길 원한다면, respond.js나 css3-mediaqueries.js 등의 javascript를 이용하면 된다.
- respond.js - - <!--[if lt IE 9]>
- <script type="text/javascript" src="/path/to/respond.js"></script>
- <![endif]-->
- css3-mediaqueries.js - - <!--[if lt IE 9]>
- <script type="text/javascript" src="/path/to/css3-mediaqueries.js"></script>
- <![endif]-->
- 두 js의 차이점 - - 두 js가 공통적으로 처리하는 경우 1. width를 제외한 min, max, min+max 처리 2. em, px 수치 처리 3. 윈도우 크기 변경시 처리 4, 별도의 css 화일 처리
- 두 js 공통적으로 처리하지 못하는 경우 1. 조건적 외부 css 화일 연결 (<link media=’screen and …/> 2. @import
- css3-mediaqueries.js 는 처리하지만, respond.js 는 안되는 경우 1. 페이지에 포함된 <style>...</style> 처리 - jquery를 필요로 하는 respond.js (4kb)가 css3-mediaqueries.js (15kb) 보다 가볍지만, jquery의 on load 이벤트와 충돌할 가능성이 있어서 맨 마지막에 추가
미디어쿼리 사용예
외부 파일을 사용하는 방법 <link rel="stylesheet" media="screen and (min-width:200px)" href="mobile.css" /> <style> 태그를 이용하는 방법 <style type="text/css" media="screen and (min-width:200px)"> body {background-color:#0f0;} </style> CSS 파일내에서 사용하는 방법 <style type="text/css"> @media screen and (min-width:200px) { body {background-color:#0f0;} } </style>
@media (조건문) {실행문} @media (max-width:799px) { ... css for mobile ... } /* 이 코드는 799px 이하의 해상도에서 해석 됩니다. */ @media (min-width:800px) { ... css for mobile ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다. */
CSS 코드 내부에서 분기하는 방법
@media olny all and (조건문) {실행문}
@media : 미디어쿼리 시작 선언 @media, only, all, and, (조건문) 사이의 공백은 필수olny : 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략가능(기본값은 only) all : 미디어쿼리를 해석해야 할 대상 미디어를 선언. all이면 모든 미디어가 이 구문을 해석해야 함. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수 있다. all 키워드는 생략가능하고 생략했을 때 기본값을 (all). 이밖에도 다양한 미디어타입(all, aural, braille, embossed, hanheld, print, profection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 많이 쓴다. and : 논리적으로 'AND' 연산을 수행하여 앞과 뒤의 조건을 모두 만적해야 한다는 것을 의미. 조건이 유일하거나 또는 only, all과 같은 선행키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마' ','기호를 사용하며 'OR' 연산을 수행한다. 'OR' 연산은 나열된 조건문 중에서 하나만 참이어도 {실행문}을 해석한다. (조건문) : 브라우저는 조건문이 참일 때 {실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두가지 이상 등장할 수 있다. 둘 이상의 조건문은 'and' 키워드 또는 콤마 ',' 기호로 연결해야 한다. {실행문} : 일반적으로 css 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일 때 실행문 안쪽에 있는 css코드 해석
CSS 코드 외부에서 분기하는 방법
조건문에 따라 별도의 외부 css 파일을 참조하여 분기하는 방법으로 이 방식은 성능 최적화 측면에서 권장하지 않는다. <link rel="stylesheet" type="text/css" media="all and (조건A)" href="A.css"> <link rel="stylesheet" type="text/css" media="all and (조건B)" href="A.css">
데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창 크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두번 발생시켜 이 페이지를 처음 로딩한 사용자에게는 성능저하의 원인이 된다. css 파일은 하나로 병합하고 css 코드 내부에서 조건 분기하는 방식을 권장한다.
조건문이 될 수 잇는 특징들
width / height
뷰포트의 너비와 높이, 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹구현시 가장 일반적으로 사용하는 조건이 된다.
ㆍValue : <lenth> ㆍApplies to : visual and tactile media types ㆍAccepts men/max prefixes : yes
@media all and (min-width:768px) and (max-width:1024px) { ... } // 뷰포트 너비가 768px 이상 '그리고' 1024px 이하면 실행
@media all and (width:768px), (width:1024px) { ...} // 뷰포트 너비가 768px 이거나 '또는' 1024px 이면 실행
@media not all and (min-width:768px) and (max-width:1024px) { ... } // 뷰포트 너비가 768px 이상 '그리고' 1024px 이하가 '아니면' 실행
device-width / device-height
스크린의 너비와 높이, 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트보다 크다.
ㆍValue : <lenth> ㆍApplies to : visual and tactile media types ㆍAccepts men/max prefixes : yes
@media all and (device-width:320px) and (device-height:480px) { ... } // 스크린 너비가 320px '그리고' 높이가 480px 이면 실행
@media all and (min-device-width:320px) and (min-device-height:480px) { ...} // 스크린 너비가 320px 이상 '그리고' 높이가 최소 480px 이상이면 실행
orientation 뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.
ㆍValue : <lenth> ㆍApplies to : visual and tactile media types ㆍAccepts men/max prefixes : yes
@madia all and (orientation : portrait) { ... } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행 @media all and (orientation : landscape) { ... } // 가로 모드. 뷰포트의 너비가 높이 비해 상대적으로 크면 실행
aspect-ratio 뷰포트의 너비와 높이에 대한 비율. '너비/높이' 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 배율을 정할 수 있다.
ㆍValue : <lenth> ㆍApplies to : visual and tactile media types ㆍAccepts men/max prefixes : yes
@madia all and (device-aspect-ratio : 5/4) { ... } // 스크린 너비가 5, 높이가 4 비율이면 실행
@media all and (min-device-aspect-ratio : 5/4) { ... } // 스크린 너비가 5/4 비율 이상이면 실행
@media all and (max-device-aspect-ratio : 5/4) { ... } // 스크린 너비가 5/4 비율 이하면 실행
color 출력 장치에 대한 색상에 대한 비트 수, 출력 장치가 컬러가 아닌 경우 '0'의 값에 대응한다.
ㆍValue : <lenth> ㆍApplies to : visual and tactile media types ㆍAccepts men/max prefixes : yes
@media all and (color) { ... } // 출력장치가 컬러를 지원하면 실행
@media all and (color : 0) { ... } // 출력장치가 컬러가 아니면 실행
@media all and (color : 8) { ... } // 출력장치가 8비트 색상이면 실행
@media all and (min-color : 8) { ... } // 출력장치가 8비트 이상 색상이면 실행
@media all and (max-color : 8) { ... } // 출력장치가 8비트 이하 색상이면 실행
미디어쿼리 속성
⊙ width 1. viewport의(스크롤바를 포함한) 가로 길이. 가로 해상도. 2. 값; 길이 (px, em, ....)
⊙ height 1. viewport의(스크롤바 포함) 세로 길이. 세로 해상도. 2. 값; 길이 (px, em, ....)
⊙ device-width 1. 실제 기기 스크린의 세로 길이 , 단말기의 너비 2. 값; 길이 (px, em.....) ⊙ device-height 1. 실제 기기 스크린의 세로 길이 . 단말기의 높이 2. 값; 길이 (px, em.....)
※ 'width'와 'device-width'의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, 'device-width' 는 320px이고, 'width'는 640px 입니다.
⊙ orientation 1. 지면을 향한 기기의 방향(세로보기, 가로보기) 2. 값; 'portrait' 또는 'landscape' ⊙ aspect-ratio 1. 기기의 width와 height의 비율. 2, 값; ratio (예 16/9) ⊙ device-aspect-ratio 1. 기기의 device-width와 device-height의 비율. 2. 값; ratio (예 16/9) ⊙ color 1. 색상 비트수
⊙ color-index 1. 색상 테이블 엔트리 수
⊙ monochrome 1. 모노크롬 프레임 버퍼의 픽셀당 비트수 ⊙ resolution 1. 기기의 픽셀 덴시티 정보, 화면 해상도 2. 값; 해상도 dpi 또는 dpcm ⊙ scan 1. TV의 스캔방 식
⊙ grid 1. 그리드 / 비트맵 방식 여부
|
;)
게 시 판
현재 접속자 현황
김경훈 (admin)
