책에서도알려주지않는, 반응형웹의비밀! 작성 : 수정 : (3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한

Size: px

Start display at page:

Download "책에서도알려주지않는, 반응형웹의비밀! 작성 : 수정 : (3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한"

창원 진
4 years ago
Views:

1 책에서도알려주지않는, 반응형웹의비밀! 작성 : 수정 : (3 판 ) 분류 : 웹표준, 참고자료 작성 : 고남현 (Naver ID - isc7981) - 개요이글에서는일반시중에팔리고있는웹개발서적에서다루지않는, 반응형웹에대한역사 를풀이하는글이다. 이전의고정형웹과최근의반응형웹이어떠한관계에있는지알아본다. 최근에이야기되는반응형웹의근간이어디서왔는지를이해하면, 앞으로의심화과정을학습하는데도큰도움이될것이다. - 반응형웹왜떴나? 반응형웹의근간은 모바일퍼스트 에있다. 모바일을가장첫번째로염두에두고구현하는방식을의미한다. 다양한화면크기를가진스마트폰, 태블릿들이등장하면서고정형레이아웃 (Fixed Layout) 이주를이루고있던이전의웹사이트로는이용자들의만족을충족하기어려웠다. 다양한기기를만족할수없던이전의웹사이트와는달리모바일용웹사이트는소형기기는물론일반개인용컴퓨터까지대응할수있었다. 이런점을이용하여웹사이트를 PC 용과모바일용을구분할필요없이만드는방법. 반응형 웹 (Responsive Web) 이알려지기시작했다. 반응형웹이막알려진시기에는, 필요한요구사항을온전히충족하는웹브라우저의부재가가장큰문제였다. 이러한부재를해결하기위해이전의기술로유사하게구현을하기위한시도가있었으나, 반응형웹에대한인식이부족한데다가개발시간이오래걸리고브라우저간차이도심했다. 이러한이유로관심이있는일부사람들사이에서개인적인연구로끝나는경우가대부분이여서일반웹사이트에서대중화되기란쉽지않았다. 이러한상황은주요브라우저가 HTML5와 CSS3에대한지원을강화하면서반전된다. 특히반응형웹활성화의핵심은 CSS3의지원강화에있다. 이에따라반응형웹구현에필요한요구사항의지원이강화되면서속속반응형으로제작된웹사이트들이생겨났다. 이러한상황에맞춰반응형웹에대한관심도가증가하고, 스마트폰과태블릿의보급률이거의정점을찍으면서웹세상은반응형의시대가도래하였다고할수있다. - 반응형웹시기이전의레이아웃구현방법반응형웹 (Responsive Web) 이본격적으로대두되기전, CSS2 시기에는레이아웃을다루던문제로고정방식과가변방식이있었다. 최근에이야기하는반응형웹은시각적으로보면가변방식과유사하다볼수있다. 하지만그근간을고정방식에두고있는경우도많아처음접근하는데많은어려움을겪을수있다는것이필자의생각이다. 우리는현대적인반응형웹을익히기전에 CSS2 시기에쓰였던고정방식과가변방식에대해익힐필요가있다

또한, 고정형방식에서쓰이던내용들을소개하고이것이반응형방식과어떻게연계가되어 있는지살펴보고이시기에등장하기시작해서현재의반응형웹구현의근간이되고있는모 바일웹개발의기초내용에대해서도알아보도록하겠다. 이전의고정형웹의개발에쓰이던방법은고정형레이아웃, 가변형레이아웃, 고정형 CSS 그리드시스템이있다.

2 또한, 고정형방식에서쓰이던내용들을소개하고이것이반응형방식과어떻게연계가되어 있는지살펴보고이시기에등장하기시작해서현재의반응형웹구현의근간이되고있는모 바일웹개발의기초내용에대해서도알아보도록하겠다. 이전의고정형웹의개발에쓰이던방법은고정형레이아웃, 가변형레이아웃, 고정형 CSS 그리드시스템이있다. 이글에서다룬고정형과가변형레이아웃의기준은 NHN 웹표준팀에서운영하는 NULI(html.nhncorp.com) 에서제시한모델을기준으로삼았다. 이것말고도다양한모델이있으니검색을통해찾아보기를바란다. # 고정형레이아웃고정형레이아웃은고정된폭 (width) 를두고그안에요소를놓는레이아웃구성방식이다. 레이아웃의칼럼의수에따라 1단레이아웃, 2단레이아웃, 3단레이아웃이라부르기도한다. 여기서는고정형 3단레이아웃을기준으로설명하도록하겠다. < 그림 1> 고정폭 3 단레이아웃 아래는해당레이아웃을구성하는 CSS이다. 필자와함께이소스를분석해보도록하자. 1 body{_text-align:center} 2 #wrap{width:600px;margin:0 auto;_text-align:left} 3 #header{width:100%} 4 #container{*display:inline-block;width:100%} 5 #container:after{display:block;clear:both;content:''} 6.snb{float:left;width:180px;margin-right:20px} 7 #content{float:left;width:200px} 8.aside{float:right;width:180px} 9 #footer{width:100%} CSS Hack의사용적용된소스를잘보면일반적인 CSS와달리 _text-align:center와 *display:inline-block; 처럼일반적인 CSS 속성에언더바 (_) 또는별 (*) 이붙은부분이있다. 이는인터넷익스플로러 (IE) 의버전차이에서오는문제를해결하기위한것이다. 언더바가붙은핵은 IE5.5~6에영향을미치고별이붙은것은 IE6~7에영향을미친다. CSS Hack은 IE 말고도다른브라우저에적용되는여러가지형태가있다. CSS Hack은꼭필요한상황에서만쓰도록하고남용하는 - 2 -

것은권장하지않는다. 떠있는 (Float) 객체의클리어문제 CSS의 Float 속성은말그대로떠있는상태를만들어주는속성이다. 그래서 float: left; 는왼쪽에떠있다, float: right; 는오른쪽에떠있다고해석할수있다. 하지만떠있다보니하단의 #footer의위치가제대로잡히지못하고좌우요소 (.snb와.aside) 와겹쳐보이는상황이발생한다.

3 것은권장하지않는다. 떠있는 (Float) 객체의클리어문제 CSS의 Float 속성은말그대로떠있는상태를만들어주는속성이다. 그래서 float: left; 는왼쪽에떠있다, float: right; 는오른쪽에떠있다고해석할수있다. 하지만떠있다보니하단의 #footer의위치가제대로잡히지못하고좌우요소 (.snb와.aside) 와겹쳐보이는상황이발생한다. 떠있는요소아래로들어가는상태인것이다. 이를해결하기위해 5번행과같은내용이적용된것이다. 이런방식외에 #container에 overflow: auto; 속성을주거나 #footer 에 clear: both; 속성, 또는 #container와 #footer 사이에별도의.clear 요소를넣어주는방법이있다. 아래는별도의.clear 요소에적용된 CSS 예제이다..clear { clear: both; display: block; float: none; font-size: 0!important; height: 0; line-height: 0!important; margin: 0!important; overflow: hidden; padding: 0!important; width: 100%; } 이제가변형레이아웃으로넘어가더많은내용을확인해볼것이다. 고정형및가변형레이 아웃을모두익히면반응형레이아웃을익히는데도움이될것이다. # 가변형레이아웃가변형레이아웃은폭 (width) 이브라우저크기에따라바뀌는방식을의미하며, 그안의요소도원하는요소에한해부모요소의폭에따라바뀌도록설정하는것이다. 넓은의미에서고전적인반응형웹의형태라볼수있다. 여기선가변폭 3단레이아웃을기준으로설명하겠다. < 그림 2> 가변폭 3 단레이아웃 아래는해당레이아웃을구성하는 CSS이다. 1 #wrap{width:100%} 2 #header{width:100%} 3 #container{*display:inline-block;_width /**/:100%;padding-right:200px;padding-left:200px} 4 #container:after{display:block;clear:both;content:''} 5.snb{float:left;position:relative;left:-200px;width:180px;margin-right:-180px} 6 #content{float:left;width:100%} 7.aside{float:left;position:relative;left:200px;width:182px;margin-left:-182px} 8 #footer{width:100%} 이전고정형레이아웃에서설명한내용은생략하겠다. 이레이아웃은좌우에각각있는.snb - 3 -

이를 margin-right: -180px; 과 margin-left: -182px; 속성을이용하여잡아주게된다. # 고정형 CSS 그리드시스템그리드를이용하면웹페이지를일정한기준의크기로잘라레이아웃구성이가능하기때문에구현하기가용이해진다는장점이있다.

4 와.aside는고정너비를가지고, #content는브라우저에서너비에따라같이변하는형태를가진다. #container에서좌우양단에 padding( 안쪽여백 ) 을 200px를주면서공간을확보한다. 좌우의각요소에정의된속성들을보면 position: relative; 가적용되어있는데이는위치를상대적으로이용하겠다는뜻으로현재위치를기준점으로 left: -200px; 과 right: -200px; 를사용가능하게해준다. 위치를잡았지만브라우저는아직해당요소의자취를그대로가지고있어원하는위치에놓이지않게된다. 이를 margin-right: -180px; 과 margin-left: -182px; 속성을이용하여잡아주게된다. # 고정형 CSS 그리드시스템그리드를이용하면웹페이지를일정한기준의크기로잘라레이아웃구성이가능하기때문에구현하기가용이해진다는장점이있다. 국내웹개발환경은레이아웃구성방식이테이블 ( 표 ) 을쓰느냐 DIV(Division) 을쓰느냐로이분화되어있어국내에는많이알려지지않았다. 이중테이블방식이가장그리드시스템과유사하다볼수있어그편리함때문에그동안많이이용해왔다. 하지만일정한크기로나누는것이아니기때문에그리드시스템이라부르진않는다. DIV를이용한구성은구성하고있는요소중에하나라도기준위치가바뀌면전체가틀어지기때문에불편함을느끼기도한다. CSS 그리드시스템은일정한크기로나눈레이아웃구조를제시함으로써이러한불편을해소 해준다. 이러한 CSS 그리드시스템은대표적으로 BluePrintCSS: A CSS Framework 가있 다. 이글에서우리는 BluePrintCSS 의그리드시스템을살펴보도록하겠다. < 그림 3> BluePrintCSS 그리드시스템 - 4 -

5 아래는 BluePrintCSS의그리드시스템을이용하여 3-칼럼레이아웃을생성하는예제이다. <div class="container"> <div class="span-24">the header</div> <div class="span-4">the first column</div> <div class="span-16">the center column</div> <div class="span-4 last">the last column</div> <div class="span-24">the footer</div> </div> 한칸 (Grid) 당 30px의크기가주어진다면, 좌측칼럼이 4*30=120px가되어야할것처럼보이지만그렇지않다. 좌측칼럼의너비는 150px이다. 30px 차이는어디서발생한것일까? 그리드시스템을파헤쳐보면아래와같은내용이있다..column,.span-1,.span-2, ( 생략 ),.span-24 { float: left; margin-right: 10px; } 한그리드당 10px 씩오른쪽바깥여백이있다. 이러한여백을 Gutter라고한다. 이러한내용을토대로 span-n에따른너비를계산하면, width=n*30+10*(n-1) 식이성립할것이다. 이식에따라계산하면전체너비는 950px, 중앙칼럼은 630px, 우측칼럼은 120px가될것이다. 여기서 last는옆으로나열하는요소가끝나서다음행의그리드로넘어가야한다는뜻이다. 더자세한내용을알고싶다면 # 모바일웹의태동기 웹표준과접근성부터모바일웹까지모바일웹의태동은스마트폰과태블릿의보급확산과웹표준과접근성에뿌리를두고있다. 국내에서스마트기기보급이본격적으로시작될즈음, 한편에서는웹에대한시각을달리보는시도가본격화되고있었다. HTML과 CSS를 W3C의표준에맞게웹을개발하는 웹표준, 그리고모두에게평등한웹을제공하자는 웹접근성 이다. 간혹우리나라에선개정된장애인차별금지법에의해강제된것이아니냐는반론도있다. 하지만처음웹표준과접근성에관심을둔소수의사람들은사회적차별보다는개발과정의이로움과기술적문제를해결하기위한방안에초점을맞췄다. 우리나라웹표준과접근성의시작은다양한브라우저가하나의웹사이트를두고각기다른모습을보인다는기술적문제를해결하기위한것이었다. 이것을크로스브라우징 (Cross-browsing) 이라따로이야기하기도한다. 특정플랫폼에의존적인우리나라웹의특성을고려해봤을때어떤이유에서시작된것인지는더명확해진다할수있다. 하지만, 우리나라에서웹접근성을준수하는개발방식의대중화는개발자사이에서도부정적으로보는시각이많았고결국정부주도로법이강제함으로써이뤄졌기때문에, 기술을깊게생각하지못하고단순찍어내기에급급한우리나라 IT의씁쓸한단면을보여주기도한다. 이러한웹브라우저간차이를해결하기위해웹표준으로제시된사항을지키면서개발을하 는개발방법이시도가된다. 완벽한해결책은아니지만효과가있었다. 물론 W3C 가제안하 - 5 -

6 는표준을개발시선언하지않는쿼크모드 (Quirks Mode) 에서도브라우저간차이를맞출수있었으나, 브라우저에따른영향이표준모드 (Standard Mode) 보다심하고차후유지보수가원활하지못했기때문에이전에는임시방편으로쓰이다가이후에는특별한경우를제외하고는사용하지않게된다. 웹표준개발방식을따르게되면서웹개발시작성한소스가얼마나읽기좋은지 ( 가독성 ) 에도점차신경을쓰게되었다. 또한, 유연한개발에도역시관심이높아졌는데브라우저에서웹을이루는 3요소인 HTML, CSS, Javascript의분리였다. 처음에는하나의웹페이지안에서기능적으로분리하는 점진적향상 (Progressive Enhancement) 방식으로가다가점차파일까지분리하는완전한분리의형태인 겸손한구현 (Unobtrusive) 방식에까지이른다. 이러한방식은웹접근성을고려하여개발할시, 웹페이지내의모든스크립트와스타일시트를배제하고서라도해당사이트를이용할수있도록하는방안에서시작된것이다. 한때이러한개발방식을두고 비스크립트 (non-script) 환경에대응하도록개발을한다. 라는말을쓰기도했다. 일반웹과마찬가지로현재의모바일웹이나반응형웹에서도스크립트요소는웹사이트의기능을강화하는중요한역할을하고있지만, 반대로이러한웹사이트의기반에는스크립트가배제된환경에대응하기위한방법이깔려있다. 서로극과극이다른상황에서나온개념이오히려서로에게도움을주고있는것이다. 각기다른요소를분리시키는웹개발방식을이용함으로써, 파일전체를수정하지않고도 CSS 수정만으로도다양한모양으로변형시키거나 Javascript 수정만으로도원하는기능을추 가시키는것이가능하게된다. 이러한특징은차후모바일웹개발에큰영향을미치게된다. 이러한변화는웹접근성과목적은다르지만유사한특징을가진 SEO( 검색엔진최적화 ) 에대한관심으로이어졌다. 두주제는사용자편의를증대한다는측면은동일하지만, SEO는말그대로웹사이트가가진내용이검색엔진에잘노출될수있게최적화시킨다는목적이있고, 웹접근성은모든사람에게평등한웹을제공하는데목적이있다는차이가있다. SEO에대한관심증가는장애인도차별없이웹을이용한다는취지를담은법적인의미의 웹접근성 에대한관심증가에영향을미치게된다. 웹접근성에대한관심증가는웹접근성을다룬법제정에도영향을미치게된다. 위내용을모두이해했다면모바일용페이지는큰문제가없어진다. 보통모바일용페이지는 PC용웹과는별개로만들어지는것이일반적인데이는기존에 PC를기준으로개발된내용으로는모바일에그대로대응할수없기때문이다. 하지만, 필자는 PC용웹에서웹접근성을준수한기존코드를그대로가지고모바일웹에적용할수있었던경험이있다. 즉개발프로세스상따로진행되는건어쩔수없다하여도, 모바일웹의작성은웹접근성에 그기본이있다고말할수있다. 이글에나온이전의내용을모두알고있다면, 모바일웹에 서가장중요한내용은단한줄로끝난다. 나머지는개발자각자의역량이맞기면된다. 아래는모바일웹페이지의 head 태그안에넣는 viewport meta 태그내용이다

7 <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densitydpi=device-dpi" /> 각각의속성에대한풀어보면아래와같다. 속성 설명 width=device-width 너비를기기의해상도너비에맞춤. height=device-height 높이를기기의해상도높이에맞춤. user-scalable=no initial-scale=1.0 maximum-scale=1.0 웹페이지폭맞춤 ( 스케일링 ) 제한. minimum-scale=1.0 target-densitydpi=device-dpi DPI(Dots per Inch) 에맞춤. 안드로이드만적용. 참고로알아두어야할내용을하나이야기하면, 글자의크기를지정할때는고정형태인픽셀 (px) 이나포인트 (pt) 대신상대적크기를가진 em이나 % 단위를쓰는것을권장한다. 1em은 100% 와같으며상위요소에서지정된글자크기와같음을의미한다. 즉, 글자크기를지정할때고정단위는 * { font-size: 12px; } 와같이지정하는것이가능하지만, 가변단위는 * { font-size:.75em; } 과같이지정하면안되고, 하나의상위요소를잡아서지정해야한다. 그렇지않으면자식요소로갈수록 75% 만큼글자크기가작아진다. # 브라우저별로다른스타일을적용이후내용에서나오겠지만 CSS3 미디어쿼리를주요브라우저가원활하게지원하기전, 따로이름이붙지않은유사한방식이쓰이기도했다. 환경에상관없이공통적으로적용되는스타일시트와함께, 접속하는브라우저나기기의종류를확인하여각기다른스타일시트를불러오는방법이었다. 이러한방법은서버에서확인하는방법과사용자웹브라우저와같은클라이언트환경에서확인하는방법으로나뉜다. 먼저클라이언트에서확인하는방법에대해알아보겠다. 해당방법의대표적인예는인터넷익스플로러 (IE) 의버전차이를맞추기위해쓰이는 조건부주석 (Conditional Comments) 이있다. 이방식은 CSS만제어하는것이아닌브라우저에따라다른 Javascript 파일을불러오거나특정한 HTML 코드출력을제어할수있다. 이런점때문에지금도다양한종류의웹을개발하면서브라우저차이로인한문제를해결하기위해쓰이고있다. 아래는조건부주석을이용하여 html5shiv( 구형브라우저에서 HTML5 태그지원 ) 스크립트를불러오는예제이다.  여기서 if lt IE9의의미는 IE9 보다아래버전임을의미한다. 여기에들어갈수있는조건은 gt( 선택보다큰 ), lt( 선택보다작은 ), gte( 선택보다같거나큰 ), lte( 선택보다같거나작은 ),!( 느낌표, 선택이외의 ) 가있다. 조건부주석은 IE10부터표준모드에서는지원하지않는다. 클라이언트에서확인하는또다른방법으로는자바스크립트를이용한방법이있다. 결과에따 라어떤내용을보여줄지를스크립트가정하도록할수있다. 아래는자바스크립트로구현된 클라이언트에서확인하는방식의간단한예제이다

8 if( /Android webos iphone ipad ipod BlackBerry IEMobile Opera Mini/i.test(navigator.userAgent) ) { alert( Your device is mobile, ); } else { alert( Your device is not mobile, ); } 여기서잠깐! HTML5/CSS3 하위호환을위한라이브러리를알아보자. 반응형웹활성화의주역은 HTML5가아닌 CSS3이다. 하지만웹의발전흐름상이둘은같이발전하고있기때문에 HTML5 역시무시해서는안되는부분이다. 브라우저별로 HTML5 와 CSS3 지원가능사항이많은차이를보이고있는데, 최근의브라우저가아니라면이러한차이는더심해진다. 이러한차이를해결하기위한주요라이브러리를소개하겠다. 1) HTML5Shiv: HTML5에서지원하는태그의하위호환에필요한스크립트이다. 이스크립트는 에서받을수있다. 2) Modernizr: 브라우저가 HTML5/CSS3의어떠한사양을지원할수있는지확인하는스크립트이다. 이스크립트는 에서받을수있다. 3) CSS3-MediaQueries,js: 하위브라우저에서 CSS3의미디어쿼리를사용가능하게해주는스크립트이다. 이스크립트는 에서받을수있다. 이제부터알아볼내용은서버에서확인하는방법이다. 서버에서확인하는방법은주로모바일기기로웹사이트에접속했을때모바일웹페이지로유도하기위한방법으로많이쓰였다. 하지만예외는있었는데, 기존의 HTML 구조는그대로놔두고기기별로다른스타일시트를불러와적용하는용도로사용되기도했다. 이는조건에따라다른스타일을주는반응형웹과유사한방식이었지만이당시에는반응형웹이라는용어를사용하지않았다. 그이후에이러한방식은반응형웹에서최적화 (Optimization) 이라는주제로등장하게된다. 아래는서버에서확인하는방식의 PHP로작성된간단한예제이다. $mobile_agent = '/(ipod iphone Android BlackBerry SymbianOS SCH-M\d+ Opera Mini Windows CE Nokia SonyEricsson webos PalmOS)/'; if(preg_match($mobile_agent, $_SERVER['HTTP_USER_AGENT'])) { echo 'Your device is mobile.'; } else { echo 'Your device is not mobile.'; } - 반응형웹의본격적인시작! 고정형웹시기에이룬성과를바탕으로반응형웹이등장하기시작한다. 반응형웹활성화의일등공신은 CSS의미디어쿼리 (Media Query) 이다. 조건에따라다른 CSS를적용하는것이가능하도록만들어주기때문에기기의너비라는조건의변화에대응해야하는반응형웹의특성에가장알맞은기능이라할수있겠다. 이는 CSS2부터존재했던기능이지만이전에는 all, screen, print와같은단순한조건에한해이용되었다. 하지만 CSS3에들어기능이향상되면 - 8 -

