반응형 웹 만들기 (Responsible/Scalable web design with css media query)

# 반응형 웹 만들기 (Responsible/Scalable web design with css media query)

기본적으로 어느 인터넷 브라우저에서든 Ctrl+mouse wheel 을 하면 scale 을 바꿀 수 있음. Chrome 은 site 별로 이 scale 도 저장해놔서 나중에 왔을때도 같은 scale 로 web-page 를 볼 수 있음. 개인적으로 국내 web page 들 90% 이상에서 글씨 크기가 눈나쁜 나한테는 너무 작아서... 항상 scale up 해서 보는 경향이... Chrome 기본 설정에서도 기본 글씨 크기를 바꿀 수 있긴 한듯. 그런데 어차피 사이트 제작자가 그냥 font 에서 layout 을 맞춰놓은 경우가 많아서.. 이걸 바꾸면 overflow 나고 이럴 경우도 많을듯?

요새 인터넷에 접속되는 기기들이 다양해지면서 PC에 맞춰진 웹들이 더이상 스마트폰이나 테블릿에서 예쁘게 보이지 않는다. 초창기 웹들이 한 일은 모바일용 페이지를 따로 만들어서 어느 기기로 접속하였는지에 따라 그에 맞는 페이지를 따로따로 보여줬다. 뭐 시간이 있고 자금력이 있다면야 각 기기별로 최적화된 페이지를 보여주는게 좋을수도 있겠지만, 웹에 핵심적인 업데이트가 있다거나 크게 바뀌는 부분이 있다면 고쳐야할 것들도 점점 많아지게 된다. 또한 PC 와 같은/비슷한 화면을 기대하고 스마트폰으로 웹페이지를 방문한 사용자에게는 생소함, 불편함을 줄수도 있다. (PC 에서와 같은 기능을 쓰고 싶은데, 어디를 클릭해야할지 헷갈린다던지 하는 등.) PC 또한 화면크기들이 천차만별 (초 거대 모니터를 쓰는 사람도 있고, 작은 노트북을 사용해서 인터넷을 하는 사람도 있을것이다.) 이고 스마트폰의 화면들도 제각각이고 테블릿에 이제는 냉장고나 냉난반기 등 가전제품들도 IoT (Internet of Things) 라고 인터넷에 접속되는 추세이고, 점점 더 인터넷에 접속되는 다양한 화면크기의 기기들이 많아질 것으로 생각된다. ## PH

• 2015-12-17 : 더 편집. docuK version up.
• 2015-01-21 : 이 날짜보다 더 일찍 첫글을 쓴것도 같은데... 대충 기록된 first posting date.

## TOC ## CSS media query 접속 기기에 따라 따로 페이지를 만들어서 페이지를 보여주는 방식 말고 간단하게 해결할 방법은 없을까? javascript 로 접속기기가 무엇인지 알아내서 처리하는 방법도 있겠지만, css 만을 이용해서도 접속기기나 화면의 width 에 따라 반응하는 아름다운 웹 페이지를 만들 수 있다. 바로 media query 를 이용하는 것이다. 자세한 방법은 reference 들을 참고하자 . 아래는 media query 의 간단한 사용 예이다. (제 블로그에 사용한 media query 들임.) ```[.scrollable.lang-html] <!-- meta for mobile device: 스마트폰에서 PC 화면식으로 작게 보이는거 방지용. 초기 scale 이랑, 확대/축소 가능여부랑 가능비율. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, minimum-scale=0.5, user-scalable=yes"> <!-- CSS media query on a link element --> <link rel="stylesheet" media="(orientation: portrait) and (max-width: 800px)" href="example.css" /> ```/

