크롬이나 사파리 파폭의 최신브라우저에서는 textarea의 사이즈를 조절할 수 있는 기능을 제공하더라고
참 좋은 기능인데… 조절이 되면 안되는 경우 라는게 있을 수 있을테니 그런경우는 css에서…
textarea{resize: none}
이럼 되드라고. 근데 만약에 세로너비만 조절이 가능하게 하려면…
textarea{width: 500px; max-width: 500px;}
로 최대 너비를 지정해주면 되더라…
근데 스펙을 보니…
resize 의 값들이 여러개를지정할수있었던…
가능한 값들은…
none : 리사이즈 하지마
both : 리사이즈 가로세로 너비 가능
horizontal : 세로만 늘어나라
vertical : 가로만 늘어나라
참고해서 쓰자…
이걸 찾아본 팀장님은 resize-x로 찾아봤다고 하셨음 ㅎㅎ
다들 아는거겠지.. 논리적으로 생각해도 어렵지않고…
너무 놀았더니 이런것도 모르는 바보가 되었어.
했어요 =_=;
기분전환할려고 블로그 스킨을 바꾸기 시작했는데; 디자인을 못하니; 스트레스가 되려 쌓이는 느낌이 었어요 어쨌든 변경완료…
블로그랑 위키 적용했으니 이제 남은 서비스도 해야지요.
이제 미디어 쿼리를 적용해 봐야 겠어요 >_<
간만의 또 뻘글
얼마전에 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 입니다.
매년 4월9일에 자신의 웹사이트의 CSS를 꺼놓는 이 행사는 CSS가 없더라도 HTML 만으로 콘텐츠를 인식하는데 아무 문제 없음을 알리기 위해서 기획된 행사 입니다.
일몰님은 작년에 트래픽 감소로 인해 탄소 발생량이 줄고 지구의 환경이 좋아진다는 설도 얘기 하셨었네요:)
뭐 이제 웹 페이지도 구조와표현이 분리가 잘 되고 있다라는 얘기를 많이 들어서 이캠페인이 필요할까라는 생각도 들긴합니다. 하지만 아직은 CSS의 위대함과 html 마크업의 구조적 작성이 얼마나 중요한지 좀더 알리고 싶습니다.
참여방법
그냥 단지 자신의 웹 사이트(블로그, 홈 페이지등등)의 CSS 를꺼두면됩니다. 그리고
CSS naked day페이지의 하단의 폼에 자신도 이 캠페인에 참여한다는 폼을 전송하면 됩니다.
올해 우리나라에서는 얼마나 많은사람들이 참여할까요? 다 같이 벗어보아요:)