서더구체적인조건지정이가능해졌다. 아래는브라우저별미디어쿼리지원현황이며, 자 세한현황은 http://caniuse.com/css-mediaqueries 에서확인할수있다. < 그림 4> 미디어쿼리지원현황표 # 고정형레이아웃, 반응형으로변신하다! 미디어쿼리의조건지정이어떤것인지알고싶다면, 기존의고정형레이아웃을반응형으로바꿔버릴수있다면이해가빠르게될것이다.

9 서더구체적인조건지정이가능해졌다. 아래는브라우저별미디어쿼리지원현황이며, 자 세한현황은 에서확인할수있다. < 그림 4> 미디어쿼리지원현황표 # 고정형레이아웃, 반응형으로변신하다! 미디어쿼리의조건지정이어떤것인지알고싶다면, 기존의고정형레이아웃을반응형으로바꿔버릴수있다면이해가빠르게될것이다. 앞서보았던고정형레이아웃의모델을그대로반응형으로바꿔보도록하겠다. 무슨말을하는지모르겠다하시는분은이전의고정형레이아웃부분을다시읽고오기를바란다. 바꾸는방법은 CSS screen and (max-width: 480px) { #wrap { width: 90%; }.snb { width: 100%; } #content { width: 100%; }.aside { width: 100%; } } 이코드의기능은브라우저의너비가 480px 아래가되면 3단레이아웃이 1단레이아웃으로변형되도록하는것이다. 작동을확인하고싶다면직접해보길바란다. 여기서 screen은미디어타입 (media type) 이고 and 이후에들어간내용은조건문이다. 아래는조건문에들어갈수있는속성들에대한표이다