CSS media query within a style sheet (Code-prettyprint 가 css 언어에서 제대로 동작을 안함;;; '#'을 왜 주석처리 하지 ㅡ..ㅡ) ```[.scrollable.lang-css] /* media query 가 안먹히는 device 를 위해 default CSS 작성. 옛날 스마트폰의 경우 media query 를 지원 안해서 media query 안의 css 들은 아예 무시를 하는듯. */ /* 또한 media query 는 제일 뒤에 넣는것이 좋아보임. 중간중간 낑겨넣으면 분석하기 더 힘들어짐. */ /* 블로그 반응형. */ body {margin:0; padding:0; font-size:8px; line-height:1.6; font-family:'Malgun Gothic','맑은 고딕',나눔고딕,NanumGothic,Tahoma,Sans-serif; background:rgb(0,0,0)} #container {max-width:1100px; margin:34px auto 0; background:rgb(255,255,255); border:0.5em rgb(100,100,100) solid; border-right-width:0; border-left-width:0} #header {} #wrapContent {font-size:1.6em; position:relative; background:rgb(219, 206, 206)} #content {padding-top:.5em} #sidebar {background-color:#d8d8d8; padding:0.5em; margin:0.5em 0} #footer a {color:rgb(203,203,255)} @media all and (min-width:321px){ body {font-size:9px} } @media all and (min-width:401px){ body {font-size:10px; background:url("images/pattern-24.gif") repeat left top} #footer a {color:rgb(53, 53, 92)} } @media all and (min-width:801px) { #container {padding:0.5em; border-right-width:0.5em; border-left-width:0.5em} #wrapContent {min-height:175em} #content {margin-right:21.5em} #sidebar {position:absolute; margin:0; top:0; right:0; bottom:0; width:20.2em; border-left:5px solid white} } /* DocuK 에 해당하는 CSS. */ #docuK-log {position:fixed; bottom:0; right:0; z-index:1000; overflow-y:scroll; border:2px rgb(150,150,150) solid; max-width:200px; max-height:250px} .docuK ::-webkit-scrollbar {width:3px; height:3px} .docuK>.sec {position:relative; background:black; color:white; border-bottom:2px rgb(25,60,25) solid; border-top:5px rgb(25,60,25) solid; padding:.5em; margin:.3em 0; font-size:1.8em} .docuK.bright>.sec {background:white; color:black} .docuK .p {padding-bottom:1em; text-indent:.5em} .docuK .eqCC {text-align:center; padding:1px; margin:.5em 0; background:inherit} @media all and (min-width:321px) { /* 321px 이상 width 에서 실행할 CSS 코드를 여기에 작성. 위에 있는 css 와 곂치는게 있다면 덮어씌우는 식으로 동작함. */ .docuK p {overflow:auto} .docuK .eqCC {max-width:100%; overflow-x:auto} } @media all and (min-width:401px) { /* 401px 이상 width 에서 실행할 CSS 코드를 여기에 작성. 위에 있는 css 와 곂치는게 있다면 덮어씌우는 식으로 동작함. */ .docuK ::-webkit-scrollbar {width:9px; height:9px} } @media all and (min-width:500px) { /* 500px 이상 width 에서 실행할 CSS 코드를 여기에 작성. 위에 있는 css 와 곂치는게 있다면 덮어씌우는 식으로 동작함. */ .docuK>.sec {border-left:2px rgb(25,60,25) solid; border-right:2px rgb(25,60,25) solid} #docuK-log {max-width:500px; max-height:300px} } ```/

최근에 뉴스타파도 반응형 웹으로 개편하고 인터넷 미디어로서 여러가지 웹 기능들을 시도하고 있으니 가서 확인해 보시길. (요새 다시 멋없어진. 이전 스타일이 좋았는데...) 이 외에도 다양한 멋있는 반응형 웹들이 많음 . ## Using javascript or jQuery : .on('resize', handler) 아래와 같은 코드를 이용해도 되는데... 이러는건 너무 귀찮긴 함. ``` $window.on("resize.deviceInfo", function() { if (window.innerWidth!==kipid.browserWidth) { // do something only when the browser width is resized. } }); ```/ ## Responsible Fixed ratio html element (Specially good for video) 유튜브 영상을 삽입하거나 할때 width 를 고정 px 로 해놓는 분들이 많아서 responsible 을 안쓰시거나, 못쓰시는 경우가 많은거 같은데... 아래와 같은 css 로 해결 가능. ```[.linenums.lang-html] <style> /* r(S)C: Ratio (Sub)Container */ .docuK .rC {} .docuK .rC>.rSC {box-sizing:content-box; -moz-box-sizing:content-box; position:relative; height:3em; padding-bottom:63%} .docuK .rC>.rSC>* {position:absolute; width:100%; height:100%; left:0; top:0} .docuK .rCfixed {position:fixed; z-index:100; top:0; right:0; width:640px; max-width:100%} .docuK .pc {text-align:center; font-size:.6em} /* position change */ </style> <div class="rC"><div class="rSC"> <iframe delayed-src="https://www.youtube.com/embed/ylBRut4LDRU" frameborder="0"></iframe> </div></div> ```/

이와 같이 뜸. 하라구 하앜하앜.

아래는 내가 구현한/하고있는 서비스 Recoeve.net - user/kipid - cat=[Music/Break]--Now 에서의 responsible fixed ratio video 예제.

그 외에 Google 의 devart 요 site 는 꼭 가보시길. 디자인이 완전 후덜덜... 100점 만점에 1억점 주고싶음. ## RRA

1. Blog - NARA Design - CSS3 미디어쿼리 이해; and Blog - Deutism 쫄깃한 웹 표준! - CSS3 Media queries Vol.1; 자세한 설명이 되어 있음.
2. MDN (Mozilla Developer Network) - CSS media queries
3. W3C Recommendation - Media Queries, 2012-06-19.; w3schools - CSS Media Types
4. NHN 개발자 블로그 - HelloWorld 블로그 반응형 웹 개편, 2012-06-15, by 정찬명.; CSS3 media query 뿐만 아니라 web performance optimization부터 cross browsing까지 꽤나 자세히 잘 설명되어 있음.
5. web design ledger - 30 Creative Examples of Responsive Web Design, 2011-06-03, by Prakash Ghodke.; Media Queries (mediaqueri.es); 반응형 웹 예제들. 브라우저의 넓이를 늘였다 줄였다 해보시길. 제 블로그도 아주 간단한 반응형으로 만들어놓긴 했음.
6. DevArt with Google; 최근(2014)에 열린 conference 같은데, 반응형 페이지가 아주 멋짐.