CSS 형식화 류관희
1. CSS 란? 위키피디아에서는 CSS(Cascading Style Sheets) 는 ' 마크업언어로작성된문서 ( 모양과서식 ) 를표현하기위한스타일시트언어 ' 라고정의하고있다. HTML, XHTML 로작성된웹페이지에스타일을추가하기위해서사용되는가장일반적인응용프로그램이다. CSS 는일반 XML, SVG 와 XUL 를포함하는다양한 XML 문서에도적용할수있다. 2
2. CSS3 에서변경된사항 CSS 레벨 1 CSS1 사양서에서정의된모든특성들을포함하여정의되지만, CSS2.1 사양서에서정의된문법과정의들도포함된다. CSS 레벨 2 CSS2 사양서가비록만들어졌지만, W3C 의후보추천단계이전의권장단계로통과되었다. 이후보다나은 CSS2 가되기위해서 CSS2 사양서에대한많은문제점들을리뷰하였지만, 더이상확장하기어려운점이있어서 CSS 레벨 2 리비전 1(CSS2.1) 을새로정의하였다. 3
2. CSS3 에서변경된사항 레벨 2 에서의프로세스모델은다음과같다. 원본문서를구문분석하고문서트리를작성한다. 타겟미디어유형을식별한다. 대상에대해지정된문서와관련된모든스타일시트를검색한다. 문서트리의엘리먼트에단일값을할당하여문서트리의모든요소를주석속성대상에적용한다. 주석문서트리에서형식구조를생성한다. 대상매체에서식구조를전송한다. 4
2. CSS3 에서변경된사항 CSS 레벨 3 CSS 레벨 3 은 CSS 레벨 2 의모듈들을사용하여만들어졌다. 레벨 3 의핵심으로는 CSS 2.1 사양이적용되었다. CSS3 가제공하는새로운특성들은다음과같다. 셀렉터 (Selector) 색과불투명 다양한백그라운드 보다향상된레이아웃 : multi-column, grid 텍스트 : word wrap, shadow, @font-face 박스와경계 : radius, image, shadow 변형 미디어쿼리 (Media queries) 스피치 (Speech) 5
2. CSS3 에서변경된사항 CSS3 가지원하는페이지미디어포맷팅모델에서문서는하나또는여러개의페이지박스로변형된다. 페이지박스는종이에서의페이지와마찬가지로사각형의프린트미디어로매핑되는특정 CSS 박스이다. 이페이지모델은다른 CSS 페이지와마찬가지로마진 (Margin), 경계 (Border), 패딩 (Padding), 컨텐츠영역 (areas) 을가진다. 6
2. CSS3 에서변경된사항 CSS3 의페이지모델을지원하기위해서각영역별설정은다음과같이한다. 7
2. CSS3 에서변경된사항 CSS3 는웹브라우저보다도그안에서사용되는엔진에의해서 CSS 의버전별지원여부가달라진다. 8
2. CSS3 에서변경된사항 각레이아웃엔진별 CSS 레벨및문법지원상황은다음과같다. 9
3.1 레이아웃의단위 CSS 에서주로사용하는레이아웃의측정단위는아래와같다. W3C 표준에서는 0 을제외하고는항상단위를명시하도록권장하고있으며, 대부분의브라우저에서는단위를사용하지않으면자동으로 px 단위로인식하여렌더링을하게된다. em(em-height) : 1em 은현재 font size 와동일하며, 2em 은 1em 의 2 배크기를의미한다. %(percentage) : em 과유사하게지정되거나상속받은엘리먼트의상대적인백분율크기를의미한다. pt(point) : 1pt 는 0.72inch 와동일한절대크기이다. px(pixel) : 화면해상도를측정하는 dot 단위와동일하다. 10
3.1 레이아웃의단위 가장많이사용되는단위인 em, px, % 의장단점비교 11
3.2 레이아웃기본구성 마우스가위치할대상텍스트는 'text-align' 을사용하여가운데정렬하도록하고, 대상텍스트에대한데코레이션 (Decoration) 은적용하지않도록설정한다. 12
3.2 레이아웃기본구성 기본적인레이아웃중하나로왼쪽과오른쪽을구분해서작성한다. 2 단칼럼에서는좌 / 우만을구분하였지만, 2 단칼럼으로확장할경우에는좌 / 우에중간박스가하나더추가되는경우를생각하면된다. 13
3.2 레이아웃기본구성 하나의커다란사각형이존재하고그안에작은사각형이다시존재한다. 메인메뉴와다시서브메뉴로구성된다. 14
4. CSS3 셀렉터 CSS 에서셀렉터는스타일을적용할마크업엘리먼트 ( 요소 ) 들을선언하기위해서사용한다. 스타일은일련의규칙들로구성되어있는데, 각규칙이나규칙세트들은하나이상의셀렉터와선언블록으로구성되어있다. 선언블록은다시속성 (Property) 과값으로구성된다 15
4. CSS3 셀렉터 유니버설셀렉터 (Universal Selectors) * : 유니버설셀렉터는모든엘리먼트 ( 요소 ) 를대상으로하는셀렉터이다. 타입셀렉터 (Type Selectors) E : 타입셀렉터는가장단순한셀렉터로엘리먼트명을지정하여 그엘리먼트에스타일을적용한다. 속성셀렉터 (Attribute Selectors) E[foo] : 어떤엘리먼트중에서지정한속성을가지고있는엘리먼트에대해서만스타일을적용시킨다. E[foo="bar"] : 지정한속성명과속성값이동일한엘리먼트에대해서만스타일을적용시킨다. 16
4. CSS3 셀렉터 속성셀렉터 (Attribute Selectors) E[foo~="bar"] : 지정한속성명과속성값을포함하고있는여러엘리먼트에대해서만스타일을적용시킨다. E[foo^="bar"] : 지정한속성명과속성값으로시작하는엘리먼트에대해서만스타일을적용시킨다. E[foo$="bar"] : 지정한속성명과속성값으로끝나는엘리먼트에대해서만스타일을적용시킨다. E[foo*="bar"] : 지정한속성명과속성값을포함한엘리먼트에대해서만스타일을적용시킨다. E[hreflang ="en"] : "en" 으로시작하는값을가진 E 를선택하고스타일을적용시킨다. 17
4. CSS3 셀렉터 유사요소 (pseudo-element) E::first-line : 엘리먼트의 ' 첫번째 ' 행에스타일을적용시키며, 블록엘리먼트에만적용된다. E::first-letter : 엘리먼트의제일 ' 첫번째 ' 문자에스타일을적용시키며, 첫번째문자가특수문자인경우에는그다음문자와함께 스타일이적용된다. E::selection : ' 선택 ' 한부분에스타일을적용시킨다. E::before : 엘리먼트의포함된내용 ' 앞 ' 에내용을생성시킨다. E::after : 엘리먼트의포함된내용 ' 뒤 ' 에내용을생성시킨다. 18
4. CSS3 셀렉터 부정유사클래스 (Negation pseudo-classes) E:not(s) : 엘리먼트중에서 "s" 가 ' 아닌 ' 것에스타일을적용시킨다. 자손셀렉터 (Descendant combinator) E F : 부모엘리먼트에포함된모든자식엘리먼트에대해서스타일을 적용시킨다. 유사클래스 (Structural pseudo-classes) E:root : 문서내부의루트 (Root) 엘리먼트에대해서스타일을적용시킨다. E:nth-child(n) : 부모엘리먼트의 'n 번째 ' 자식엘리먼트에스타일을 적용시킨다. E:nth-last-child(n) : 부모엘리먼트의 ' 마지막 ' 으로부터 'n 번째 ' 자식 엘리먼트에스타일을적용시킨다. 19
4. CSS3 셀렉터 유사클래스 (Structural pseudo-classes) E:nth-of-type(n) : 부모엘리먼트의형제관계인 'n 번째 ' 엘리먼트에스타일을 적용시킨다. E:nth-last-of-type(n) : 부모엘리먼트의 ' 마지막 ' 으로부터형제관계인 'n 번째 ' 엘리먼트에스타일을적용시킨다. E:first-child : 부모엘리먼트의 ' 첫번째 ' 엘리먼트에스타일을적용시킨다. E:last-child : 부모엘리먼트의 ' 마지막 ' 엘리먼트에스타일을적용시킨다. 20
4. CSS3 셀렉터 유사클래스 (Structural pseudo-classes) E:first-of-type : 부모엘리먼트의형제관계의같은이름을가지고있는 ' 첫번째 ' 엘리먼트에스타일을적용시킨다. E:last-of-type : 부모엘리먼트의형제관계의같은이름을가지고있는 ' 마지막 ' 엘리먼트에스타일을적용시킨다. E:only-of-type : 부모엘리먼트안에 ' 유일한 ' 엘리먼트에스타일을 적용시킨다. E:empty : 자식엘리먼트를 ' 전혀가지고있지않은 ' 엘리먼트에스타일을 적용시킨다. 21
4. CSS3 셀렉터 링크유사클래스 (The link pseudo-classes) E:link : 사용자가아직 ' 방문하지않은 ' 링크에스타일을적용시킨다. E:visited : 사용자가 ' 방문하였던 ' 링크에스타일을적용시킨다. 유저액션유사클래스 (The user action pseudo-classes) E:active : 마우스를클릭하고버튼에서손을떼었을때와같이대상 엘리먼트가활성화되었을때스타일을적용시킨다. E:hover : 롤 - 오버와같은상황일때와같이대상엘리먼트가가리켜지고있을때스타일을적용시킨다. E:focus : 대상엘리먼트가포커스되었을때스타일을적용시킨다. 22
4. CSS3 셀렉터 타켓유사클래스 (The target pseudo-classes) E:target : URI 에앵커링크가지정되어있는링크가활성화되었을때스타일을 적용시킨다. 23
5.1 박스 (Box) 박스자르기 CSS3 에서는박스지원을위해서다음과같은 2 개의속성을지원한다. overflow-x:{value}; overflow-y:{value}; 속성 'overflow-x' 는컨텐츠영역이오버플로우되었을때, div 엘리먼트내의컨텐츠가오른쪽 / 왼쪽부분을잘라내는역할을수행한다. {value} 가 'visible' 이면컨텐츠는영역을벗어나더라도자르지않고그대로보여주지만, 'hidden' 이면넘어간만큼을안보여주며스크롤링이적용되지않는다. 24
5.1 박스 (Box) 중앙에위치시키기 박스속성중 'box-align' 과 'box-pack' 을사용하여자식엘리먼트를중앙에위치시킬수있다. 25
5.1 박스 (Box) 단어역순으로배열하기 개발자는박스안의단어들을역순서대로사용할수도있다. 속성 'box-direction:reverse;' 을사용하면된다. W3C 표준대로사용할경우에는위에서 '-webkit-' 을생략하면된다. 수평 / 수직배열하기 박스안의글자를수평으로배열할것인지아니면수직으로배열할것인지는속성 'box-orient:{value}' 에의해서결정할수있다. {value} 가 'horizontal' 이면수평으로, 'vertical' 이면수직으로배열된다. 다음의예제에서는수직으로배열해보도록한다. 26
5.2 둥근모서리처리 (border-radius) CSS 에서는둥근모서리를처리하는것이힘든일이었지만, CSS3 에서는 'border-radius' 속성을이용하면쉽게둥근모서리를만들수있다. 다음은자동으로둥근모서리를생성해주고 px 값을얼마만큼변경시켜주어야하는지를한눈에파악할수있도록해주는사이트 (http://borderradius.com/) 에서값 20px 을입력하고얻은결과이다. 27
5.2 둥근모서리처리 (border-radius) 만약사각형의왼쪽, 오른쪽, 위, 아래의경계선을다르게설정하고싶다면다음과같이설정하도록한다. 28
5.2 둥근모서리처리 (border-radius) 경계선을좀더꾸며보기위해경계선에색을입혀보자. 속성 'border-color' 를사용하면색을적용할수있다. 다음의예제에서는파란점선과녹색실선을구현하였다. 29
5.3.1 백그라운드색상처리 백그라운드색상은 'background-color' 를사용해서변경할수있다. 다음의예제에서는파란색 'blue' 를사용했으며, 이를노란색으로변경하고싶다면 'yellow' 로설정하면된다. 물론색번호나 RGB 조합값을직접입력해도가능하다. 30
5.3.2 색불투명도처리 색의불투명도를조절하기위해서 'opacity' 를사용할수있다. 이값을 0.0 과 1.0 의범위안에서변경하여색의불투명도를조절할수있다. 31
5.3.3 그라디언트처리 색상을하나의색으로지정하더라도그색을변화시켜표현할수도있는데이를위해속성 'gradient' 가사용된다. 이그라디언트 (gradient) 속성은주요브라우저들이지원하지만, 속성명을각브라우저마다다르게지원하고있어사용자가어떠한브라우저를사용하는지에대해고려하고사용해야만한다. 웹킷기반의브라우저경우의접두어 : '-webkit-' 모질라브라우저의경우의접두어 : '-moz-' 32
5.3.4 색상값 RGB 색상값 다음은동일한빨간색상을다르게표현한것이다. RGB 값을 16 진수표기로표현할경우에는반드시 '#' 를붙여야만한다. 3 자리 RGB 값은숫자를반복함으로써 6 자리 RGB 값으로변경될수있다. 즉, #fb0 는 #ffbb00 로변경된다. 33
5.3.4 색상값 RGBA 색상값 RGBA 색상모델은색상불투명도인알파속성을포함하는모델로확장될수있다. 모델을구성하는내부요소는 red, green, blue, alpha 의순서를가진다. 34
5.3.4 색상값 HSL 색상값 HSL(Hue-Saturation-Lightness) 색상표현은 RGB 색상의보완재로서사용된다. RGB 가하드웨어 CRT 에서의색상표현에근원을가지고있고직관적이지않다는한계점을가지고있어이를극복하기위해색조 (Hue), 포화도 (Saturation), 밝기 (Lightness) 의조합을사용하여색상을표현한다. 35
5.4.1 CSS 텍스트효과 텍스트색상 CSS 에서는텍스트에다음과같이색을지정할수있다. HEX 값 : "#ff0000 / RGB 값 : "rgb(255,0,0) / 색상값 : "red" 바디는빨간색으로하고헤더는환한초록색으로하며, 패러 - 그래프클래스에대해서는파란색으로하기위해서는다음과같이정의하면된다. 36
5.4.1 CSS 텍스트효과 텍스트정렬 문장이있으면이를왼쪽으로정렬할것인지, 가운데정렬할것인지, 오른쪽정렬할것인지는 'text-align' 속성을사용하여가능하다. text-align : center; text-align : right; text-align : justify; 37
5.4.1 CSS 텍스트효과 텍스트꾸미기 텍스트에윗줄 / 가운데줄 / 밑줄과같은효과를부여할수있다. 38
5.4.1 CSS 텍스트효과 텍스트대소문자처리 속성 'text-transform' 을이용하면텍스트를모두대문자로, 모두소문자로, 단어의첫문자만대문자로변경할수있다. 39
5.4.1 CSS 텍스트효과 텍스트들여쓰기 텍스트들여쓰기는속성 'text-indent' 를사용하여적용하며, 지정한수치의크기에따라안쪽으로들여쓰기가된다. 40
5.4.1 CSS 텍스트효과 폰트설정하기 CSS 에서폰트를설정할때는 'font-family' 속성을사용한다. 브라우저가지원하는폰트유형이정해져있으므로, 만약어느하나가지원되지않으면다음에지정된폰트를사용하게된다. 41
5.4.1 CSS 텍스트효과 텍스트기울임 / 이탤릭체 텍스트를기울이거나이탤릭체로사용하려면 'font-style' 속성을사용하면되는데, 일반적인형태를사용하고자할때는 'normal' 을, 이탤릭체를사용하고자할때는 'italic' 을, 기울임체를사용하고자할때는 'oblique' 을지정한다. 42
5.4.1 CSS 텍스트효과 텍스트크기지정하기 폰트의크기를지정하기위해서는속성 'font-size' 를사용하며, 그뒤에크기값을지정한다. 43
5.4.2 CSS3 텍스트효과 텍스트그림자 CSS3 에서 'text-shadow' 속성을이용하면텍스트에그림자를적용할수있다. 'text-shadow 뒤에들어가는각파라미터의의미는다음과같다. Horizontal shadow : 가로그림자생성정도지정 Vertical shadow : 세로그림자생성정도지정 Blur distance : 그림자의퍼짐정도지정 Shadow color : 그림자의색지정 44
5.4.2 CSS3 텍스트효과 단어래핑 CSS3 에서는 'word-wrap' 속성을이용해텍스트의외곽선을나타낼수있는데외곽구분선의폭과두께, 색등을지정할수있다. 45
5.4.2 CSS3 텍스트효과 폰트속성설정 CSS3 이전에는웹개발자들이폰트를사용하기위해서자신의컴퓨터에사용하고자하는폰트를설치했어야만했다. CSS3 를활용하면사용하고자하는폰트의위치를단지 CSS3 코드에추가하면사용이가능하다. 이를위해서는 CSS3 의 '@font-face' 규칙을사용하면된다. 46
6.1 멀티컬럼 (Multi-Column) 한페이지내에서주제별로고유의영역을설정하고그내용을각각표현하는것에도움을주는것이바로컬럼 (Column) 이다. 다음은멀티컬럼을위해 CSS3 에서제공하는속성들이다. 47
6.2 플렉서블박스 (Flexible Box) 플렉서블박스 (Flexible Box) 는 CSS3 부터지원되는레이아웃모델 (http://www.w3.org/tr/css3-flexbox) 로서페이지를구성하는엘리먼트들이유연하게크기가조절되는속성을의미한다. 기존 CSS 에서는각엘리먼트에상대크기를부여함으로써이를가능하게하였다. 하지만상대크기를갖는엘리먼트들은테두리, 여백등이들어가게되면계산이매우복잡해지는경우가생기곤하였는데, CSS3 에서부터는플렉서블박스를통해이를보다손쉽게지원가능하게되었다. 이전 CSS 에서의박스모델은 HTML 문서의흐름에따라수직적으로분배되었지만 CSS3 에서부터는플렉서블박스를통해순서를지정하고이를되돌리는등의조작도가능하다. 48
6.2 플렉서블박스 (Flexible Box) box 를배치하는위치에대한속성으로 'box-align', 'box-pack' 이있다. box-align start: 박스상단모서리가부모엘리먼트의상단에위치하며, 여백은하단에배치된다. end : 박스하단모서리가부모엘리먼트의하단에위치하며, 여백은상단에배치된다. center : 가운데박스가배치되고여백은균등하게나뉘어져절반은상단에절반은하단에배치된다. baseline : 모든박스는 baseline 으로정렬되고필요에의해여백이박스의전후로배치된다. stretch : 부모엘리먼트의높이에맞게각박스의높이가조정되어배치된다. 49
6.2 플렉서블박스 (Flexible Box) box-pack start : 박스좌측모서리가부모엘리먼트의좌측에위치하며, 여백은우측에배치된다. end : 박스우측모서리가부모엘리먼트의우측에위치하며, 여백은좌측에배치된다. center : 부모엘리먼트의좌측과우측에여백을균등하게나누고박스를배치한다. justify : 박스의좌측과우측에는여백을두지않고, 박스사이의여백에대해균등하게나누어박스를배치한다. 50
6.3 그리드 (Grid) CSS 에서의그리드 ( 수평과수직축을교차하는 2 차원구조 ) 기능을 CSS3 에서는스펙 (http://www.w3.org/tr/css3-layout) 에서정의하였다. 다음의예제웹사이트는 Grid 형태로웹사이트의구성을디자인한사이트 'thegridsystem' 의메인화면으로각분류별로열을구성하고각행에서는여러개의관련컨텐츠를제공하고있다. 51
6.3 그리드 (Grid) 그리드를구성할때에는행과열의개수를정확하게확인하고작업을진행해야한다. 예를들어 6 개의수직라인과 2 개의수평라인으로구성된그리드는 3- 칼럼레이아웃으로구성될수있으며, 이미지의위치를가변할때그리드라인을활용할수있다. 52
6.3 그리드 (Grid) 그리드자동생성사이트 유용한 CSS 의그리드자동생성기능제공사이트 (http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generatorfor-web-designers/) 를이용하면쉽게그리드레이아웃을작성할수있다. 53
6.4 그리드 (Grid) 와템플릿 (Template) CSS3 의그리드템플릿에서는인라인텍스트또는텍스트블록을순서대로레이아웃해서나열하기보다는템플릿기반포지셔닝을통해서상속받는요소들에대한배열을정돈한다. 웹페이지에서의레이아웃은다른윈도우와다른페이지크기를가지기때문에그리드의행과열은크기별로고정되거나유연하게변동될수있다. 템플릿기반포지셔닝은절대적인위치정의방법에대한대안으로서사용될수있다. 54
7. 이미지변형 CSS3 에서제공하는변형 (transform) 속성들을이용하면약간의속임수를사용하여이미지를회전하고, 크기를조절하고, 구부리거나심지어움직이게할수도있다. 이미지변형방법은 2d 변형과 3d 변형으로구분되며, 현재가장안정적이고폭넓게사용할수있는변형스타일은 2d 변형이다. 3d 변형은현재시점에서사파리와크롬을제외하고는아직지원되지않으며, 추후파이어폭스에서도지원될예정이다. 변형속성은이미지뿐아니라어떤엘리먼트에대해서도적용가능하다. 55
7. 이미지변형 변형값으로정의할수있는타입은다음세가지가있다. 각도 (angle) : 각도의값은각도 (deg), 그래드 (grad), 라디언 (rad) 으로정의할수있다. 숫자 (number) : 양수값과음수값에대해정수, 소수점모두사용가능하다. 길이 (em, px, %, mm, cm 등 ) : 상대값 (em,px,%) 과절대값 (mm,cm) 모두사용가능하다. 56
7.1 2D 변형 rotate(), rotatex(), rotatey() 주어진각도로엘리먼트를회전시킨다. 파라미터로지정되는양수값은엘리먼트를시계방향으로회전시키고, 음수값은엘리먼트를반시계방향으로회전시킨다. rotatex(), rotatey() 의경우엘리먼트를 X 혹은 Y 축을기준으로주어진각도로회전시킨다. 57
7.1 2D 변형 scale(), scalex(), scaley() 엘리먼트의확대 / 축소에대한속성이다. 파라미터로지정되는값이양수값이면엘리먼트의크기를증가시킨다. 음수값인경우크기는증가시키지만축을중심으로엘리먼트가반전된다. 엘리먼트를축소하기위해서는파리미터로 1 보다작은숫자를사용하면된다. 58
7.1 2D 변형 skew(), skewx(), skewy() 엘리먼트를기울이는속성이다. 파라미터로지정되는각도에의해엘리먼트의 X 및 Y 축을따라기울여진다. X 축은좌 - 우측으로, Y 축은상 - 하로기울이는효과를준다. 파라미터의값에따라방향이결정되는데, X 축에양수값은우측으로음수값은좌측으로기울이는효과이며, Y 축에양수값은하단으로, 음수값은상단으로기울이는효과를준다. 59
7.1 2D 변형 translate(), translatex(), translatey() 엘리먼트의위치를변경할수있으며, 입력된파라미터의좌표수치만큼위치가이동한다. 양수값인경우엘리먼트를우측하단으로움직이고, 음수값인경우엘리먼트를좌측상단으로움직인다. 60
7.1 2D 변형 matrix() 앞에서설명된변형속성들을단독으로혹은조합하여사용할수있는단축속성으로파라미터는 3 3 행렬값이며기본적으로모든변형은엘리먼트의가운데가중심점이다. 즉, 모든회전변형은엘리먼트의가운데를중심으로회전된다. 61
7.2 3D 변형 3d 변형은현재로서는지원되는범위가보다더제한적이다 ( 정의된스펙은 http://www.w3.org/tr/css3-3d-transforms 에서참고할수있다.). 먼저 3d 변형의기본속성을정의하는방법은아래와같다. 'transform-style' 은변형할엘리먼트를배치하는방법에대한속성이다. 이속성은아래두가지값을갖는다. flat : 기본값으로서변형되는자식엘리먼트들은부모엘리먼트에평평하게놓여진다. preserves-3d : 이값으로지정되면변형되는자식엘리먼트들이별도의 3d 공간에놓여진다. 62
7.2 3D 변형 rotate3d(x, y, z, angle) x,y,z 로정의된축을기준으로엘리먼트를회전시킨다. scale3d(sx, sy, sz), scalez(sz) 파라미터로지정되는 sx, sy, sz 의값은너비, 높이, 심도이며, 해당값들을곱하여엘리먼트의크기를증가시킨다. translate3d(x, y, z), translatez(z) x, y, z 로정의된좌표로엘리먼트의위치를이동한다. matrix3d() 파라미터는 4 4 행렬값이며, 앞에서설명된변형속성들을단독으로혹은조합하여사용할수있는단축속성이다. 63
8. 미디어쿼리 (Media Query) 미디어타입 (Media Type) 은서로다른미디어별스타일시트를적용하게하는기능으로 CSS 2.1 부터추가되었다. 이를통해 HTML 이모니터화면에서보이는지, 아니면인쇄물, TV 또는휴대폰등인지에따라스타일을다르게설정할수있었다. CSS3 에서는미디어타입을개선하여좀더미디어의특징을잘표현할수있는방법으로확장하고세분화한스펙을제공하였는데, 이것이바로미디어쿼리 (Media Query) 이다 (http://www.w3.org/tr/css3-mediaqueries). 이를통해너비, 높이, 화면비율등조건에맞는 UI 속성을활용하여스타일을설정할수있어특정기기에맞는맞춤형페이지를구성할수있다. 64
8.1 미디어쿼리구성방법 외부 CSS 파일로분기하기 외부스타일시트파일은 <link> 와 '@import' 태그를이용해 HTML 파일에적용할수있다. <link> 태그의경우 CSS 파일을독립적으로구성하고이를 HTML 문서에임베드하는방법으로많이활용되며일반적인 <link> 태그의사용법은아래와같다. 65
8.1 미디어쿼리구성방법 미디어쿼리를지정하기위해서는미디어타입과속성 66
8.2 미디어쿼리의속성 width, min-width, max-width 웹페이지의가로너비를의미한다. height, min-height, max-height 웹페이지의세로높이를의미한다. device-width, min-device-width, max-device-width 기기의물리적인가로너비를의미한다. device-height, min-device-height, max-device-height 기기의물리적인세로높이를의미한다. orientation( 화면회전 ) portrait, landscape 값을의미한다. 67
8.2 미디어쿼리의속성 aspect-ratio, min-aspect-ratio, max-aspect-ratio 화면비율을의미하며, 이값은 width 를 height 로나누어구한다. device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio 기기의물리적인화면비율을의미한다. color, min-color, max-color 기기에서사용하는색상당비트수를의미한다. color-index, min-color-index, max-color-index 기기에서사용하는최대색상수를의미한다. monochrome, min-monochrome, max-monochrome 흑백기기에서의픽셀당비트수를의미한다. 68
8.2 미디어쿼리의속성 resolution, min-resolution, max-resolution 단말기에서지원하는해상도를의미한다. scan tv 미디어타입에만대응하는속성으로 tv 에서스캔방식에따라프로그레시브 방식은 "progressive", 인터레이스방식은 "interlace" 로지정할수있다. grid( 화면의최소단위 ) 기기가 grid 방식인지또는 bitmap 방식인지를의미한다. -webkit-min-device-pixel-ratio 웹킷전용속성으로기기의화소와실제화면의픽셀 (px) 간의비율을 의미한다. 69
8.3 미디어쿼리사이트 다음은미디어쿼리를적용하여브라우저의크기별로스타일시트를다르게적용한사이트이다. NULI(http://html.nhndesign.com/) 는그크기에따라최적화된서로다른레이아웃을적용하여사용자들에게가장보기좋은화면을제공하고있다. 70
9. CSS3 참고사이트 CSS3 에서새로추가된태그들을직접적용해볼수있는샘플코드들을아래사이트들을통해쉽게구할수있다. http://css3please.com 은 CSS3 를활용한소스코드와그적용결과를함께제공해주는대표적인사이트이다. 크롬혹은파이어폭스브라우저를통해사이트를접속하면제일먼저아래와같은결과를얻을수있다. 71