10 기능 설명 width 기기의너비. height 기기의높이. device-width 기기의너비. device-height 기기의높이. orientation 기기의회전상태를의미. portrait, landscape 사용. aspect-ratio 기기화면의비율. 1은 1:1로가로세로의길이가같음을의미. device-aspect-ratio 기기화면의비율. color 단말기에서사용하는최대색상 2^n개비트수. color-index 단말기에서사용하는최대색상수. monochrome 흑백사이에 2^n 단계의회색을가진기기. resolution 해상도 scan TV 출력장치의검색프로세스를의미. grid 0: 고정된크기의글자만가진기기. 1: 일반적인기기. 미디어쿼리에서조건문은위기능에 max-, min- 을붙여쓰게된다. 이는대소비교와같은 조건을사용할수없기때문이다. 아래는미디어타입으로쓸수있는내용들이다. 타입 all aural braille handheld print projection screen tty tv embossed 설명모든미디어타입음성합성장치점자표시장치손으로들고다니면서볼수있는작은스크린에대응하는용도인쇄용도프로젝터표현용도컴퓨터스크린을위한용도디스플레이능력이한정된, 텔렉스 (teletype), 터미날, 또는수동이동장치등, 고정피치 (fixed-pitch: 폭이일정 ) 글자를사용하는메디아를위한의도 tty 메디아타입에서제작자는픽셀 (pixel) 단위를사용하여서는안됨음성과영상이동시출력되는 TV와같은장치페이지에인쇄된점자표지장치 미디어쿼리는위에서봤던고정형레이아웃을반응형으로바꾸는예제처럼 CSS 안에서쓰는 방법, 스타일 (style) 태그에 media 속성을주는방법, link 태그나 CSS 처럼다른 스타일시트파일을불러올때 media 속성을주거나명시하는방법이있다. # 부속요소들을어떻게처리하지? 웹페이지를반응형으로만들다보면대응이되지않는요소가있다. 바로변하는너비만큼줄일수없는요소들이다. 대표적으로는테이블 ( 표 ) 가있다. 열의개수가일정수준이상을넘어가면아무리줄이려고해도줄일수가없다. 이러한문제를해결하기위한방법은크게세가지로볼수있는데, 일부내용을감추거나, 테이블의구조를아예변형시키거나, 구조변경을최소화하고스크롤을제공하는방법이다. 이중일부내용을감추는방법은너비에맞춰표의열 ( 칼럼 ) 을줄이는방식으로이해하기가

