했어요 =_=;
기분전환할려고 블로그 스킨을 바꾸기 시작했는데; 디자인을 못하니; 스트레스가 되려 쌓이는 느낌이 었어요 어쨌든 변경완료…
블로그랑 위키 적용했으니 이제 남은 서비스도 해야지요.
이제 미디어 쿼리를 적용해 봐야 겠어요 >_<
간만의 또 뻘글
얼마전에 One Web 에 대해서 잠깐 언급한적이 있었는데.. One Web 을 구현하기 위해 꼭 알아야 하는 기술인 CSS3 Media queries Module 에 대해서 아주 조금 건드려 볼까 합니다. 예전에 스터디에서 했던 주제를 고친것으로 계속 발전시켜 볼 예정입니다.
HTML4.01 과 CSS2 에서 이미 media type에 대응하는 스타일 시트를 따로 구성할 수 있는 방식을 지원하고 있었지만, 미디어에 대한 특징이나 범위를 명확하게 지정할 수 없었기 때문에, screen, print, handheld 정도만 사용 되었던것이 사실이었습니다. 그래서 CSS3에서는 좀 더 미디어의 특징을 잘 표현할 수 있는 방법을 확장하고 세분화한 스팩을 제공하게 되었습니다. 그것이 CSS3 Media Queries Module 이 되겠습니다. 앞서 언급했지만 HTML4, CSS2에서도 media type에 따른 css를 분기하는 방법은 지원하고 있었습니다. 그예를 보면 HTML4.01 에서는 스타일 시트 정의 시에 media를 선택 할 수 있습니다.
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">참고 URL 은 다음과 같습니다.
CSS2에서 정의된 media type 정의방법은 다음과 같습니다.
@media screen {
* { font-family: sans-serif }
}참고 URL은 다음과 같습니다.
위의 방법은 출력될 media의 type만 결정 할 수 있기 때문에 같은 미디어의 다양한 환경을 모두 수용하기에는 어려움이 많습니다. 하지만 CSS Media queries Module을 이용하면 디바이스의 종류뿐만 아니라 다양한 조건을 이용하여 Style을 분기할 수 있게 됩니다.
미디어 쿼리의 문법 및 사용법은 다음과 같습니다.
media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: 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 | aspect-ratio(화면 비율) | min-aspect-ratio(최소 화면 비율) | max-aspect-ratio(최대 화면 비율) | device-aspect-ratio(디바이스의 화면 비율) | min-device-aspect-ratio(디바이스의 최소 화면 비율) | max-device-aspect-ratio(디바이스의 최대 화면 비율) | color(색상당 비트수) | min-color(최소 색상당 비트수) | max-color(최대 색상당 비트수) | color-index(user agent가 지원하는 팔레트의 색상 갯수) | min-color-index(user agent가 지원하는 팔레트의 색상의 최소 갯수) | max-color-index(user agent가 지원하는 팔레트의 색상의 최대 갯수) | monochrome(흑백 장치에서 픽셀 당 비트의 개수) | min-monochrome(흑백 장치에서 픽셀 당 비트의 최소 개수) | max-monochrome(흑백 장치에서 픽셀 당 비트의 최대 개수) | resolution(해상도) | min-resolution(최소 해상도) | max-resolution(최대 해상도) | scan | grid
무슨소리인지 저도 잘모르겠습니다. ㅎㅎ 미디어 쿼리는 대소문자를 구별하지 않으며 알수없는 미디어의 경우에는 false 를 리턴한다고 합니다. 
CSS3 Media Queries Module 에서 정의하는 Media의 종류는 다음과 같습니다.
뭔가 겁네 많은것 같아요. 일단 대충 이정도로 알아보고 실제 사용해보면서 알아보는거로 하는게 좋겠어요.
<link rel="stylesheet" media="screen and (min-device-width: 200px)" href="example2.css" />
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="example1.css" /> 예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/1.html
디바이스의 가로값이 최소 200px이상이면 example2.css를 로드, 디바이스의 가로값이 최소 800px이상이면 example1.css도 같이 로드함
<style type="text/css" media="screen and (min-device-width: 200px)">
body { background-color: #0F0; }
</style>
<style type="text/css" media="screen and (min-device-width: 800px)">
body { background-color: #F00; }
</style>예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/2.html
<style type="text/css">
@media screen and (min-device-width: 200px) {
body { background-color: #0F0; }
}
@media screen and (min-device-width: 800px) {
body { background-color: #F00; }
}
</style>예제) 아이폰과 웹 브라우저에서 비교 http://mydeute.com/media_queries/3.html
media type 을 선별하는 과정중에 선택할 수 있는 접두어
@media only handheld {
body { background-color: #F00; }
}@media not screen {
body { background-color: #F00; }
}user-agent의 현재 width 값에 대응해서 반응
@media screen and (width: 980px) {
body { background-color: #F00; }
}예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/4.html user-agent의 가로너비가 980px일때 배경이 빨간색으로 표현
최소 가로 너비를 지정하고 지정된 값보다 너비가 길면 그값에 대해 반응
@media screen and (min-width: 981px) {
body { background-color: #F00; }
}예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/5.html user-agent의 가로너비가 981px 이상 일때 배경이 빨간색으로 표현
최대 가로 너비를 지정하고 지정된 값보다 너비가 좁은 경우에만 그 값에 대해 반응
@media screen and (max-width: 980px) {
body { background-color: #F00; }
}예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/6.html user-agent의 가로너비가 980px 이하 일때 배경이 빨간색으로 표현
조합이 가능해짐 0~ 320px 까지는 배경이 파란색 321px~ 800px 까지는 배경색이 빨간색 801px이상의 너비에서는 녹색 배경을 만들고 싶다면
@media screen and (max-width: 320px) {
body { background-color: #00F; }
}
@media screen and (min-width: 321px) and (max-width: 800px) {
body { background-color: #F00; }
}
@media screen and (min-width: 801px) {
body { background-color: #0F0; }
}예제 브라우저의 가로 너비를 조절해보면서 보면 됨 http://mydeute.com/media_queries/7.html
브라우저 화면의 가로 너비에 따라 레이아웃을 변경할수도 있음
@media screen and (max-width: 320px) {
#wrap { width:320px }
#left { border:2px solid #F00; width: 316px }
#contents{ border:2px solid #0F0; width: 316px }
#right { border:2px solid #00F; width: 316px }
}
@media screen and (min-width: 321px) and (max-width: 800px) {
#wrap { width:800px }
#left { float: left; border:2px solid #F00; width: 196px }
#contents{ float: left;border:2px solid #0F0; width: 596px }
#right { clear:both;border:2px solid #00F; width: 796px }
}
@media screen and (min-width: 801px) {
#wrap { width:100% }
#left { float: left; border:2px solid #F00; width: 23% }
#contents{ float: left;border:2px solid #0F0; width: 50% }
#right { float: left;border:2px solid #00F; width: 23% }
}예제) http://mydeute.com/media_queries/8.html
아주 기본적인 미디어 쿼리의 사용법에 대해 알아보았습니다.
이 다음에는 제가 현재 제블로그 스킨을 좀 바꿔보려고 하고 있으므로 실제 적용기를 다뤄볼까 합니다.
그럼 그동안 즐거웠어요
예전에 웹 사이트를 만들때 사람들이 흔히 하던 얘기가 “한국은 네트워크 속도가 빠르니, 페이지 용량은 그렇게 신경쓰지않아도 괜찮아!” 라는 것이었습니다. 그래서 사람들은 퀄리티 좋고 화려한 사이트를 만들기 시작했죠. 플래시도 사용하고, 큰 이미지도 쓰고 해서 화려한 사이트를 만들기 시작 했는데;….
갑자기 스마트폰이니 아이폰이니 하는 상대적으로 느린 네트워크를 이용하고 작은 화면을 사용하는 환경이 추가가 되었습니다. 그래서 사람들은 작은 화면과 느린 네트워크에 최적화를 시킨 모바일 전용 사이트를 만들기 시작 했습니다. 작은 화면에 맞추려다보니 콘텐츠가 빈약해지기도 했습니다. 그래도 많은 모바일 전용 사이트가 생겨서 그냥 그런데로 사용을 했죠. 그런데 이제는 아이패드나 갤럭시탭 같은 화면은 크지만 이동하면서 사용하는 환경이 추가 되었습니다. 이제 웹 사이트를 만드는 사람은 어떻게 대응할까요? 또 아이패드 전용, 갤러시탭 전용 페이지를 만드시겠습니까?
물론 환경이 되고 돈이 가능하고 그렇다면 각 환경에 맞는 웹 페이지를 따로 만드는것이 가장 좋은 방법일지 모릅니다. 각 환경별 사이트를 만드는데 곱절의 시간이 들고 그 사이트들을 관리하는데 또 곱절의 시간과 인력이 투입 되어야 합니다. 그냥 원래 페이지를 내용에 충실한, 그리고 어떤기기에서도 무리없이 이용할 수 있게 만들수 있지 않을까요?
제가 보기에 모바일 사이트들을 보면 구멍난 곳을 계속 그때 그때 땜빵하는 처리 방식으로 밖에 안보입니다. 앞으로 얼마나 다양한 환경에서 웹페이지를 보게 될지는 아무도 모릅니다. TV에서도 보고 냉장고에서도 볼지 모릅니다. 손목시계만한 곳에서 웹 페이지를 볼지도 모릅니다. 그럴때마다 전용 페이지를 만들 수는 없죠. 현재는 타겟 기기가 얼마 안되지만 이제는 몇몇 기기만 대응해서 웹 페이지를 만들어서는 안될것입니다. 그래서 One Web 이 중요합니다.
이미 CSS3의 미디어 쿼리등의 기술이 많이 소개 되었고 많은 곳에서도 적용이 되고 있습니다. 하나의 페이지를 만들어서 다양한 환경에서 웹을 볼수 있게 해주는 방법은 얼마든지 있습니다. 또한 특정기기에 종속적인 기술은 웹 페이지에서는 더 이상 사용해서는 안될지도 모릅니다. 아님 사용하더라도 그러한기술들이 표현되지 않을때의 대안을 준비해야 할것입니다. 이렇게 만든 페이지는 어떤 환경에서도 웹 페이지로서의 역할을 충실히 해낼것 입니다. 저는 그런 웹 페이지가 많이 생기길 바라고 있습니다.
CSS Naked Day '09
벌써 세번째 참여하는 CSS naked day 입니다.
매년 4월9일에 자신의 웹사이트의 CSS를 꺼놓는 이 행사는 CSS가 없더라도 HTML 만으로 콘텐츠를 인식하는데 아무 문제 없음을 알리기 위해서 기획된 행사 입니다.
일몰님은 작년에 트래픽 감소로 인해 탄소 발생량이 줄고 지구의 환경이 좋아진다는 설도 얘기 하셨었네요:)
뭐 이제 웹 페이지도 구조와표현이 분리가 잘 되고 있다라는 얘기를 많이 들어서 이캠페인이 필요할까라는 생각도 들긴합니다. 하지만 아직은 CSS의 위대함과 html 마크업의 구조적 작성이 얼마나 중요한지 좀더 알리고 싶습니다.
참여방법
그냥 단지 자신의 웹 사이트(블로그, 홈 페이지등등)의 CSS 를꺼두면됩니다. 그리고
CSS naked day페이지의 하단의 폼에 자신도 이 캠페인에 참여한다는 폼을 전송하면 됩니다.
올해 우리나라에서는 얼마나 많은사람들이 참여할까요? 다 같이 벗어보아요:)
처음에 블로그를 만들때는 수정블로그를 사용했는데.. 스팸이 너무 많아서 닫았습니다. 그래서 두번째는 지윤님의 추천을 받아 택스트패턴을 사용을 했고 약 3년간 잘 사용해 왔습니다. 그런데 트랙백이 지원 안되는 문제는 심각하더라구요.
가뜩이나 오는 사람도 별로없는 블로그에 트랙백도 안되고 코멘트를 남기는시스템도 불편하고.. 무엇보다 글을 쓰는 방식(textile)이 맘에 안들었습니다.
그래서 블로그툴을 바꾸기로 결심하고 알아보는데… 현석님이 좋은 사이트를 하나 알려주시더 라구요. 블로그 툴 간의 스팩을 비교하는 사이트 였습니다. 기능이 진짜 많은 툴도 있었고 좋아보이는 툴도 있었습니다만 제가 선택한것은 WordPress 였습니다. 이유는 일단 제가원하는 기능이 모두 지원 되었고, 텍스트패턴에서의 데이터 이동도 지원이 되었죠. 주변에 많은 사람들이 사용을 하고 있어 정보 공유가 빠를것 같았기 때문이죠.(수정의 현석님, 택스트패턴의 위스턴님 죄송=_=)
워드프레스의 textpattern 에서의 import 기능지원
그래서 워드프레스를 설치하고 기존 블로그의 데이터를 가져왔습니다. 예전에 할때는 잘 안되었던것 같은데 이번에는 무척 잘되는군요. 글, 코멘트 카테고리등이 모두 제대로 옮겨졌습니다. 4000여개의 스팸까지도 말이죠 =_=;;;
그런데 문제가 있었습니다. 마이 그레이션을 하고 깔끔하게 기존 DB를 지웠는데 그 DB중에 제가 메인으로사용하는 CSS가 저장되어 있었습니다. 초천재님이 만들어준 디자인인데 deuticious, planet, blog를 모두포함하고 있어서 저에게는 중요했거든요… 다행히 서버 관리자인 정태영군에게 백업DB 를받아서 CSS는 복구 했습니다.
textpattern에서 사용하는 textile이 자동변경되지않고 그냥 글에 노출이 되었기 때문에
textile을 사용한 흔적
태영군이 그자리에서 plugin을 하나 만들어 주더군요.. 역시 천재!!
이제 예전에 사용하던 스킨을 그대로 입힐 차례 입니다. 뭐 이건 전문 분야인데다가 워드프레스의 문법이 그렇게 어렵지 않아서 순조롭게 진행중(응?)에 있습니다. 조만간 추가된 기능에 대한 CSS만 추가가 된다면 좀 더 이쁘게 보이지 않을까 생각합니다.(전 이 디자인 맘에 들어요^^)
툴은 워드프레스이지만 폴더명은 “txp”를 그대로 가져가기로 했습니다.
이미 txp 로 너무 오래 블로깅을 해서 바꾸면 혼란이 있을것 같았고, 만약에 걸려있을 다른곳에서의 링크도 살려야했기 때문입니다.
마찬가지로 RSS주소도 현석님의 도움을 받아서 .htaccess 에서 리다이렉트하는 방식으로 기존주소를 그대로 사용하게 되었습니다. .htaccess에대해서는 조만간 블로깅 하겠습니다.
제가 원한것은 획기적인 변화가 아니라 기능개선 정도 였기 때문에 위의 삽질들을 진행했었습니다만 잘한짓 인것 같아요ㅎㅎㅎ 링크는 살아있어야하니까요..
몇가지 문제점만 해결을 하면 되는데… 결혼식 갈준비를 해야 하는군요..저녁에 마저 해야 겠습니다.
mydeute.com의 모든 저작물은 크리에이티브 커먼즈 저작자표시 3.0 Unported 라이선스에 따라 이용하실 수 있습니다.