장쉬운방식이다. 이글에선테이블을변형하는방법과, 스크롤을제공하는방법의대표적인 예를하나씩살펴보도록하겠다. 아래는 FooTable 에서제안한반응형테이블모델이다. < 그림 5> FooTable 반응형테이블 테이블을완전히변형하는형태를가지고있다. 해당반응형테이블을제안하고만든개발자 는아래의다양한반응형테이블방식에서영향을받았다고한다.

irishstu.com Chris Coyier 행마다제목을반복한다. css-tricks.com * FooTable 은 http://themergency.com/footable/ 에서내려받을수있다. 위에제시된반응형테이블방식중, 스크롤제공방식의대표적인예시인 Zurb 에대해알아 보겠다. 아래는 Zurb 에서제시한반응형테이블모델이다.

11 장쉬운방식이다. 이글에선테이블을변형하는방법과, 스크롤을제공하는방법의대표적인 예를하나씩살펴보도록하겠다. 아래는 FooTable 에서제안한반응형테이블모델이다. < 그림 5> FooTable 반응형테이블 테이블을완전히변형하는형태를가지고있다. 해당반응형테이블을제안하고만든개발자 는아래의다양한반응형테이블방식에서영향을받았다고한다. 제안자 해결책 사이트 Zurb 소형기기에서가로스크롤을제공한다. zurb.com Dave Bushell 테이블을사이드로플립 ( 제목의행렬전환 ) 한다. dbushell.com Filament Groups 보여줄행을사용자가직접선택한다. filamentgroup.com Stewart Curry 덜중요한열 ( 칼럼 ) 을감춘다. irishstu.com Chris Coyier 행마다제목을반복한다. css-tricks.com * FooTable 은 에서내려받을수있다. 위에제시된반응형테이블방식중, 스크롤제공방식의대표적인예시인 Zurb 에대해알아 보겠다. 아래는 Zurb 에서제시한반응형테이블모델이다. < 그림 6> Zrub 반응형테이블모델 첫번째열 ( 칼럼 ) 은고정시키고나머지내용에대해가로스크롤을제공하는형태이다. 제목열이되는첫번째열이항상같은위치에고정되어스크롤하면서도표를읽기가수월해진다. 표에스크롤을제공하는방법은간단하게생각하면표전체가스크롤되는걸생각할수있는데, 제목이가려지기때문에내용에대한분간이힘들수있다. 해당라이브러리는이점을해결했다보면된다

# 반응형 CSS 그리드시스템 우리나라에선빛을보지못했던고정형그리드와는달리반응형그리드는어떤결과를가져올 지는좀더지켜봐야한다. 하지만그리드를적용할명분은이전보다는많아졌다생각한다. 반응형그리드는여러가지형태가있다. 이전예제에서고정형레이아웃에반응형을적용한것처럼기존의고정형그리드에반응형으로그리드고정폭을조정하는방법이있다.

12 # 반응형 CSS 그리드시스템 우리나라에선빛을보지못했던고정형그리드와는달리반응형그리드는어떤결과를가져올 지는좀더지켜봐야한다. 하지만그리드를적용할명분은이전보다는많아졌다생각한다. 반응형그리드는여러가지형태가있다. 이전예제에서고정형레이아웃에반응형을적용한것처럼기존의고정형그리드에반응형으로그리드고정폭을조정하는방법이있다. 그리드크기를가변적으로조정해나가다가어느조건이되면변형되도록한반응형방식도있다. 이는이전의고정형웹에서지정된가변형레이아웃에반응형레이아웃을적용하는것과같다보면된다. 이말을이해하기어렵다면간단하게이해하자. 반응형은조건에따르는것이다. 다양한반응형그리드중이해를돕기위해가장간단한형태로구현된그리드시스템을소개 하도록하겠다. 가변형과반응형을합쳐놓은형태의 Foldy960 이다. 아래는 Foldy960 의그리 드시스템이적용된예제이다. (Foldy960 screen and (min-width: 480px) {.grid-1,.grid-2,.grid3, ( 생략 ),.grid-unit { float: left; width: %; margin: % 1em; screen and (min-width: 640px) {.grid-1 { width: %; }.grid-2 { width: %; }.grid-3,.grid-half { width: %; } } 일부내용은다다룰수없어생략하겠다. 화면너비가 480px을넘어가면그리드를세로로풀어놓고, 640px를넘으면그리드가위치에맞게재배열되도록구성되어있다. 결과적으로는 480px 아래에서도그리드들이아래로풀리는상태가만들어진다. 그리드의너비를고정단위가아닌 % 나 em 등의가변단위를쓰고반응형을적용한형태이다. 알아두어야할것은단위를고정으로써도반응형은적용가능하다는것이다. 반응형은조건에따라스타일의변화를주는것이기때문에반드시가변단위를써야하는것은아니다. 아래는방금전의예제를실행한결과이다. < 그림 7> Foldy960 그리드시스템

13 # 잊혀져가던방식의화려한부활 : Optimization 이전의 CSS3 미디어쿼리지원이열악하던때에도, 웹사이트를 PC용과모바일을각각따로두지않고도두환경을동시에대응하도록하는시도가있었다. 서버측에서사용자의접속환경을확인하여기기에맞춰진각기다른 CSS를불러오게끔하여가능한일이였다. 이후에미디어쿼리로조건지정이가능해지면서이러한시도는자취를감추는듯했다. 하지만반응형웹에서이러한방식은최적화 (Optimization) 이라는이름으로다시등장하게된다. 이전의서버에서적용할스타일시트를결정하던방식은모바일은 mobile.css, PC는 main.css와같이각기다른파일을불러오도록하는것이었다. 이후미디어쿼리로인해이러한방식은사용할필요가없어졌는데차후문제점이발견되었다. 한번에불러오는스타일시트가 mobile.css과 main.css의특성을동시에가지고있었던것이다. 이는모바일에서접속했을때에도 PC용스타일시트까지함께불러들여짐을의미한다. 사실상사용하지않는 CSS를불러오는것이기때문에트래픽이낭비되는것이다. 이러한문제점을해결하기위해기기에따라사용하지않는스타일시트를배제하는최적화 (Optimization) 방식이알려지게되었다. 이러한방식은단순히트래픽해소로만끝나지않고, 기기에따른적절한해상도의동영상이 나이미지를선택하는방법으로도쓰일수있다. 기기에맞는적절한컨텐츠를선택하여보여 주기때문에더효과적인반응형웹구현이가능해진다. - 다루지못했던내용들 1) 스크립트로이루어져있으나접근성을향상시키기여의치않은부분에대해선 noscript 태그를이용하여접근성을향상시키곤하는데, 이러한방식을 적절한낮춤 (Graceful Degradation) 이라부른다. - 마치며지금까지웹반응형의역사에대해살펴보았습니다. 더다양한내용은검색을통해더많이찾아보셔서학습하시길바랍니다. 고정형웹부터지금의반응형웹으로넘어가는과정사이에어떠한일들이있었는지를중점적으로서술하려다보니여러주제가겹쳐있다는느낌을받을수있습니다. 특히웹표준과접근성을강조하는모습을많이보였는데, 비록이글의주제가반응형웹이지만강조했던다른개념들도검색을통해좀더많이찾아보시기를권장드립니다. 긴글읽어주셔서감사합니다. - 질문있습니다! 이문서는처음작성후 3 번의수정을거쳤습니다. 여기에선수정을거치면서받은질문들을 풀어보는시간을가져보도록하겠습니다. Q. 반응형웹의근간이반드시 모바일퍼스트 라고할수있나요? 정확하게는반응형웹이라는개념이나온배경이모바일퍼스트라고할수있습니다. 이문서

14 에서적용된예시중에는고정형레이아웃을반응형으로바꾸는예시가있는데, 기본으로삼는레이아웃이모바일용이아닌일반 PC용웹에서쓰는레이아웃이기때문에모바일퍼스트를기반으로한반응형웹의개발이었다고말하기힘듭니다. 이문서에서소개된반응형그리드역시모바일웹보다는그리드에기본이있기때문에이것이모바일퍼스트를기초로했다고보는것은각자개개인의생각에따라다르게볼수있습니다. 하지만, 여기서는반응형웹이나오게된시작이어디에있는가를중점적으로이야기했기때문에 반응형웹은모바일퍼스트에근간이있다. 라는말을쓴겁니다. Q. 이미시중에반응형웹을다루는책이나와있는데, 이문서는뭐가다른거죠? 이미 마치며 부분에서도밝혔듯이고정형웹에서반응형웹으로넘어가는과정에서있었던일들을중점적으로다루었습니다. 특히해외가아닌우리나라환경에서접할수있었던내용들로구성하였습니다. 반응형웹에서쓰이는기술위주로서술하기보다, 기존의고정형웹과반응형웹의연관성을중점적으로서술하였다는차이가있습니다. - 변경사항 첫문서작성 마치며 부분의수정, 최적화 (Optimization) 내용추가 애매했던부분을더구체적으로수정. - 참고자료 1) NHN 웹표준팀 NULI UIO Factory 2) BluePrint Wiki 3) Can I use CSS3 media queries? - 4) Media Queries, W3C Recommendation 19 June ) CSS3 media query에대하여 6) FooTable: a jquery Plugin for Responsive Data Tables 7) A New Take on Responsive Tables 8) Foldy ) About conditional comments(internet Explorer) - MSDN 10) What is the best way to detect a handheld device in jquery? - 유용한사이트 1) 웹접근성연구소 2) W3C Markup Validation Service 3) QuirksMode 4) CSS-Tricks

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width