CodeBuzz

HTML - HEAD 태그

Nasty — Sat, 02 Oct 2010 03:16:01 +0900

정말 한 백년만에 적는 이야기인거같네요.. :)
최근에 궁시렁 대는글을 빼고는.. ㅎㅎ
슬슬 다시 HTML에 대해서 이야기를 해 볼까 하는데요..

지난번에 어떤 이야기를 했는지 가물가물 하다면 여기 를 클릭하면 됩니다.

지난번엔 HTML문서의 전체적인 구조를 한번 살펴봤군요..
다시 되짚어 본다면 HTML의 문서는 크게 세부분으로 나눠 볼 수 있습니다.

첫번째.. DTD선언부.
HTML문서의 타입과 버전을 선언하는 부분입니다.
이거 선언 제대로 안해주면 크로스 브라우징에서 애먹어요~

두번째는 HEAD 부분
오늘 자세히 설명을 할 부분으로 HTML문서의 전체적인 속성을 정의하는 부분이라고 볼 수 있습니다.

그리고 마지막으로 BODY부분
우리가 실제로 브라우저에서 보고 읽고 클릭하는 부분을 넣어두는 부분이라고 보면 됩니다.

자.. 그럼 이제 HEAD에 대해서 알아보도록 하겠습니다.

이 HEAD내부에 넣어둔 태그는 대부분 우리가 보는 웹브라우저상에서 확인을 할 수 없습니다.
딱 하나.. TITLE 태그만이 웹브라우저의 제목표시줄상에서 보여지게 되는데요..
HEAD는 말 그대로 HTML문서의 머리 역할을 하게 됩니다.

이 HEAD 태그 내부에 들어가는 태그들 역시 대략 세개가 있는데요..

첫번째.. META태그 입니다.
지난 글에 살짝 언급을 했었는데요..
이 META태그는 폭 넓게 봤을때 HTML문서의 속성을 정리 해 두는 태그라고 생각하면 됩니다.

지난 글에는 아래와 같은 코드를 소개를 해 드렸었습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML문서의 구조</title> </head> <body> HTML문서가 나오는 부분입니다. </body> </html>
위의 코드를 보면
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
와 같은 부분을 찾아 볼 수 있습니다.
이 부분이 바로 META태그인데요.. 이 태그의 목적은 HTML문서의 Content Type
즉, 문서의 컨텐츠 타입에 대해서 안내를 해 주는것입니다.

content는 일반 텍스트로 이루어진 html문서 (text/html)이고 문자 인코딩(charset)은 utf-8 이라는
일종의 유니코드 형식으로 이루어져 있다고 해석하면 됩니다.

이 외에도 META태그의 대표적인 쓰임새가 있는데요..
그것은 바로 검색엔진최적화(SEO)에 쓰이는 검색 키워드 설정입니다.

즉, 내 HTML문서와 관련된 키워드로는 이러이러이러한것들이 있다 라는것을 알려준다고 보면 되겠네요.

이 외에도 META 태그에는 Author, Copyright 등의 정보를 넣어서 검색엔진에 정보를 줄 수 있습니다. 하지만 이 META태그가 검색에 얼마나 유용하게 쓰이는지는 각 검색엔진의 특성에 따라 조금씩 다를수는 있다고 하네요

두번째로는 TITLE입니다. 위의 첫번째 코드에서 <title>HTML문서의 구조</title> 와 같은 부분이 바로 TITLE인데요 이 HTML문서의 제목을 넣어두는 태그라고 보시면 됩니다. 군더더기 없이 그냥 위와같이 넣어두면 브라우저의 제목표시줄이나 탭에 그 안에 있는 내용을 보여주게 되구요 검색엔진에 따라서는 TITLE태그의 내용도 검색에 반영하게 됩니다.

세번째로는 STYLE, LINK 태그가 있습니다. 이부분은 HTML문서의 Style Sheet를 위한 태그로, 웹문서의 스타일을 넣어주는 부분입니다. STYLE태그를 사용하면 아래처럼 태그 안에 일일이 CSS를 넣어주는 형태 (Internal CSS)로 사용을 해야하구요 <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,p,button{margin:0;padding:0;} body,h1,h2,h3,h4,th,td,input{color:#333;font-family:"돋움",dotum,sans-serif;font-size:12px;font-weight:normal;} body{background:#fff url(http://deco.daum-img.net/top/2010/bg_top_v01.gif) repeat-x;text-align:center;} </style> LINK태그를 사용하면 아래 코드처럼 CSS만을 모아놓은 파일을 link (External CSS)시키는 형태로 사용을 하면 됩니다. <link rel="stylesheet" href="http://photo-media.daum-img.net/css/media3/n_news.css?ver=20101001164835" type="text/css" /> CSS에 대해서는 다음에 한번 깊게 다룰 예정이니 여기선 이정도 알아 두면 될꺼 같네요..

그 외에도 <SCRIPT>태그가 올수 있는데요.. 문서에 사용되는 스크립트 언어를 사용하는 태그입니다. 이 태그에서 사용되는 스크립트는 주로 자바스크립트를 사용하는데요.. 아래 코드처럼 외부에 따로 모아둔 파일만을 링크 시킬 수 있구요.. <script type="text/javascript" src="http://photo-section.daum-img.net/-sports09/jigu.min.js"></script> <script type="text/javascript" src="http://photo-media.daum-img.net/js/media3/UI_2009.js?ver=20101001164835" charset="utf-8"></script> 혹은 아래처럼 직접 스크립트를 작성 해서 사용도 가능합니다. <script type="text/javascript"> //<![CDATA[ Click.print(); try{ if(SpaceBanner == "on"){ //실제 호출시 필요한 값들 SpaceAD.top = 26; SpaceAD.left = 250; SpaceAD.parentElement = $('Right'); SpaceAD.insert(); } }catch(e){} function pc2mobileClick(){ document.cookie='M_P2M=Y;expires=;path=/;domain=.daum.net'; if(daum.urlParameter.newsid) location.href = 'http://newslink.media.daum.net/mobile/'+daum.urlParameter.newsid; else if(typeof(sObj.newsid) && sObj.newsid != "") location.href = 'http://newslink.media.daum.net/mobile/'+newsid; else location.href = 'http://m.media.daum.net/media/'; } (function(){ var pc2mobileReExp = /lgtelecom|Opera.*SKT|PPC.*Opera|Smartphone.*Opera|800*480;NATE|NATE.*Browser|Mobile Safari|iriver|IEMobile NAVI|POLARIS|iPhone|Dolfin/; if(pc2mobileReExp.test(navigator.userAgent)){ document.getElementById('pc2mobile').style.display = 'block'; } })(); //]]> </script> HEAD부분에는 아래에 사용될 함수 등을 미리 선언해주는 정도로 사용을 하게 됩니다. 그 외에 실제로 스크립트를 실행하게 해주는 부분은 문서의 중간이나 최하단(권장)에 위치하게 되는데요 이는 문서가 채 로딩되기도 전에 혹시 모를 스크립트 오류때문에 문서가 안보여질 것을 미리 예방하기 위해 이렇게 사용하곤 합니다.

즉, HTML문서가 브라우저 상에서 렌더링이 거의 끝나서 보여질때쯤 해서 자바스크립트 실행을 시작하는거죠.. 그러면 스크립트에 오류가 있어도 해당 스크립트 실행만 안될뿐, 웹문서를 보는데는 큰 지장 없이 볼 수 있게 됩니다.

위의 이야기들처럼 HEAD는 직접적으로 보이지는 않는 부분이지만 웹문서를 보여주기 위한 아주 중요한 속성들을 담고 있는 부분이라고 보면 됩니다 :)

여기까지 기본적인 이야기였구요 다음번부터는 BODY태그 소개와 함께 대표적인 HTML태그들을 한번 살펴보도록 하겠습니다

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

양심을 찾는 내가 바본가...

Nasty — Thu, 30 Sep 2010 06:40:00 +0900

오늘 어머니랑 볼일을 마치고 집으로 들어오던중..
새벽 열두시가 넘은 늦은 시간인지라.. '지하 주차장에 자리가 없겠지' 하면서도 속으론 행여나.. 라는 생각에
지하 주차장으로 차를 몰고 들어왔습니다..

한두어달쯤 전부터 입주자들중 한분이 새 차를 뽑았는지..
L사의 신형 S 차가 종종 눈에 띄더군요...
이넘의 차가 눈에 띄는 이유가 내가 좋아하는 차라서.. 새차라서... 라기보단
무개념 주차의 달인이라 눈에 참 많이 띄였습니다..

아니나 다를까.. 오늘도 무개념 주차를 보여줬는데요...

저기 구석에 한 자리가 비었음에도 불구하고 떡하니 무개념 주차를 해 두었더군요...
안쪽에 차가 들어 있어도 용서받지 못하는 주차인데.. 참 난감합니다
애매하게 걸친 차 혹은 운전이 미숙한 초보운전자가 낑낑 겨우 주차를 해 놨는데..
다른 차가 이렇게 가로막혀 있으면 참 난감할듯 합니다...

저처럼 지하에 주차하러 들어왔다가 이 광경이 보이면.. 두말할것도 없겠죠 -_-

차 안에서 "에이.. 주차 못할꺼면 주차 할 수 있는델 찾아서 다른데로 가든가.. 아니면 빈자리에 주차를 하든가.."
라고 궁시렁 거리며 내리고 트렁크에서 물건을 가지고 집으로 올라가던 차에...

저 차 안에서 아주머니 두분이 내리고 계시는게 보였습니다.
한마디 해주었죠...

"아주머니 저기 공간이 저렇게 있는데 차 이렇게 대면 안되죠"
라고 하니 아주머니 대답이 가관입니다...

"어차피 내가 댈 공간 앞에 댄건데 뭐 괜찮아요..."

답변들은 제가 얼굴이 딱 굳어지면서.. 한마디 더했습니다

"아니 그건 그렇다 치지만 옆에 애매하게 걸치는 차들 생각은 안하세요?"

아주머니... 아니나다를까
"네 그런거 다 알아서 하고있으니 걱정마세요"

.. 뭐 이건 니가 손해보는거 아니니 그냥 조용히 지나가라 뭐 이런투였습니다..

저 역시 면허증에 잉크가 채 마르기도전인 말 그대로 면허딴지 이제 4개월 좀 지났는데다
차 몰고 다닌지 이제 4개월이 채 안되는데.. 저건 정말 아니라고 봅니다

궁시렁 거리는 말로 들으라는듯 말했습니다.

"아 나.. 주차에 자신이 없으면 차를 몰고다니지 말든가 누군 저렇게 세울줄 몰라서 안세우는줄 아나"

정말 주차를 못해서 저런건지.. 아니면 핸들 돌리기 귀찮아서..(사실 차 빼려면 그게 더 귀찮겠습니다만...)
저러는건진 모르겠으나.. 정말 대책이 없는 이웃인듯 합니다 -_-

아주머니! 주차에 자신이 없으면 차를 몰고다니지 마세요
아니면 잘 세울 수 있는데를 찾아서 주차를 하시던가요..
아주머니 논리대로라면 공공질서는 뭣하러 지키나요?

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

한여름 해안도로

Nasty — Tue, 10 Aug 2010 01:23:15 +0900

여름의 제주는 덥고 습하지만
이렇게 갑갑하고 심란할때 조금만 나가도 탁 트인 바다가 있어 좋고
사색이 필요할땐 멋진 풍경과 함께 사색할 장소를 제공해줘 좋은듯 하다

흘러가는 구름과 흘러가는 자동차들..

난 또 어디로 흘러가는가를 고민하게끔 했던 시간

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

갑갑한 일상...

Nasty — Sun, 08 Aug 2010 22:51:59 +0900

사는게 각박하고 갑갑한 요즘입니다..
그나마 휴가랍시고 숨좀 돌리고 사진 찍고 다니고 여유가 생기네요..

저기 떠나는 비행기.. 저 배처럼 어디론가 떠나가 있고싶은 요즘이네요

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

제주의 봄날

Nasty — Fri, 26 Mar 2010 10:25:25 +0900

요사이.. 추운 봄날이 계속 되었습니다..
특히나 추운것보다 흐린 날씨가 사람을 우울하게 만들었는데요..
오늘 정말 간만에 화창한 봄날씨를 보여주고 있습니다.

아침에 운전면허를 딴다고 학원을 다니는데요..
연습이 끝나고 찍은 한라산입니다.

어제 하루종일 흐리더니만... 한라산에는 눈이 많이 내렸나보네요 ^^;

아래는 연습 끝나고 회사 출근하는길에 찍은 길가의 유채꽃입니다.
위치는 제주국제공항 화물종합청사 인근이랍니다

정말 간만에 셔터를 눌렀더니...
사진이 영 꽝이네요 ^^;

그래도 주말 다가와서 이렇게 화창하니
드디어 봄이 왔구나 하는 느낌이 듭니다.. :)

그럼 오늘 하루도 힘내서 열심히~!

내일은 올레 16코스 개장하는데를 가기로 했는데...
이렇게 화창했으면 좋겠네요 ㅎㅎ

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

근황.

Nasty — Fri, 15 Jan 2010 19:44:30 +0900

최근 글이 무지 뜸했죠??

정신없는 나날을 보내고 있습니다..
여러분들과 보다 정확한 HTML지식과 더 깔끔한 CSS지식을 나누기 위해, 열공중입니다..

아마 이 열공기간이 지나면 본격적으로 html/css를 가지고
생계를 꾸려나갈(?)듯 합니다 ^^

뒤에.. 조금 여유가 생기면 열공했던 내용을 다시 한번 정리해서 공유 해 보도록 하겠습니다 (--)(__) 꾸벅

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

구글 넥서스원 발표

Nasty — Wed, 06 Jan 2010 17:48:02 +0900

구글이 스마트폰인 넥서스원(Nexus One)을 5일에 전격 발표를 했습니다.

당연히 자사의 공개 플랫폼인 안드로이드를 탑재하였으며, 기기 제작은 대만의 HTC라는 업체에서
제작을 하여 발표를 했습니다.

엔가젯(http://kr.engadget.com/)의 정보를 빌려와서 소개를 하자면..
안드로이드 2.1에 3.7인치 WVGA(800*480) 정전식 AMOLED 터치스크린
1Ghz의 퀄컴 스냅드래곤 CPU, 512MB램에 512MB 내장 메모리..
microSD로 외장메모리 32G까지 지원을 합니다. 그 외에 Wi-Fi, 블루투스, GPS, G센서 등이 있네요..

딱 한가지 아쉬운점이 멀티터치를 지원하지 않는다는 점입니다.

그치만, 이번 구글 넥서스원의 출시는.. 국내 정식 출시가 된다는 전제하에
국내 이동통신 시장의 환경을 바꿔줄수 있지 않나 하는 생각을 들게 합니다.

아이폰 파장...

아이폰 국내 점유율이 10%를 돌파했다는 기사를 본 적이 있습니다.
이제껏.. 국내 핸드폰 제조업체들의 스펙 다운 및 특정 통신사에 묶인 특정 서비스등을 필두로
사용자에게 좋지 않은 환경이 되었다는건 공공연한 사실이었습니다.

대표적인 예로 Wi-Fi 제거, WIPI강제 등이 있었죠..

아이폰이 출시되면서 이러한게 조금씩 깨지기 시작했습니다.

시작이 힘들뿐.. 한번 깨지기 시작하면 걷잡을수 없이 깨지게 되어있는게 이러한 시장 판도죠 ^^;

그렇다면 넥서스원이 가지는 의미는?

구글은 넥서스원을 이동통신사를 통해서 판매하는것과 같이
USIM만 넣으면 사용할수 있는 언락(Unlock)폰을 판매하겠다고 발표를 했습니다.

즉, 무선 망만 이통사에서 사용되는 망과 같으면 이통사와는 관계 없이 USIM카드만 넣으면
사용할수 있는 공기계를 단독적으로 판매를 하겠다는 말이죠.

이렇게 된다면 조금 비약적이지만..
이동통신사는 지금의 유선인터넷 사업자들처럼 그저 망 사업자의 위치로 될 가능성이 있습니다.
즉, 우리가 컴퓨터는 컴퓨터 제작회사에서 사고 인터넷은 망 사업자에게 가입을 해서 인터넷을 쓰듯..

이동통신 역시 핸드폰은 핸드폰 제작회사 (여기선 HTC나 삼성 LG 노키아 모토롤라 등이 되겠죠)에서 사고
망 사업자(여기선 SKT, LGT, KT가 됩니다)에 가입해서 USIM카드를 받아 이동통신을 사용하는것이죠.

물론 약정도 존재할것입니다.. 자신회사의 망을 일정기간 사용하는 조건으로
기기를 저렴한 값에 받아서 쓰는것도 불가능 해 보이지 않네요..(물론 지금도 그렇게 하고있죠)

성공적으로 된다면 국내 이통사들의 경쟁도 치열해질듯 합니다.
LG야 3G망이 아니라 어쩔수 없지만.. 3G를 사용하는 KT나 SKT간은 요금 경쟁및
가입자 유치, 망품질 에 지금보다 더 열을 올려야 되겠죠..
(어차피 같은 성능의 같은 폰이면 저렴한쪽으로 몰리기 마련이니까요)

이전 통화품질 등의 광고는 핸드폰의 몫이었습니다.
'걸면 걸리는...'
'한국지형에 강한...'

액션 영화를 연상케하는 듯한 화면에 안성기씨가 나와서 '본부 여기는 정상이다' 라고 외치며
핸드폰을 광고하는 CF마저 있었죠.. 산 정상에서도 잘 터진다는 이야기입니다.

이러한 판매 구조가 정착이 되면
이제는 이동통신사의 광고는 산 정상에서 스마트폰을 가지고 인터넷을 하는 광고가 나오지 않을까 싶네요 ^^;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

HTML 기본 구조

Nasty — Tue, 15 Dec 2009 16:00:00 +0900

어제에 이어 오늘도 HTML이야기를 계속 해 볼까 합니다 ^^

기본적으로 html문서파일은 우리가 흔히 메모장으로 만드는 일반 텍스트 파일입니다.
즉, html을 작성할때는 일반 메모장으로도 충분히 연습을 할 수 있단 말이 되겠죠??

HTML문서의 기본 구조는 아래와 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML문서의 구조</title> </head> <body> HTML문서가 나오는 부분입니다. </body> </html>

위의 내용을 메모장에 넣어서 .html 파일로 저장해서 실행을 시켜보면,
브라우저의 창에 "HTML문서가 나오는 부분입니다." 라는 글자를 확인 할 수 있습니다.

단, 저장할때 위 화면처럼 파일형식에 "모든파일", 인코딩에 "UTF-8" 로 저장해야 합니다.

실제로, HTML 태그들을 하나하나 뜯어서 보면,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이부분은 이 html문서가 어떤 문서타입으로 작성이 되었는지 알려주는 부분입니다.
Document Type Declation 이라고 하는데요, HTML의 많은 버전중 어떤 버전으로 작성을 했는지,
브라우저에게 알려주는 역할이라고 보시면 되겠습니다.

많은 버전의 DOCTYPE이 있고, 같은 버전이라도 strict, transitional, frameset 이 있는데요
해당 버전의 DOCTYPE은 여기 에서 확인 해 보시기 바랍니다 ^^

strict의 경우, 엄격한 문서타입을 의미하는데요,
표준을 엄격히 지켜 초창기 사용되던 태그나 특정 브라우저에서만 지원하는 태그의 사용이 제한됩니다.

transitional의 경우엔 strict보다 유연하게 관습적으로 사용되던 태그의 사용이 지원되고요,
framset의 경우 html문서의 frame을 지원하는 문서 타입입니다.

다음에 나오는 <html>은 제일 하단에 위치한 </html>과 짝을 이루는 복합태그입니다.
이제부터 HTML문서가 시작된다는 것을 알려주는 역할을 한다고 보시면 되구요,
하단의 </html>은 여기까지가 HTML문서다 라고 표시를 했다고 보면 됩니다.

이전에도 이야기를 했지만 태그에는 이렇게 시작과 끝이 있는 태그가 있는데요,
이 태그가 가지는 의미는 해당 내용이 여기<html>부터 여기</html>까지 포함된다고 생각하면 되겠습니다.

<head>~</head>
웹문서의 속성 설정을 하는 부분을 뜻합니다.
흔히 생각해서 웹페이지에 표시는 되지 않으나, 전체적인 문서의 속성을 지정해주는 부분이라 보면 됩니다.
예제에서 보시는 meta태그나, title등의 태그 및 그 외에 css나 javascript를 지정해주는 부분입니다.

<body>~</body>
웹문서의 본문이 나오는 부분입니다.
여기서 각종 태그들을 이용해서 웹문서를 나타낸다고 생각하면 됩니다 ^^

그 외에 여기서 사용된 태그를 안내를 해 드리면,

<title>~<title>
웹문서의 제목을 지정해주는 태그입니다.
제목이라고 해서 본문에 나오는 부분은 아니고.. 하단 그림처럼 제목표시줄에 나오는 부분입니다 ^^

여기까지 간단한 예제를 통해서 문서의 구조를 살펴 봤는데요,
HTML 문서 작성시 메모장이 불편하긴 하지만 처음 시작할땐 이만큼 좋은것도 없습니다 ^^;

추가적으로 별개의 에디터를 사용하시려면 추천 해 드리는 무료 에디터는,
vim(이건 처음에 사용하기 좀 어렵깁 합니다..^^;)
아크로에디터, 데이지 에디트 등이 있습니다 ^^

이러한 에디터를 사용하면 위의 html 화면처럼 각 부분별로 문법 하이라이팅이 지원되는 등의
편리함을 가지고 문서를 작성 할 수 있습니다 ^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

HTML

Nasty — Mon, 14 Dec 2009 16:00:00 +0900

지난주의 포스팅은 주로 CSS 그것도 요소의 레이아웃에 대한 이야기를 주로 했었는데요,
아는분들은 알지만, 모르시는분들은 "이놈이 무슨 이야기를 하는건가..." 하셨을겁니다 ^^;

사실 별 생각없이 포스팅을 한건데,
CSS 이미지 스프라이팅(2009/12/07 - [개발이야기] - CSS Sprite 를 이용한 간단한 롤오버 메뉴)을 포스팅한게
시작으로 탄력받아(일명 삘받는다 그러죠?) 작성하게 되었습니다. ^^;

이번부터는 차근차근 처음부터 짚어가도록 할테니 잘 살펴 봐주세요~

HTML (Hyper Text Markup Language) 란?

쉽게 생각하면 우리가 인터넷(WWW)에서 사용하는 웹페이지를 만드는 컴퓨터 '언어' 라고 생각하면 됩니다.
말 뜻대로 하이퍼텍스트를 표현하기 위한 '마크업 언어' 인데요, 마크업 언어란 문서의 구조를 표현하기 위한 언어로
일련의 요소(Element)들을 나열함으로 표현합니다.
뭔가 좀 어려운가요? ^^; 쉽게 풀면.. HTML 태그로 이루어진 문서라고 보시면 되겠습니다.

Tag 란?

위에도 알려드렸지만, HTML에서 문서의 구조를 표현하기 위해 해당 부분의 의미를 알려주는 녀석입니다.
비유를 하자면, 흔히 옷사러갈때 보는 가격태그 에 비유를 하면 되는데요,
가격 태그에는 해당 옷의 브랜드, 가격, 세탁법 등이 나와 있으며 해당 옷이 어떤 섬유로 만들어졌는지
정보를 알려줍니다.. ^^ 이와 마찬가지로 웹문서에서 HTML 태그는,
해당부분이 어떤 부분인지 (제목인지, 문단인지, 인용문구인지)를 정의하는 역할을 합니다.

이 태그들 중에는 혼자가 되어 그 역할을 하는 태그(단독태그),
시작과 끝으로 범위를 나타내는 태그(복합태그)가 있습니다.
단독 태그에는 <br>(line BReak)태그, <img>(image)태그 등 과같이 홀로 쓰이는 태그가 있고,
복합 태그에는 <p>(Paragraph)태그, <hn>(Headline n)태그 등이 있습니다.

문단처럼 문단의 시작과 끝이 있어 그 범위를 알려줘야 하는 부분의 경우엔 복합태그의 형태로 사용하고
이미지처럼 단순히 해당 이미지 하나를 보여줘야 하는 부분의 경우엔 단독태그의 형태로 사용합니다.
복합태그에는 시작태그와 종료태그가 있는데, 위의 예에 나온 p태그를 예로 들면,
<p>는 시작태그에 들어가고, </p>는 이 태그가 끝나는 종료태그로 보면 됩니다. ^^
즉, <p>~</p> 사이에 해당하는 문단을 넣으면 그부분은 브라우저가 문단 이라고 판단하여
웹문서에서 해당 부분을 문단으로 보여주게 됩니다.

하이퍼텍스트란?

결론부터 말씀드리자면 하이퍼텍스트는 웹문서에서 다른 매체(웹문서, 이미지, 영상 등)으로 이동하게끔 하는
기능을 제공하는것을 의미합니다.
원래 기본 개념은 텍스트와 텍스트를 연결하여 서로 건너뛰기식의 이동(링크)을 제공하는 개념입니다.
하이퍼링크 라고도 하는데요, 이러한 기능이 인터넷에서 World Wide Web 환경으로 들어오면서
일련의 정보에 대한 연관정보들을 한번에 제공할 수 있어 각광받게된 기능입니다. ^^

HTML문서를 어떻게 화면으로 보여지는지?

통신세계에선 규약(Protocol)이라는 녀석이 있습니다.
즉, 서로의 통신방법을 미리 약속을 해 두고 해당 방법으로 통신을 하는 것이지요.

이게 HTML에서도 적용이 됩니다. 이러한 HTML에서 사용되는 일련의 명령들(태그)에 대한 표준을
관리하고 배포하는 기관이 있는데요 그곳이 바로 w3c(World Wide Web Consortium) 이라는 단체입니다.
이곳에서 HTML에 대한 규격을 결정하면 그 규격에 맞춰 브라우저들을 만들게 되고
우리가 작성한 HTML문서는 브라우저에 의해서 규격에 맞게끔 보여지게 되는겁니다. ^^
(이러한 브라우저가 HTML을 해석하고 보여주는 것을 렌더링 이라고 합니다)

실제로 이런 규격에 대한 버전에 여러 개 있는데요, 현재 HTML 5가 꿈틀대고 있답니다 ^^

웹 표준, 웹 접근성이란?

웹 표준이란 w3c에서 만들어놓은 태그를 사용하는 표준 '권고안'을 뜻합니다.
요즘 웹 표준 준수 운동이 큰 이슈인데요 이는, 표준태그 만을 사용해서 웹문서를 만들자는 이야기입니다.
특정 브라우저에서만 보여 질 수 있는 태그를 사용하여 다른 브라우저를 사용하는 유저들의 접근성을 제한하지 않고
표준 태그를 사용하여 많은 브라우저, 많은 플랫폼에서 기능에 제약없이 사용하게끔 하는 내용입니다.

사실, 이러한 웹 표준을 잘 준수하면 웹 접근성이 어느정도 따라 오게 되어있는데요..
이전의 국내 웹 환경은 표를 만들어서 보여지는 <table>태그를 이용하여 웹문서의 레이아웃을 만들었었습니다.
즉, 지금 보는 블로그 화면을 기준으로, 상단에 셀 하나, 중간에 셀 두개, 하단에 셀 하나를 놓고
해당부분에 맞는 내용을 넣곤 했다는 것이지요..

이러한 방법은 <table>태그 본연의 기능에서 벗어난 사용이기 때문에 웹 표준에서 벗어나는 일입니다.
이것이 어떻게 웹 접근성과 관련이 있느냐...
웹 접근성은 장애인 비장애인 할 것 없이 누구나 편하게 웹을 쓸 수 있도록 하는 것을 말하는데요
만약, 스크린 리더를 이용하여 웹서핑을 하는 입장에서 봤을때 위의 <table>을 이용한 레이아웃은
스크린 리더가 해당부분을 표의 한 내용으로 안내를 하게 될 것입니다..
사실상 해당 부분 눈으로 보는것은 표가 아닌데 말이죠..

종합해서 쉽게 말하자면 웹 표준, 웹 접근성이란
사람(장애인-비장애인)에 차별 없이, 사용하는 시스템(OS, 브라우저 등)에 차별없이
누구나 웹을 이용할 수 있도록 하는 내용을 담고 있다고 보시면 되겠습니다. ^^

딱딱하게 글만 너무 길어졌네요...
정리를 해보자면,

요약.

1. HTML이란? 하이퍼텍스트를 나타내기위한 마크업 언어로 일련의 태그로 이루어져있음.
2. 태그란? 문서의 구조를 표현하기 위해 문서 부분부분을 정의해주는 명령어
3. 하이퍼텍스트란? 문서에서 각 부분부분으로 이동할 수 있도록 해주는 기능 (링크)
4. 웹표준, 웹 접근성이란? 누구나 편하게 웹을 이용할수 있도록 하는 문서 작성에 대한 권고안

이상입니다.. ^^
다음번에는 HTML문서의 기본적인 구조와 DTD선언, HTML에디터를 소개 해드리도록 하겠습니다 :)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS : Box Model

Nasty — Fri, 11 Dec 2009 16:00:00 +0900

CSS를 이용하여 레이아웃을 잡을때 크게 세가지를 이용하는데요,
하나가 position, 두번째가 float, 그리고 나머지 하난 이제 다룰 Box Model 입니다 ^^

기본적으로 우리가 html에서 다루는 거의 대부분의 요소^[각주:1]는 상자와 같은 Box Model로 되어있습니다.
이전에 다루었던 position이나 float은 해당 요소들이 어느곳에 배치 될 것인지를 각각
절대적인 방법 혹은 상대적인 방법으로 결정을 해 주었다면
이 box model은 해당 요소의 테두리나 여백등의 직접적인 레이아웃을 결정하게 됩니다.

이미지를 하나 보도록 하겠습니다.

Box Model

위의 이미지는 Box Model을 설명 해 놓은 그림입니다.
크게 네가지 영역으로 구성이 되어 있는데요, 각 영역은 다음과 같습니다.

content : 우리가 작성하여 보여지는 영역
padding : content영역을 둘러싸고있는 content와 테두리(border)사이 여백
border : 테두리
margin: 테두리 바깥부분의 여백

또한, CSS 2에 따르면 해당 영역의 width와 height는 content 영역의 크기^[각주:2]를 말합니다.
결국 해당 박스의 최종 크기^[각주:3]는 content의 width/height의 값에다가 padding과 border값을 합한 값이 됩니다.

자, 그렇다면 위의 값들은 어떤식으로 사용을 하는지 다음 예제를 보도록 하겠습니다.

HTML
<div id="wrap"> <div id="box_1"> Box 1 </div> </div>

CSS
#wrap{ width:450px; height:350px; padding:0; margin:0; border:1px solid #888; background-color:#000; } #box_1{ width:250px; height:150px; border:10px solid #800000; padding:20px 20px 20px 20px; margin:40px 40px 40px 40px; background-color:#fff; }

위의 예제들을 브라우저 상에서 보면 다음과 같이 보입니다.

바깥의 검은영역이 wrap 부분이고, 그 안의 하얀색 부분이 box_1 부분입니다.
바깥영역은 margin이 생겼다는것을 볼 수 있도록 하기 위해서 넣어봤는데요..
내부의 box_1 부분을 가지고 설명을 하도록 하겠습니다.

width:250px, height:150px 로 박스의 내용이 들어갈 영역의 크기를 설정합니다.
위의 예는 가로 250px, 높이 150px의 상자가 생성이 됩니다.
이 값은 px(픽셀)로 줄 수도 있고, em이나 %등 다양한 단위로 줄 수 있습니다 ^^

그리고 background-color:#fff 로 해당 영역의 배경색을 설정 해 주는데요
#fff부분이 색상이 들어가는 부분이며 보통은 #ffffff 와 같이 #+여섯자리의 16진수로 표현을 하는데
일부 #ffffff 처럼 모든 자리수가 동일 할때는 보는것처럼 각자리 하나씩만 해서 총 세자리로 표현하기도 합니다.
이 배경색부분은 box model에서 content영역과 padding영역에 적용이 됩니다.

그 다음 남은 속성중 padding: 20px 20px 20px 20px, margin: 40px 40px 40px 40px 가 보이네요
이부분은 각각 padding과 margin영역의 크기를 결정 해 줍니다. 마찬가지로 px, %등 여러 단위가 적용이 가능한데요

사실 이부분은 각각 다음과 같이 표현이 됩니다.
#box_1{ padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; margin-top:40px; margin-right:40px; margin-bottom:40px; margin-left:40px; }

위처럼 각 네부분의 영역을 따로 지정해주는 것을 간편하게 한번에 몰아서 지정해 줄수 있는데요
padding 혹은 margin 다음에 나오는 네부분의 숫자는 각각 위 오른쪽 아래 왼쪽 순서입니다.
쉽게 생각해서 시계 12시방향부터 시작해서 시계바늘이 움직이는 방향순으로 지정해준다고 보시면 됩니다.

또한, 위 예제처럼 모든 영역이 동일한 값을 가진다면 다음과 같이 CSS 선언을 해줘도 됩니다.
#box_1{ padding:20px; margin:40px; }

이처럼 간략하게 하나만 지정을 해 줄수도 있으며, 연달아 2개 3개도 쓸 수 있는데요,
2개를 지정해주면 상/하 값 좌/우 값을 표현하고,
3개를 지정해주면 상 좌/우 하 이렇게 표현하게 됩니다 ^^

다음 설명할 부분으로 border:10px solid #800000 이 있는데요,
이 부분은 박스모델의 테두리를 지정해주는 부분입니다.

이 border부분도 margin/padding 과 마찬가지로 여러 부분으로 나뉠 수 있는데요
border-top-width, border-right-width, border-bottom-width, border-left-width : 테두리의 굵기
border-top-style, border-right-style, border-bottom-style, border-left-style : 테두리의 모양
border-top-color, border-right-color, border-bottom-color, border-left-color : 테두리의 색깔
이렇게 나눌 수 있습니다.

즉, border:A B C 로 지정 하는 경우 테두리의 상하좌우 모두 똑같이 설정하는데,
A만큼의 두께로 B모양처럼 C색깔로 설정한다고 보면 됩니다.
이 역시 마찬가지로 border-top, border-right, border-bottom, border-left 로 각각 개별 설정이 가능합니다.

특이하게 여길부분은 style 부분인데요,
이 부분에 사용할 수 있는 값으로는
solid, dashed, dotted, double, groove, inset, outset, ridge 등의 값이 있습니다.
그중에서 실선인 solid를 많이 사용하곤 하지요..^^

크로스 브라우징을 염두해 두고 html문서를 작성하다보면 이러한 박스모델에서 골치썩는일이 생기는데요,
바로 브라우저마다 렌더링을 하는 방식이 달라 아래와 같은 문제점이 발생하기도 합니다.

DTD^[각주:4]를 정의하지 않는 쿼크(Quirks) 모드로 렌더링시 브라우저마다 달라지는 현상이 생깁니다.
확인을 해 보면 IE쪽은 width, height가 box model의 border 기준으로 잡혀 있고,
FF쪽은 content영역의 width, height로 잡혀 있습니다. 이를 해결하려면 html 문서에 다음과 같이
DTD를 선언 해 주면 됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8">

위의 소스에서 <!DOCTYPE HTML.... 로 시작하는 부분이 바로 DTD부분입니다.
이 한줄로 인해서 브라우저는 html문서가 html 4.01 strict^[각주:5]로 제작되었다고 해석하고 그에 맞는 렌더링 방법으로
보여지게 됩니다.

이것으로 레이아웃에 필요한 포지셔닝, 플로팅, 박스 모델까지 대충 정리가 되었는데요
이 세가지만 확실하게 알고 있으면 이런 블로그 스킨의 레이아웃을 만든다던가 할때
생뚱맞는 table 태그를 이용해서 레이아웃을 짜는것보단,
조금은 웹표준에 가까운 div태그등을 이용하여 레이아웃을 짜는데 큰 도움이 될듯 하네요 ^^

br, strong 등의 태그는 box model에 해당하지 않습니다. [본문으로]
IE6와 같은 구형 브라우저에서는 이게 잘 지켜지지 않기도 합니다. 이럴땐 DTD를 명시해줌으로 해서 해결이 됩니다. [본문으로]
사용자가 지정한값이 아닌 실제로 보여지는 상자의 크기 [본문으로]
Document Type Definition 의 약자로, 해당 html문서가 어떤 형태의 html을 가지고 작성했는지 알려주는 역할을 합니다. [본문으로]
DTD에 대한 설명은 http://trio.co.kr/webrefer/html/sgml/dtd.html 에 자세히 나와있습니다. [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS : Float 흐름끊기

Nasty — Thu, 10 Dec 2009 07:30:00 +0900

앞서 flow에 따른 float을 살펴 보았습니다.
실제로 float을 사용하다 보면 이리저리 예상치 못한 난관에 부딧히면서 머엉~ 해질때가 많은데요
그런 케이스를 몇개 추려서 한번 보도록 하겠습니다.

위 화면을 보면 뭔가 레이아웃이 깨져 있다는 것을 느낄 수 있을겁니다.
이 화면의 html 구조는 다음과 같습니다.

<div id="container"> <div id="header"> header </div> <div id="left"> 요즘 하루에 한개씩 글을 발행하게 되네요..^^; 오늘은 어제랑 비슷한거 같지만 다른 Float에 대해서 이야기를 해 볼까 합니다. Float을 사전에서 찾아보니.. 원래 단어의 의미는 부유하다, 표류하다, 둥둥 떠있는 등의 의미가 나오는데요 Float을 이해하려면 요소들이 배치되는 flow(흐름)을 알고 있어야 합니다. Flow란 브라우저가 요소들을 페이지에 배치하기 위해 사용하는 것으로, 파일의 가장 위에서 아래로 요소의 흐름을 따라가며 만나는 각각의 요소를 보여주게 됩니다. 보여주는 과정에서 블럭 요소를 고려하면서 각각에 라인 브레이크를 넣어주게 됩니다. 어제의 예제를 보면 position을 주지 않은 제일 첫번째의 결과를 놓고 보면 div요소는 결국 블럭요소이므로 각 요소마다 라인 브레이크를 넣어 각각의 요소가 탑 쌓듯 쌓여있는 모습을 보여주게 되는 것입니다. 블럭요소와는 달리 인라인요소의 경우, flow는 위에서 아래로 쌓이는 형태가 아닌 수평으로 왼쪽에서 오른쪽으로 바짝 붙어 흐른다고 생각하면 됩니다[각주:1] ^^ 이러한 흐름중에서 float은 단어의 뜻 그대로 flow 에서 해당 요소를 '띄운다' 라고 보시면 됩니다. 그렇다면 아래의 예제를 통해서 float을 익혀보도록 하겠습니다. </div> <div id="right"> right </div> <div id="footer"> footer </div> </div>

또한, CSS를 보도록 하겠습니다.

#container{ width:700px; background-color:#c8c8c8; } #right{ width:300px; float:right; background-color:#000; color:#fff; } #left{ width:400px; float:left; background-color:#333; }

티스토리 스킨을 조금 만져봤던 분이라면 익숙한 구조일 것입니다 ^^;
레이아웃이 블로그 2단 스킨의 그것과 흡사합니다.
근데, 화면을 보면 뭔가 조금 이상해 보일겁니다..

넵. 화면에 회색배경으로 된 div 요소..
즉 container 부분의 높이가 자식 요소의 높이를 반영하지 않는 문제점이 보이네요.
이는 floating된 자식의 요소가 부모요소에게 자신의 크기를 전해주지 못해서 생기는 문제입니다.
위의 레이아웃인 경우 보통의 블로그 스킨을 생각하면 footer부분은 화면의 하단에 위치하기때문에
footer부분에서 float을 없애주면 됩니다.

#footer{ clear:both; }

위의 스타일처럼 clear:both; 를 지정해주면 float이 사라져 아래와 같이 left 요소의 하단에 길게 위치함을
확인 할 수 있습니다.

자, 그렇다면 만약에 이전의 화면처럼 원래 footer가 right 아래 위치해야 한다면 어떻게 해결을 할까요?

방법은 :after^[각주:1] 가상선택자를 이용하여 float을 clear 할 수 있습니다.
즉, 아래처럼 container에다 :after 가상선택자를 이용하여 clear:both를 주고 새로운 스타일을 주면 됩니다.

#container:after{ content:""; display:block; clear:both; }

그러면 결과는 이렇게 변합니다.

또한, float은 각각의 크기에 민감합니다.
위의 상태에서 left 요소의 너비를 400px로 늘려서 확인을 해 보면 right 요소가 아래로 떨어지는것을
확인 할 수 있습니다.

부모 요소(container)의 너비가 700px인데,
자식 요소들이 각각 400px로 합이 800px가 되니 right 요소가 공간이 없어 아래로 떨어지는 현상입니다.
footer는 우리가 너비를 주지 않았기 때문에 유연하게 줄어든거죠 ^^;

특히 이러한 경우는 블로그 스킨에서 종종 나타나는 문제인데요, container가 고정 크기가 아닌 가변적인 크기거나
크기지정을 해 주지 않아서 브라우저의 너비가 충분히 넓을때는 문제없이 보이다가
브라우저의 너비가 좁아지면 해당 부모요소의 너비가 좁아지면서 내부의 자식 요소들의 레이아웃이 깨지기도 합니다.

해결법은 부모요소의 크기를 자식요소들 너비의 합과 같거나 더 큰 고정크기로 바꿔주면 해결됩니다 ^^

적다보니 float을 clear 하는 방법에서 글이 길어지네요..^^;
float에 대한 부분은 이걸로 마치도록 하고,
이후에 float에 관한 유용한 팁이 생각나면 다시 새로운 글로 적어보도록 하겠습니다. ^^

해당 요소의 뒷부분을 의미합니다. [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS : Float

Nasty — Wed, 09 Dec 2009 20:33:01 +0900

요즘 하루에 한개씩 글을 발행하게 되네요..^^;
오늘은 어제랑 비슷한거 같지만 다른 Float에 대해서 이야기를 해 볼까 합니다.

Float을 사전에서 찾아보니.. 원래 단어의 의미는 부유하다, 표류하다, 둥둥 떠있는 등의 의미가 나오는데요
Float을 이해하려면 요소들이 배치되는 flow(흐름)을 알고 있어야 합니다.

Flow란 브라우저가 요소들을 페이지에 배치하기 위해 사용하는 것으로,
파일의 가장 위에서 아래로 요소의 흐름을 따라가며 만나는 각각의 요소를 보여주게 됩니다.
보여주는 과정에서 블럭 요소를 고려하면서 각각에 라인 브레이크를 넣어주게 됩니다.

어제의 예제를 보면 position을 주지 않은 제일 첫번째의 결과를 놓고 보면
div요소는 결국 블럭요소이므로 각 요소마다 라인 브레이크를 넣어
각각의 요소가 탑 쌓듯 쌓여있는 모습을 보여주게 되는 것입니다.

블럭요소와는 달리 인라인요소의 경우, flow는 위에서 아래로 쌓이는 형태가 아닌
수평으로 왼쪽에서 오른쪽으로 바짝 붙어 흐른다고 생각하면 됩니다^[각주:1] ^^

이러한 흐름중에서 float은 단어의 뜻 그대로 flow 에서 해당 요소를 '띄운다' 라고 보시면 됩니다.

그렇다면 아래의 예제를 통해서 float을 익혀보도록 하겠습니다.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Float</title> </head> <body> <div id="poem_wrap"> <h1>별 헤는 밤</h1> <div id="img_area"> image here!</div> <p> 계절이 지나가는 하늘에는<br /> 가을로 가득 차 있습니다. </p> <p> 나는 아무 걱정도 없이<br /> 가을 속의 <strong>별들을</strong> 다 헬 듯 합니다. </p> <p> 가슴 속에 하나 둘 새겨지는 별을<br /> 이제 다 못 헤는 것은<br /> 쉬이 아침이 오는 까닭이요.<br /> 내일 밤이 남은 까닭이요.<br /> 아직 나의 청춘이 다하지 않은 까닭입니다. </p> <p> 별 하나에 추억과<br /> 별 하나에 사랑과<br /> 별 하나에 쓸쓸함과<br /> 별 하나에 동경과<br /> 별 하나에 시와<br /> 별 하나에 어머니, 어머니 </p> </div> </body> </html>

CSS
* { font-size:12px; } h1 { color:#008c00; font-size:16px; font-weight:bold; } #poem_wrap { width:500px; } #img_area { width:250px; height:250px; color:#fff; background-color:#008c00; }

위의 예제를 저장해서 보면 다음과 같이 요소들이 배치되는 것을 확인 할 수 있습니다.

<div>나 <h1>, <p>와 같은 블럭 요소들은 아까 말한것처럼 위에서 아래로 흐르고,
일반 글자나 <strong> 과 같은 인라인 요소들은 왼쪽에서 오른쪽으로 흐르는것을 확인 할 수 있습니다.^[각주:2]

여기서 #img_area 에다가 다음과 같이 속성을 한번 각각 바꿔보도록 하겠습니다.

float:right
#img_area { width:250px; height:250px; color:#fff; background-color:#008c00; float:right; }

float:left
#img_area { width:250px; height:250px; color:#fff; background-color:#008c00; float:left; }

위 스타일의 적용 결과는 각각 다음과 같습니다.

float:right

float:left

즉, float 속성에 의해 블럭요소가 어느쪽에 떠다니는지를 결정 짓게 되는데요,
브라우저는 일반적인 flow에 따라 요소를 배열 하다가 float으로 떠있는 요소를 만날 때,
해당부분 (왼쪽, 오른쪽)으로 둥둥 떠다니게 밀어 넣습니다.
그리고 해당 요소를 일반적인 flow에서 배제를 하도록 합니다.
그 다음 그 이후에 나오는 요소들을 float 속성이 들어간 요소의 경계를 존중 하면서,
나머지 공간에 기존의 flow대로 흘려 보여주게 됩니다.

기본적인 원리는 flow에서 둥둥 떠 다니는 것이지만,
겹쳐지면 안되기때문에 그 경계는 존중을 해 주는 셈이지요 ^^

이러한 float을 이용하면 상하로 쌓이는 기존의 flow를 좌우로 쌓이게 바꿀 수 있습니다.
다음의 문서를 살펴보도록 하겠습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Float</title> </head> <body> <ul> <li>menu 01</li> <li>menu 02</li> <li>menu 03</li> <li>menu 04</li> </ul> </body> </html>

이 문서를 열어보면 다음과 같이 리스트가 생성이 됩니다.

menu 01
menu 02
menu 03
menu 04

li 요소가 블럭요소이기 때문에 각각의 리스트는 상하로 쌓이게 되는데요,
이 것을 다음과 같이 css에서 float을 주게 되면 flow가 바뀌게 됩니다.

li { float:left; list-style-position:inside; }

menu 01
menu 02
menu 03
menu 04

flow와 관련된 다른 css 보기

이러한 float과 어제 다룬 position을 잘 이용하면 원하는곳에 요소들을 속속 배치할 수 있게 됩니다.
조금 더 보태서, 뒤에 다룰 박스모델과 함께 이용을 하면 위치잡는데 혼선이 없이 잡아줄수 있습니다 ^^

이번 이야기를 가지고 더이상은 불필요하게 table을 가지고 레이아웃을 짜는 일이 없었으면 합니다 ^^

일반적으로 텍스트를 넣을때의 경우를 생각하면 상상하기 쉽습니다. 위치를 지정해주지 않은 상태에서 img태그와 일반 문자는 서로 어울리지 못하고 위 아래로 떨어지지만, a태그나 em태그 등의 태그는 계속 오른쪽으로 추가되는 것을 확인 할 수 있습니다. [본문으로]
poem_wrap 블럭은 전체 레이아웃을 위해 잡아두었습니다. [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS Position 이야기

Nasty — Tue, 08 Dec 2009 19:54:21 +0900

오늘은 position에 대해 이야기를 해 볼까 합니다.
position 속성은 해당 박스의 위치 기준점을 결정하는 역할을 하는 녀석으로,
기본적으로 position 속성이 갖는 값은 static, relative, absolute, fixed 네가지가 있습니다.
일단, 테스트를 해볼 목적으로 박스를 몇 개 만들어 보고 기본적인 스타일을 적용 시켜 보도록 하겠습니다.

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>CSS position</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="first"> #1</div> <div id="secound"> #2</div> <div id="inner"> <div id="third"> #3</div> <div id="forth"> #4</div> </div> <div id="fifth"> #5</div> </body> </html>

CSS
* {margin:0;padding:0;} #first{ background-color:#f00; width:150px; height:30px; } #secound{ background-color:#0f0; width:150px; height:30px; } #third{ background-color:#00f; width:150px; height:30px; } #forth{ background-color:#ff0; width:150px; height:30px; } #fifth{ background-color:#0ff; width:150px; height:30px; } #inner{ background-color:#333; width:200px; height:200px; }

위와같이 작성을 하고 브라우저로 불러오면 아래와 같이 요소들이 딱딱 붙어있는 문서를 만날 수 있습니다.

아무 속성을 주지 않으면 기본적으로 position: static 과 동일한 상태를 유지합니다.
static인 상태에서는 위치를 지정해주는 top, left, bottom, right 의 오프셋이 적용되지 않습니다.

자, 그럼 이제 css를 몇군데 살짝 수정해서 relative는 어떤녀석인지 보도록 하겠습니다.

* {margin:0;padding:0;} #first{ background-color:#f00; width:150px; height:30px; position:relative; top:20px; left:20px; } #secound{ background-color:#0f0; width:150px; height:30px; } #third{ background-color:#00f; width:150px; height:30px; position:relative; top:20px; left:20px; } #forth{ background-color:#ff0; width:150px; height:30px; position:relative; top:0px; left:30px; } #fifth{ background-color:#0ff; width:150px; height:30px; } #inner{ background-color:#333; width:200px; height:200px; }

CSS를 위와같이 수정을 하면 다음과 같은 화면을 볼 수 있습니다.

우리가 수정한 요소를 보면 #1번 요소와 #3, #4번 요소의 CSS를 수정 했는데요,
수정을 했더니 위치가 조금씩 변경이 되어있음을 확인 할 수 있습니다.

relative 속성값은 기준점을 상대적(relative)으로 잡습니다.

쉽게 생각해서 해당 요소가 static으로 있을때의 위치를 기준으로 top에서 얼마만큼,
left에서 얼마만큼 움직인다고 생각하면 됩니다.

위의 static일때의 위치와 비교를 해서 보면 어떻게 움직인건지 한눈에 확인 할 수 있습니다 ^^;

다음은 absolute 값인데요, 일단 CSS를 아래와 같이 수정 해 보도록 하겠습니다.

* {margin:0;padding:0;} #first{ background-color:#f00; width:150px; height:30px; position:absolute; top:20px; left:20px; } #secound{ background-color:#0f0; width:150px; height:30px; position:absolute; top:40px; left:30px; } #third{ background-color:#00f; width:150px; height:30px; position:absolute; top:60px; left:40px; } #forth{ background-color:#ff0; width:150px; height:30px; } #fifth{ background-color:#0ff; width:150px; height:30px; position:absolute; top:80px; left:50px; } #inner{ background-color:#333; width:200px; height:200px; }

위와 같이 수정을 하면 다음과 같이 화면이 변하는 것을 확인할 수 있습니다.

재미있게 변했는데요, inner요소 자체가 위로 올라가고, inner요소 안에 있던 #4번 요소가
inner 요소 안의 최상단에 위치하게 되고, #1, #2, #3, #5번 요소는 웹문서 영역의 원점(좌측 상단) 을 기준으로
우리가 지정해준 위치대로 위치하게 됩니다.

absolute 값은 말 그대로 '절대적' 인 좌표값을 지정해주는 값입니다.
이전의 static이나 relative와는 달리 자신이 위치했던 공간은 싹 사라지고
그 위에 레이어를 덧붙히듯 붕 뜨는 효과를 가져오게 됩니다.

말 그대로 '절대적' 인 좌표를 갖는다고 생각하시면 됩니다..^^

여기서 #3번 요소는 조금 더 설명이 필요한데요,
그쪽부분은 inner 요소가 static이라 오프셋을 가지지 않아서 위와같이 보이게 되는겁니다.

한번 inner요소가 오프셋을 줘 보도록 하겠습니다.

#inner{ background-color:#333; width:200px; height:200px; position:relative; top:60px; left:80px; }

이렇게 오프셋을 주고나면 화면은 요렇게 변하게 됩니다.

즉, inner요소 밖에 있는 #1, #2, #5번 요소는 웹문서의 좌측상단을 원점으로 해서 보여지게 되고,
inner요소 안에 있는 #3번 요소의 경우 inner요소의 좌측 상단을 원점으로 해서 요소 안에 오프셋을 가지게 됩니다.

#3번 요소의 부모요소(inner)의 left와 top값을 그대로 반영 후, #3번 요소의 값을 반영했다고 보면 됩니다.

마지막으로 fixed가 남아있네요..^^;

fixed는 ie6에서는 구현이 되지 않습니다..^^ 위의 예제에서 #3번요소만 fixed로 바꿔보도록 하겠습니다.

#third{ background-color:#00f; width:150px; height:30px; position:fixed; top:60px; left:40px; }

이렇게 바꿔서 보면 inner요소 안에 있던 #3번 요소가 부모요소인 inner밖으로 삐져나오는것을 확인 할 수 있습니다.

이 fixed값은 기본적으로 화면의 좌측 상단을 원점으로 갖게 해주는데요,
재밌는점은 웹문서가 스크롤이 생겨 스크롤을 할 시, 해당 요소는 항상 같은 위치에 고정적으로 보여지게 됩니다.

이처럼 말이죠..^^

absolute와 fixed의 큰 차이점은 이렇게 화면에 고정적으로 보여진다는점,
즉 absolute는 부모요소의 오프셋을 받아와서 거기서 자신의 오프셋을 정하지만,
fixed는 해당 화면을 기준으로 오프셋을 결정한다는 점 입니다.

이러한 요소의 오프셋을 주는건 가끔 꼬이면 막막하게 느껴질때가 많습니다.
여러 요소들이 중첩되어있는 경우라면 더 심각하죠..^^;

이러한 네가지 값에 따라 어떤식으로 오프셋이 변하는지를 확실하게 알고 가면
조금 시간이 걸릴뿐, 요소들의 위치를 잡는데 큰 도움이 되지 않을까 합니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

CSS Sprite 를 이용한 간단한 롤오버 메뉴

Nasty — Mon, 07 Dec 2009 21:30:16 +0900

조금은 철 지난 이야기이긴 하지만,
예전에는 마우스를 메뉴위에 올려두면 색이 바뀌는 메뉴가 대세(?)를 이루던 때가 있었습니다.
(요즘은 포털이 아닌 왠만한 사이트에선 플래시를 많이 활용하더군요)

제가 아주 어릴적.. 그러니까 중학교 시절엔 어렴풋이 이런 기능을
자바스크립트의 마우스 이벤트로 처리 했었던 기억이 납니다..
(확실한건 아닙니다..^^;)

최근에는 각 포털들의 이러한 롤 오버 메뉴를 CSS Sprite 기법으로 표현을 많이 하는데요
이는, 각각 개별의 이미지를 잘라서 해당 이미지를 로딩하는 대신, 한번에 로딩을 하여
http-request를 줄여보기 위해 많이 사용합니다.

즉, 위의 화면에서 검은색 HOME과 빨간색 HOME을 따로 만들어서 보여주는 방식이 아닌
한 페이지에 모아놓고 그것을 위치만 바꾸는 식으로 보여주는 방법인데요,

이러한 이미지를 만들어 놓고, 평소엔 검은부분만 보여주다가,
마우스가 해당 부분 위에 올라가면 이미지를 위로 올려 붉은색 HOME을 보여주는 방법입니다.

간단히 만들어본 예제는 다음과 같습니다.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>CSS Sprite Menu 01</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="menu"> <ul> <li class="home"> <a href="#" title="home">HOME</a> </li> </ul> </div> </body> </html>

CSS

#menu .home a{ display:block; text-indent:-1000em; width:43px; height:12px; background:url('images/menu_01.gif') no-repeat 0 0; } #menu .home a:hover{ background-position:0 -25px; } #menu ul{ list-style-type:none; }

위의 코드를 보면 핵심은 background 이미지 스타일에 있습니다.
배경이미지를 넣은 박스의 크기를 HOME 텍스트에 딱 맞춘 가로 43px, 세로 12px로 만들어 놓고,
배경이미지의 좌표를 0 0 으로 설정해놓고 보면 당연히 검은색 HOME 텍스트만이 보이게 됩니다.
(박스 크기 때문에 하단의 붉은 글자는 안보이죠)

여기서 이제 마우스가 올라왔을때,
배경이미지의 y축을 -25px만큼 당겨주면 붉은색 HOME이 보여지게 되는 원리입니다.

다음의 경우 이러한 스프라이트를 많이 활용하는 편인데요,
미디어 다음 스포츠의 메뉴를 보면 다음과 같은 이미지 하나로 이루어져 있음을 알 수 있습니다.

이 메뉴의 경우 마우스가 오버되었을시 변하는 것은 아니지만,
각 페이지마다 on/off 되는 이미지를 한데 묶어, 각 부분에 맞는 background-image position값을 조절하여
적절하게 사용을 하고 있었습니다.

기본적인 배경이미지의 스타일인 경우 아래와 같이 on인 경우의 이미지를 보여주게 되어 있습니다.
#SportsGNB ul.gnb a { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:transparent url(http://img-media.daum-img.net/gnb_08/tab_gnb_sports_spr.gif) no-repeat scroll 0 0; display:block; height:34px; overflow:hidden; text-indent:-1000em; }

또한, off의 경우 position은 아래와 같이 주고 있습니다. (보이는 스타일은 축구메뉴 에 관련된 스타일입니다) #SportsGNB li.soccer a{ background-position: -74px -34px; width:50px; }

이 방법이 메뉴의 수가 적은 경우엔 큰 차이가 없지만, 포털사이트처럼 메뉴가 많은 경우엔 꽤 많은 request를 줄여 줄 수 있지 않을까 싶습니다. 또한, 이미지 관리가 훨씬 쉬워지겠죠 ^^;

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

2009년 12월

Nasty — Mon, 07 Dec 2009 20:53:27 +0900

2009년도 어느덧 4주밖에 남지 않았네요...
사무실엔 어느새 이런 크리스마스 트리가 들어서 있었습니다.

짜릿한 희열과 함께 2009년을 시작했는데..
뒤돌아 보니 뭔가 벌려놓은것은 많은데 제대로 마무리 한게 몇갠가 세어보기조차
부끄러운 한 해가 아니었나 싶습니다.

그나마 다행인건 그래도 그 와중에 제가 많은 것을 경험하고,
얻은게 조금이라도 있다는 것을 감사히 생각 해야겠지요.. ^^

연말 모든분들이 행복하게 마무리를 짓고
기쁜 마음으로 2010년을 맞이 할 수 있으면 합니다. ^^

여러분~ 행복하세요 ^-^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

IE8 다음 지도 API Polyline문제

Nasty — Tue, 24 Nov 2009 16:28:00 +0900

이전에 포스팅 했던 다음 지도 API를 이용한 GPS 정보처리 에서,
IE8에선 DPolyline 함수를 이용한 라인 그리기가 제대로 되지 않는 것을 확인했습니다.

IE8을 제외한 나머지 브라우저에선 잘 작동하네요..^^;

그래서 어쩔수 없이 코드 내부에 IE7과 호환이 되도록 하는 메타 태그를 추가 해 넣었습니다.
상단 <head> 부분에 아래와 같은 meta 태그를 추가하면 됩니다.

제가 작성한 지도api를 이용한 맵은 제주 올레코스를 그려놓았는데요..
http://altair84.net/olle_all.html 을 보시면 볼 수 있습니다 ^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

거문오름 용암동굴계 자전거 기행

Nasty — Tue, 17 Nov 2009 16:04:08 +0900

지난 11월 15일 지인들과 함께 특별한 체험을 하게 되었습니다..^^
제주에서 바람도서관을 운영하는 벙글님께서 진행하시는
'이야기가 있는 세계자연유산 자전거 기행' 이 바로 그것인데요
원래는 지난달 10월 25일에 진행했어야 하는 행사인데,
비가 내린 관계로 연기되자 저에게도 기회가 찾아왔습니다 ^^;

행사는 9시쯤, 거문오름 트래킹을 시작으로 진행되는데요,
이번 행사의 테마가 '거문오름 용암동굴계' 이기 때문에
거문오름 탐방을 시작으로 진행됩니다.

거문오름 트래킹 코스 입구를 들어가다보면,
왼쪽 사진과 같이 제주도 말로 '혼저옵서예' 란 표지와 함께,
각 나라의 인사말로 보이는 표지가 눈에 띕니다.
각 나라의 특색에 맞는 색깔과 국기로 표시를 해두었는데,
제가 그쪽으론 지식이 얕아서 어느나라 말인지 잘 모르겠더군요..^^;

딱 하나, '혼저옵서예' 란 말만 알아들었는데요..
제주도 사는 사람이니 당연한거겠지요? ^^;;

이 말 뜻은 '어서 오세요' 라는 말의 제주도 방언입니다.
'혼저' 란 단어에서 혼에 해당하는 ㅗ 는 아래아 발음인데요..
얼핏 중고등학교 시절 국어선생님께서 하신 말씀중에
이 아래아 발음이 제일 많이 남아있는곳이 제주도라는 이야기가 생각납니다.

많은 국어 학자들이 이 발음때문에 제주도를 찾거나,
옛 제주사람들이 많이 건너간 일본의 오키나와를 많이 찾아 간다고 하네요~
'혼저' 와 유사한 제주 방언으로는 '재개', '확' 이란 단어가 있습니다. ^^
어서, 빨리 등의 뜻을 표현하는 단어랍니다.

요즘 제주도가 무척 날이 추워졌는데요...
마침 또 이즈음 해서 비가 내리는 날이 계속 되어서 '비는 오지 않으려나~' 하는 걱정을 많이 하곤 했었습니다..

여름날씨였으면 비가 오는게 큰 문제가 되지 않을테지만..
추운날 비맞으면서 그것도 자전거를 타게 되면
왠지 골병(?) 이 들거 같은 기분이 들어서겠지요 ㅎㅎ

다행이도 이날 빗방울이 조금 떨어지긴 했지만 젖을만큼 비가 내리진 않았습니다.. ^^;
햇빛이라도 조금 내리쬐었으면 따뜻했을거 같긴 하지만..
비가 내리지 않는것만 해도 다행으로 생각하고 트래킹을 시작했습니다.

거문오름 트래킹은 안내하시는 분이 있어서 그분의 설명을 들으며 함께 트래킹을 하도록 되어 있습니다.. ^^ 자원봉사인지는 물어보지 않아 잘 모르겠지만.. 꽤나 해박한 지식을 가지고 계신 분이었던듯 합니다.

설명을 주시는 내용도 제주의 곶자왈^[각주:1]에 관한 내용부터 제주의 장묘문화, 거문오름의 식생과 생태까지 아주 다양했습니다.

유네스코 세계자연유산에 등재된 거문오름 용암동굴계 중에서 검은오름은 바로 이 용암동굴계를 형성하게된 계기가 되는 분화구로, 약 30만년~10만년 전 사이 거문오름에서 흘러나온 용암들이 흐르면서 동굴계를 형성하게 됩니다.

이 거문오름은 일명 거문고 모양으로 금오름 이라고도 부르는데, 다른 이야기로는 이 거문 이라는 어원이 '검다' 라는 뜻에서도 시작을 했지만, 다른 면으로는 '검' 과 '곰'에서 파생되었다는 이야기도 있습니다. '검'은 신(神)을 의미하며 '곰'은 토템사상을 나타낸다고 합니다. 즉, 이 '거문오름' 은 신성한 오름이라는 뜻으로 해석이 되기도 합니다 ^^;

제주시 조천읍 선흘리에 있는 거문오름은 표고 456m의 오름으로, 분화구의 규모는 백록담의 분화구보다 더 크다고 합니다.

이 거문오름에는 이런 화산지형과 함께 많은 식생들이 자리를 잡고 있었는데요.. 그중에 제일 눈에 많이 띄는 식물이 '삼나무' 였습니다. 곧고 빠르게 자라고 주위에 다른 나무들이 자라는 꼴을 못보는 삼나무의 특징때문에 아주 울창한 삼나무 숲을 이루고 있었는데요.. 이 삼나무가 일제시대때 목재용으로 쓸려고 심어놓은게 많다고 합니다.

목재로 많이 쓰이는데다, 성장속도가 무지 빠르기 때문에 심어놨다고 하네요.. 트래킹코스를 걷다 보니 이러한 삼나무를 벌목하고 다른 나무를 심으려는 작업들을 하던 흔적들이 보였습니다..
기왕이면 다양한 식생들이 자라는 오름이 더 보기 좋을거 같기도 하네요 ^^

2차 세계대전때 일본군은 제주를 군사 전초기지로 삼으려고 무척 노력했는데요..
그러한 우리의 아픈과거가 거문오름에도 곳곳에 남아 있었습니다.

이러한 일본군의 잔재들이 거문오름에도 많이 남아 있었는데요...
이런 동굴 진지 파는데는 역시 우리네 할아버지 세대들이 강제로 징용당해서 작업을 했을거라는 생각을 하니,
좀 마음이 씁쓸 하기도 했습니다.

이런 동굴 진지뿐만이 아닌, 군사 물자를 수송하는 수송로나 참호 등이 곳곳에 많이 보였습니다.
얼핏 듣기로는 이러한 각 오름에 동굴 진지들을 서로 연결해서 보이지 않는 네트워크를 구성하기도 했다니..
당시 일본군의 악랄함이 극에 달하지 않았을까 합니다.

헛... 사진이 흔들렸네요 ^^;
탐방 코스는 보시는것처럼 나무로 잘 해 두었습니다.
물론, 이렇게 평평하게 깔지 못하는 부분에 대해서는 일부 나무로 만든 계단등을 해놓기도 했지만요..
덕분에 큰 고생 없이 트래킹을 할 수 있지 않았나 합니다 ㅎㅎ

거문오름 정상에 오르면 이렇게 제주 동부의 오름들을 한눈에 조망할수 있는 전망대가 두군데 있습니다.
위 사진에서 보는곳은 한라산쪽의 오름을 조망할수 있는 전망대구요,
여기서 조금 더 가다보면 바닷가쪽으로 있는 오름을 볼 수 있는 전망대가 또 있습니다..^^
날씨는 흐리지만 시정이 좋아서 멀리 성판악 및 삼양에 있는 원당봉까지 보이는 날이었습니다..^^;

트래킹을 마치고 내려오다보니 이렇게 이쁜 우체통이 있었습니다.
(사실 위에 새 부분에 주소로 보이는 숫자와 전화번호가 적혀 있어 살짝 지웠습니다..^^;)

이렇게 거문오름 트래킹을 마치고 우리 일행과 함께 거문오름 용암동굴계 자전거 탐사를 같이 하게 될
다른 일행을 만나 점심을 간단히 먹고 자전거 하이킹을 시작했습니다..^^

자전거 하이킹도중엔 위험부담때문에 사진을 남기지 못했는데요..
대략 선흘 거문오름 탐방 안내소부터 시작을 해서 저 멀리 김녕 미로공원 근처까지 자전거를 타고 내려갔습니다.
올라올땐 트럭 뒷칸에 자전거와 함께 하이킹 한길을 다시 짚어서 돌아왔는데..
차로 대략 25~30분정도 걸리는 긴 거리였습니다 ^^;

원래는 만장굴을 들어가기로 했으나, 다들 제주도분들이고 만장굴을 한번씩은 갔다왔다 그래서
미로공원 근처에 있는 한 이름없는 굴^[각주:2] 에 들어가 설명을 들었습니다.
(사진의 파란옷을 입으신분이 이 행사를 주관하신 벙글님입니다 ^^;)

용천동굴 출처 : http://jeju.grandculture.net/

이제 거문오름 용암동굴계 이야기를 시작하는데요, 거문오름에서 시작된 파호이호이 용암^[각주:3]은 수십만년에 걸쳐 이 일대에 동굴계를 형성하게 되는데요, 이 거문오름부터 시작해서 북북동 방향으로 약 13Km떨어진 해안까지 흘러가는동안 수많은 동굴을 형성하게 됩니다.

현재까지 알려진 거문오름 용암동굴계에 속하는 동굴에는 선흘수직동굴(거문오름 트래킹코스 중에 있습니다), 벵뒤굴, 북오름동굴, 대림동굴, 만장굴, 김녕사굴, 용천동굴, 당처물동굴 등이 있으나, 이 지역의 특성상 계속해서 더 많은 동굴들이 발견될거라고 합니다.

사실 이러한 동굴들 때문에 이 일대 주민들은 땅 파는 개발을 꺼려한다고 하더군요..^^; 괜히 땅파기 시작했다가 동굴이라도 발견이 되면 재산권 행사를 하기가 힘들어지기 때문이겠지요~ ^^;

이 동굴들중 일반인이 들어갈 수 있는 굴은 만장굴 하나뿐이라고 합니다. 그것도 공개구간 (약 1Km정도)만 갈 수 있는데요, 그만큼 동굴의 보존이 아주 잘 되어 있다고 합니다.

거문오름 용암 동굴계중 특이한 굴은 용천굴과 벵뒤굴인데요, 용천굴은 사진에서 보는것처럼 용암동굴임에도 불구하고 석회질이 있어야만 생성되는
종유석과 석순등의 석회동굴의 특징을 가지고 있다고 합니다.

용천굴의 위쪽 모래사장에 포함된 조개껍질과 같은 석회질이 빗물에 녹하 함께 스며들며 생성이 되었다고 하는데요..
그러기때문에 더 희귀하고 신기해 보이는게 아닌가 합니다..^^; 다른 석회동굴들은 석회질의 토양덕분에 생기는거라 이런게 많이 있지만,
용암동굴에 그것도 모래에 포함된 석회질에 의해 생성되는 종유석이나 석순등의 석회물질은 좀 더 희소성을 띄지 않을까 싶네요..^^;
(이거 왠지 팔아야 할거같은 기분이;; 팔면 절대 안되는겁니다 ㅎㅎ)

또한, 벵뒤굴은 동굴구조가 대교모의 미로형 동굴로 되어있다고 합니다. 위치도 다른 거문오름 용암동굴계의 동굴들에 비해 차이를 보이는데요,
이 벵뒤굴은 거문오름에서 여러차레 분출한 용암이 분화구전면에서 평평한 용암대지 위를 여러갈래 갈라지고 합쳐지는 과정에서 형성되어,
복잡한 구조를 형성했다고 합니다. 총 4층 구조의 미로형으로 되어 있는데요, 이러한 구조덕분에 용암돌굴의 생성과정을 밝힐 수 있는 중요한 가치를 지닌 동굴이라고 합니다.

이렇게 하이킹을 통해 거문오름에서 나온 용암이 흐른 길을 쫒아 가 보고,
각 동굴에 대한 설명을 듣고 나니 온몸이 갑자기 피로한 감을 느꼈습니다..^^;

트럭을 타고 다시 출발점으로 온 일행들은 하나같이 '바람도서관' 에 가서
차 한잔 얻어마시고 가기로 했습니다..^^
그렇게 해서 열명정도 되는 인원들과 벙글님내외분 해서 바람도서관으로 향했는데요..

바람도서관은 조천읍 와흘리에 있는 통나무로 된 아기자기한 도서관이었습니다.

도착해서 보니 동그란 표시가 이곳이 바람도서관이라고 알려주는듯 했는데요.. 디자인에서부터가 벌써 바람의 향기를 물씬 느낄수 있는듯 했습니다 ^^;

11월이라 날도 추웠지만 이 때 시간이 대충 5시쯤이었는데 어둑어둑 해지는 기분을 받았습니다.
겨울이 다 되었다는 증거겠지요..^^;

바람도서관 이라는 이름답게 입구에는 이런 바람개비들이 방문객들을 맞이 하고 있었습니다. ^^;
일행중에 어린 꼬마애가 있었는데 나중에 이 앞에서 바람개비가지고 장난을 치더군요.. 애들이 무척이나 좋아할거 같습니다.

내부는 이렇게 복층 구조로 아래엔 온 사방이 책꽃이에 책들이 가득했습니다..^^;
내심 속으로 나도 이런곳에서 살고싶다는 생각을 살짝 했는데요.. 제가 보기와는 다르게 이런 책읽는것들을 좋아합니다..ㅎㅎ
책 내용들도 사진, 과학에서 소설류까지 다양하게 비치되어 있었습니다.
책은 기증도 받고 구매도하신다고 합니다.

이렇게 다들 수다를 떠는 사이, 차 마실 준비가 되어가고 있었습니다.

찻잔과 잔 받침이 이쁘장하게 생겼는데요.. 받침은 나무를 잘라 직접 제작을 하신듯 합니다 ^^;
차와 나무 받침이 왠지 모르게 참 잘 어울릴거 같다는 느낌이 들었습니다..

그리고 기다리고 기다리던 차..^^
이렇게 따뜻하게 서로 둘러앉아 차를 마시며 서로 소개도 하고 인사도 나누는데, 아니 왠걸?
다른분 일행중에서 제 초등학교 동창이 있던거였습니다..^^; 내심 반갑기도하고 어색하기도한... :)
사실 하이킹 하면서 얼굴을 제대로 못보고 차마시면서 얼굴 보고는 '설마' 했는데 이름을 들으니 확신을 했답니다 ㅎㅎ

우리가 마신 차 입니다.. 자스민과 녹차를 묶어놨다고 하시던데..
다들 생긴게 마치 '말미잘' 같다고 합니다..^^; 장난삼아 '말미잘 차' 라고 하기도 했습니다 :)

이렇게 오름 트래킹과 자전거 기행을 마치고 차한잔까지 하고 헤어졌는데요..
그저 눈으로만 둘러보고 마는 그런 기행이 아닌 설명을 듣고 몸으로 체험하고 직접 생각을 하는 기행을 해보니
새삼 제주에 대해 새로운 지식을 얻을수도 있었고, 아주 좋은 추억거리도 만든듯 하거 흐뭇했습니다. ^^

아쉬운점이 있다면, 이제 더이상 날씨가 추워져서 이 자전거 기행을 올해엔 계속 할수 없다는 점이었는데요..
날씨가 풀리면 다시 한번 더 해봤으면 하는 생각이 들었습니다 ^^

앞으로 이런 행사가 하나둘 계속 생겨났으면 합니다.. ㅎㅎ

관심이 있으신분들은 바람도서관 블로그 (http://www.nomoss.net/) 를 참고하세요~~

곶은 수풀이 우거진 곳을 뜻하고 자왈은 땅에 돌이 많아 농사를 짓지 못하는 땅을 의미합니다. 최근들어 곶자왈을 묶어 원시림을 표현하는 단어로 쓰이고 있습니다. [본문으로]
이름이 없는 굴이긴 하지만, 이곳에서 탐나는 도다 라는 드라마를 촬영했다고 합니다. [본문으로]
점성이 낮은 용암으로, 잘 흐르는 특성이 있습니다. [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

2012.

Nasty — Mon, 16 Nov 2009 13:36:01 +0900

지난 토요일인 11월 14일, 예정에도 없는 영화를 볼 껀수가 생겨 마침.. 2012를 보게 되었습니다. ^^

사실, 여자친구가 영화를 보고싶다길래,
뭐볼까 고민하다가 선택한 영화인데요...
딱히 볼만하겠다 싶은 영화가 없어 선택했습니다. ^^;

유명한 감독이죠? 롤랜드 에머리히...
스타게이트, 고질라, 인디펜던스데이, 패트리어트등을 감독했고,
투모로우로 재난영화도 인정받은 감독입니다 ^^;

'콘에어' 에 나왔던 존 쿠삭이 나오더군요..
어디선가 많이 봤다 싶었는데.. 콘에어였습니다.
찬조 출연(?) 으로 아놀드 슈왈츠제네거 캘리포니아 주지사도 나오더군요 ㅎㅎ
(요 이야기는 좀 아래..^^;)

영화 스토리는 정말 뻔한 스토리입니다..

보기전부터 예상을 하긴 했지만..
재난을 예고하는 과학자가 한명 등장하구요,
그 예고에 맞춰 천하무적의 미국 정부가 대책을 마련하지요~
그리고 재난이 덮치고.. 완벽하진 않지만 대책대로 움직여서
인류는 살아남는다... 뭐 이런 형식의 재난 영화입니다 ^^;
(이정도 가지고 스포일러라 하진 않으시겠지만;; 이후로 더 심한 스포일러가 나올수 있으니 영화를 보실 예정이시라면 과감히 뒤로 가기나 창을 닫아주세요 ^^;)

약간은 의아했던점이 미국 정부가 가지는 위상인데요...
사실 투모로우 에서는 미국 정부가 할수 있는거라곤
멕시코 정부의 부채 탕감을 해서 국경을 여는거 밖엔 없었거든요...

그치만, 요번엔 G8을 등장시키면서 미국정부의 비중을 크게 높여버렸습니다.
미국이 주도적으로 재난에 대비하며 어떤식으로 움직일지를 판단하게 되지요

여기서부턴 스포일러

투모로우에서 재난의 원인이 해수온도의 변화로 인한 내용이었다면, 이번 2012에서는 태양이 간섭합니다.
태양에서 필요이상의 과도하게 중성미자가 방출되는 바람에 그 중성미자가 지구의 내부를 뜨겁게 달궈서^[각주:1] 지각이 요동치는 설정인데..
비 전문가인 내가 봤을때도 설정이 너무 과도하게 가정한게 아닌가 싶을정도였습니다..^^;

중성미자가 지구에 영향을 미치지 않을 뿐더러, 지각이 너무 과도하게 춤을 췄거든요..
일례로, 극중 주인공들이 러시아제 자동차 수송기를 타고 하와이를 넘어 중국으로 향하는데 연료가 없어 동중국해에 불시착을 해야겠다는
장면이 나옵니다.. 그리고 불시착 대비를 하는데 왠걸? 아래 보이는 광경은 히말라야 근방의 티벳에 가까운 지역이더랍니다..
단 수~수십시간의 비행시간동안 지각이 엄청나게 움직인거죠..^^;

뭐 아무튼.. 이것저것 꼬투리를 잡으면 성할 영화는 없기때문에..^^;
그러려니 하고 재밌게 보면 됩니다

간간히 재미있는 요소도 하나둘 넣어두곤 했는데요, 주인공의 예전 부인이 살고있는 캘리포니아..
극중 예전 부인이 '주지사가 나와서 말을 하는데 지진이 이젠 끝났대' 라니까 우리의 존 쿠삭은 ..
'저양반 연기하는거야!! 연기자잖아' 라고 합니다..ㅎㅎ
때마침 TV에 어렴풋이 아놀드 슈왈츠제네거가 연설하는 장면을 보여주더군요..

영화의 종결부분은 딥 임팩트의 그것과 무척이나 닮아있었습니다.
'노아의 방주' 격인 거대한 배를 건조하여 그 안에 여러 동물들, 식물들과 주요 인물들을 탑승시키는데요..
그것을 두고 갈등요소가 발생하는 것 역시 딥 임팩트와 똑 닮았습니다..

과연 '누구' 를 구원하느냐의 문제지요..

조금은 더 직설적으료 표현을 하는데.. 이번에는 '탑승권' 을 판매합니다..
자그마치 10억유로나 되네요..^^;

뭔가 이걸 가지고 갈등을 만들어 가려 그랬는데... 실패한듯한 분위기가 많이 보였습니다 ㅎㅎ

이런저런 궁시렁 거릴 요소가 많긴 하지만...
그래도 역시나 눈을 뗄수 없는 CG가 압권이었습니다..
땅이 무너져 내린다거나, 옐로우스톤이 폭발하는 장면은 정말 장관이더군요 :)

한가지 아쉬운점은.. 국내 정서를 생각한다면 일본해 라고 직역을 하는것보단
동해 라고 의역을 했으면 어땠을까 합니다.. 뭐 물론 제작단계부터 동해 라고 해주면 금상첨화지만..
사실 아직 그게 안되는게 현실이니까요..

영화에 대한 평은..
'투모로우' 에 비하면 스토리나 이런저런 느끼는게 덜합니다..
사실 '투모로우'가 너무 잘 만들어졌기도 했지만요...

그치만 CG는 정말 거대합니다 ^^
적당한 설정과 눈을 압도하는 재난의 CG를 원하신다면 추천합니다.. ^^

영화에서는 전자레인지에 비유를 하던데.. 사실 전자레인지의 원리는 마이크로웨이브입니다.. [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

제주 해안도로 보리밭

Nasty — Mon, 16 Nov 2009 12:00:05 +0900

Tistory 달력공모사진 그 두번째..

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

신종플루 간이검사를 해보니..

Nasty — Mon, 09 Nov 2009 06:30:00 +0900

출처 : 위키백과

지난주 수요일 11월 4일, 일을 하다 몸에 한기가 오고, 힘이 빠지길래..
일하던 도중 사무실에 있는 체온계를 이용해서 체온을 측정 해 봤습니다.
처음에 오른쪽 귀에 대고 측정을 했더니 38.2도..;;
측정을 잘못했나 싶어 다른쪽 귀에다 측정을 했더니 38.7도가 나왔습니다;

아무래도 안되겠다 싶어 조퇴를 하고 신종플루 간이검사를 하러,
지역 거점병원인 제주 한라병원을 찾아 갔습니다.

평소 같았으면 그냥 몸살 감기려니 하고,
뜨거운 차 한잔 마시고 이불 푹 뒤집어쓰고 누워서 한숨 자거나,
몸살감기약 하나 먹고 말겠지만.

요새 신종플루^[각주:1] 이야기가 너무 많아 혹시나 하는 마음으로 찾아가,
검사를 받아 보기로 했습니다.
혹시나 신종플루라면 조금은 큰 일이 되버리니까요... ^^;

일단 병원에 있는 간이 진료소를 찾아갔습니다.
격리되어야 하는 특성상 병원 내부에는 만들지 못하고, 바깥에 컨테이너 박스로 간단하게 준비를 해 뒀습니다.
간이 진료소 안에 들어가, '신종 플루 검사 접수하려 왔습니다' 라고 하니..
담당하는 간호사는 '지금 진료시간 끝났는데요...' 라는 대답을 합니다.

순간 아픈것도 짜증나는데 그 말을 들으니 울컥했습니다..
제가 간 시간이 그리 늦은 시간도 아닐뿐더러, 상식적으로 생각해도 현재 국가전염병재난단계 심각 상태인데 다른 병원도 아닌
그것도 신종플루 거점병원이라는 곳에서 4시 30분 진료시간을 딱딱 맞춘다는게 이해가 되지 않았습니다..

업무를 봐야하는 직장인이나, 진료시간에 짬을 못내는 사람들은 진료를 받지 말라는 이야기로 들려왔습니다..

당번을 정해서 교대로 환자를 봐도 시원치 않을 판국인데 거점병원이라는 곳은 그렇지가 않았다는 점이지요...
하지만, 그 의문은 얼마 안가 풀렸습니다.

해당 병원 원무과에 친척분이 계신데..
친척분이 말씀하시길 응급실에 가면 진료를 받을 수 있다는 이야길 들었습니다.
이 사실도 참 황당한게.. 임시 진료소에서 진료 끝났으니 응급실로 가라 라는 이야기를
들은것도 아닌, 환자가 스스로 방법을 알아봐야 한다는 점이었습니다.

어쨋든, 응급실로 가서 접수를 하고 진료를 받게 되었습니다.
진료는 정말 간단하고도 심플했습니다..

처음, 열을 체크합니다.
이때 열을 체크했을때, 이미 제가 체크한것보다 더 올라 있었습니다.
39.2도를 나타내고 있었습니다...

그리고는 의사와 간단한 문진을 시작하게 됩니다.
몸살은 없는지, 기침, 콧물은 안나는지.. 머리는 안아픈지..
흔히 우리가 생각하는 감기 진료시 받게되는 청진이나 목이 부은상태 등은 전혀 안보고
그저 문진만으로 때우더랍니다.. 환자의 말을 100% 믿는 좋은 의사라고 봐야하는지;;

그 다음으로 구강내에 면봉을 넣어 검체를 채취하고 검사시약으로 보이는 병안에 넣어둡니다..
그리고는 '검사 결과는 15분 이후에 나오니 밖에 나가서 기다리세요' 라고 합니다..
그 사이 전 열이 많아 해열주사를 한방 맞게 되구요...

검사 결과로는 신종플루 반응에 음성으로 나왔다고 합니다.
그리고는 몸살감기약을 처방받고 수납을 하게 되는데.. 여기서 또 한번 기겁을 하게 만듭니다.

진료비 총액 48,500 원중, 환자 부담액이 35,530원입니다 ;;;
그중 재밌는것은 요양급여에 들어가는 부분인데요.. 투약 및 조제료가 요양급여에 들어가고, 제가 맞은 해열주사는 비급여 항목입니다.
거기에, 검사료 20,000원이 비급여네요...

이해가 되지 않는 부분입니다. 국민에게 건강보험료를 받아가고.. 이런 국가재난 상황에서는 비급여항목으로 빼버리다니..
돈없는 서민들에겐 이런 검사를 받는것 마저 부담으로 다가올게 뻔하게 보였습니다..
거기다 이 영수증엔 나오지 않지만, 응급실을 통해 진료를 받으면 20,000원이 추가가 된다고 합니다 -_-

거점병원의 응급실 신종플루 진료.. 누가 과연 이용하게 될까요?
일하다 몸이 안좋은 직장인들...
퇴근하고 가면 진료가 끝나 있을테니 응급실로 가겠죠...
공부 마친 학생들 역시 마찬가집니다.. 학교 마치고 가면 갈데라곤 응급실밖에 없습니다.

일반 진료를 풀타임 아니면 연장 못할거라면 응급실에서 적어도 신종플루 관련해서는 해당부분을 면제 해 줘야 하는거 아닌가 싶네요..

제가 있을때 마침, 자녀 셋을 데리고 오신 아주머니가 계셨습니다.
그것도 응급실로요.. 자녀 셋이 모두 간이 검사를 받는다고 치면.. 그것도 상당한 부담이 된다고 생각합니다.

'신종플루 간이검사' 라는 이름때문에, 환자들은 신종플루가 걸려도 문제, 안걸려도 문제가 생기고 있습니다.
간이검사에서 의심되면 정밀검사로 넘어가는데.. 이 검사비용은 대략 10만원을 넘어가는듯 합니다..
신종플루에서 저처럼 음성으로 나오는 환자들은 간이검사를 받았기 때문에 제대로된 감기 진료가 아니라서
다시 한번 계절 독감 진료를 받아야 하는 문제가 있지요..

결국은 의료비가 이중으로 나가게 되는 어의없는 상황이 되는거 같습니다.
최소한, 건강보험으로 간이 검사비가 처리가 되지 않는다면, 간이 검사를 하면서
이게 계절독감인지, 단순 몸살감기인지 등의 정확한 진료까지 한번에 해주면 좋지 않나 생각합니다...

출처 : 마린블루스

요즘 감기가 참 독하긴 하네요...

저 역시 요 며칠간 죽었다 살아난 기분입니다.
해열제를 맞고서도 열이 2~3일은 지속된듯 합니다...
기운도 못차리고.. 매번 출근했다 조퇴해서 집에서 일을 하기도 했구요..

무엇보다도 걸린후 치료하는것보단 안걸리게 예방하는게 우선이겠죠?

항상 청결을 유지하고,
손 발을 깨끗이 유지만 해도 많이 예방이 되는듯 합니다..^^

많은 분들이 어서 이 신종플루 공포에서 벗어났으면 좋겠습니다.

감기(독감) 및 신종플루 걸린 여러분,
어서 훌훌 털고 정상적인 일상생활을 하기 바랍니다 ^^
그럼 즐거운 한주 되세요~

신종 인플루엔자 A(H1N1) [본문으로]

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Windows 7설치, 사용기.

Nasty — Mon, 09 Nov 2009 04:00:00 +0900

지난 10월에 출시된 Microsoft사의 새로운 OS인 Windows 7을 구매하여
설치하게 되었습니다.. ^^

사실 구매 한지는 꽤 되었는데,
DVD를 사다가 구워놓는다는게 자꾸 깜빡하여 차일피일 미룬게
이렇게 지나가버렸네요..

버전은 Professional 64bit버전입니다.
사실 32bit와 64bit사이에 갈등을 많이 했지만, 어차피 앞으로 결국은 다들
64bit 체제로 갈거라는 판단 때문에 그냥 64bit를 골라 질렀습니다.

무엇보다 맘에드는점은, 제 하드웨어의 성능을 제대로 활용한다는 기분을
받게 만든다는 점이 될 거 같네요..^^

사실 Windows XP가 너무 오래된 운영체제이긴 했지만..
그에 비해서 제 하드웨어가 너무 앞서간 감도 있었죠.
뭐.. Vista를 사용한다는 방법도 한가지 방법이 될 수 있겠지만,
Vista를 써본 분들의 혹평이 너무 만만치 않아서 섣불리 다가갈 수 없었습니다.

이번엔 7이 좋은 평가를 받기때문에 그냥 한번 질러보자 라는 심정으로 사서 설치를 해본것도 없지 않아 있네요 ^^;

Windows 7에서 제일 먼저 눈에 띄는것은 다른 OS도 마찬가지지만 인터페이스입니다.

Aero 3D 창전환

윈도우키+탭을 누르면 위의 화면처럼 창 전환 효과가 나오는데요, 시각적인 즐거움을 주는듯 합니다.
사실 보통의 창 전환 단축키인 알트+탭을 눌러도 기존의 XP (VISTA는 제가 안써봐서 패스하겠습니다) 보다는 훨씬, 사용자 편의를 중심으로 변화했다는 것을 느낄 수 있는데요, 알트+탭으로 창 전환을 하면 기본적으로 다른 창들은 사라지고 전환 화면에서 선택된 창만이 윈도우에서 보여지게 됩니다.

alt+tab 창전환

바로 이런식으로 보여지게 되죠... ^^ 기존 XP에서 가운데부분 창의 이름만 보여지고 마는 창전환 보다는 훨씬 편해 진듯 합니다.
아무래도 이런식으로 해당 창을 보여주면 내가 어떤 작업을 하고 있었는지를 확인 하면서 전환이 가능하겠네요 ^^;
재밌는점은 알트+탭이든, 윈도우+탭이든 모두 바탕화면이 들어 가 있다는 점입니다 ^^;
기존 작업전환에서 바탕화면을 볼 수 있는 기능도 생겼네요..

또한, 하단의 작업표시줄에 보여지는 목록들도 바뀌었는데요..
오른쪽에 보시는것처럼, 작업표시줄에 커서를 올려두면 해당 프로그램에서
어떤 작업을 하고 있는지를 섬네일로 보여주고 있습니다.

IE8처럼 탭을 지원하는 녀석 역시, 탭으로 작업중인 작업까지 보여주고있네요

또한, XP에서 간단한 아이콘+제목표시줄의 제목으로 표현하던 것과는 달리
단지 프로그램의 아이콘만을 보여주고, 자세한 작업 내용은 마우스의 커서를
해당 아이콘의 위에 올려두어야 확인이 가능한 점이 달라졌습니다.

처음에는 이게 무지 불편했으나, 사용한지 얼마 안되고 나서, 쉽게 적응이 되네요
아직은 이게 편한건지는 잘 모르겠습니다.. ^^
한가지, 그룹으로 보여주는 기능은 이런 방식이 편하네요.. 적어도 클릭 한번을 아끼니까 말이죠 :)

하지만, 사용중 문제점이 몇가지 보였습니다.

아무래도 호환성 문제가 안될수 없었던지...
XP가 종종 필요할 때가 있었습니다.. 그래서 Professional 버전 이상이면 사용할 수 있는 XP모드를 설치해서 사용했습니다.
뭐 사실.. VPC에 XP를 구동시키는것과 같은 원리이긴 하지만, XP모드를 띄워서 작업하려니... 거기서도 되지 않습니다.
(VPN에 접속해야 하는 이슈였습니다)

결국은 Virtual Box를 깔아, 거기다 XP를 설치해서 사용했습니다..^^;
아무래도 가상화에서 외부 하드웨어 지원은 아직은 XP모드가
풀어야 할 숙제일듯 합니다.
그치만, 64비트에 가상화를 지원해서 그런지, XP에서 Virtual Box를 구동시킬때와는 정말 비교되는 안정성을 보여주었습니다.

아직 사용한지 일주일도 채 지나지 않아, 큰 장 단점을 느끼진 못하고 있는데요,
짧은 기간동안 설치하고 잠깐이나마 사용해본 결과로는 이정도 파악을 할 수 있었습니다.

무엇보다도 크게 다가온건 XP mode의 보완이 조금은 시급하게 느껴지네요...^^;
주위 말을 들어봐도 xp모드보단 vmware에 xp를 설치하는게 성능이 훨씬 낫다고 합니다.

이제 갓 나온 OS인 Windows 7 앞으로 어떤 모습을 보여줄지 기대하며,
앞으로 이 시리즈는 Windows 7을 사용하면서 계속 추가를 해 나가도록 하겠습니다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

2010년 티스토리 달력 사진 공모전

Nasty — Fri, 06 Nov 2009 11:58:03 +0900

매년 진행되고 있는 티스토리 달력 공모전.. 올해도 어김없이 돌아오고 말았습니다
올해로 4회째 진행중인데요.. 저도 작년부터 시작을 해서 달력에 사진이 오르진 못했지만...^^;;
뽑기 운이 작용했는지.. 달력은 받아서 잘 쓰고 있습니다.

작년의 경우 경품이 소니 사이버샷 T700 12대와 탁상달력 1000개였는데요..
올해는 넷북 12대와 탁상달력 1000개로 바뀌었네요 ^^;;

티스토리 사진 공모전 바로가기

기간은 09년 11월 2일부터 11월 22일까지 3주간 진행이 되구요
선성작 발표는 11월 26일 티스토리 공지 블로그에서 발표가 됩니다.
응모 자격은 당연, 티스토리 블로거라면 누구나 가능하겠죠? ^^

응모 방법은 위의 그림처럼, 직접 찍은 사진을 티스토리 블로그에 올리신 후,
태그에는 "티스토리달력2010" 과 "계절명" 을 넣으신 후 포스팅 공개 여부를 "공개" 혹은 "발행" 으로 저장하면 됩니다.

경품은 보시는것처럼 달력사진 12작품으로 선정된 분들께는 msi 넷북 WIND NB U100 Lite,
응모한 블로거들중 추첨을 통해 1,000분께 티스토리 2010 탁상달력을 드린다고 합니다.

응모작에 대한 갯수의 제한은 없다고 하니 이제껏 포스팅했던 사진이나,
하드디스크에서 조용히 잠들고 있는사진.. 이번 기회에 살짝 깨워보시고 운이 닿으면 넷북, 달력하나 정도 받아주는건 어떨까요? ^^

자세한 사항은 티스토리 탁상달력 사진공모전 페이지를 참고하세요~

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

한라산에 내린 첫눈

Nasty — Wed, 04 Nov 2009 16:01:34 +0900

11월의 시작을 알리는 첫 월요일인 11월 2일, 전국적으로 기온이 뚝 떨어지면서 곳곳에 눈이 내렸습니다.. ^^ 눈내리는 곳이 바다건너 남쪽 제주도라고 해도 예외가 없이 내렸는데요.. 이날 마침, 제 어머니께서 한라산에 다녀오셨습니다.

등산을 하실때면 항상 카메라를 휴대하고 가서 사진을 찍어오시곤 하는데요..
이번 역시 가서 첫 눈 사진을 남겨오셨습니다.

가을인가.. 하더니 어느덧 산에는 겨울을 알리는 첫 눈이 내리고 있었네요..
출근의 압박만 아니었으면 등산 같이 갔다왔을지도 모르겠네요 ㅎㅎ

비록 제가 찍은 사진은 아니지만.. ^^
혼자보기아까워서 이렇게 소개를 해 드립니다.

사진을 찍은 등산코스는 '어리목' - '윗세오름' 코스 입니다.

옆의 사진은 코스 중간쯤, '사제비 동산' 을 오르고, 약수터로 향하는 길에서 찍었네요

자, 그렇다면 사제비 동산에 내린 눈은 어떤 모습일까요??

사제비 동산을 오르는 등산로에 내려 쌓이고 있는 눈들입니다.
등산로는 나무 계단 및 돌계단으로 이루어져 있는데요..
군데군데 쌓인 눈들이 운치있어 보입니다. ^^

이정도 추위가 계속 된다면 지금 내린 눈들은 아마 내년 따뜻해질때 까지는 녹지 않을듯 하네요 ^^;

사제비 약수 조금 윗쪽의 등산로 입니다.
어리목 코스는 두번의 큰 경사가 나오는데요, 그중 첫번째가 아까 말했던 '사제비 동산' 이고 그 다음 나오는 경사가 '만세 동산' 입니다.
사진을 찍은 장소는 사제비 약수가 있는 곳인데, 사제비 동산과 만세 동산 사이에 있다고 생각하면 됩니다. ^^

사실 이 동산들을 빼면 어리목코스는 완만한 평지나 다름 없어서 사진에서 보는것처럼 바닥을 나무로 마감한 등산로를 걷게 됩니다.

한라산 고지대의 나무들은 이처럼 키가 작은 모습을 하고 있습니다.
바람이 세서 그런듯 싶은데, 나무들이 이렇게 일정한방향으로 자라고 있는 모습을 볼 수 있습니다. ^^

이때는 눈이 내리는 날이라 눈꽃이 피었는데, 눈이 내리지 않고 서리가 내리는 날에 올라가면
상고대 라는 색다른 눈꽃을 볼 수 있습니다 ^^

저도 등산하며 상고대를 한 두번 정도 봤었는데요.. 이땐 정말 동화속 얼음나라에 온것 같은 착각을 일으키기도 합니다

등산로의 정상인 '윗세오름' 에 가까워질때 찍은 사진이네요 ^^;
이쯤되면 입에선 본능적으로 군침이 돌기 시작합니다..

등산 후 올라가서 먹는 라면맛은 먹어본 사람만 알기 떄문이죠 ^^;

사진은 윗세오름으로 가는 오르막길에 서서 이제껏 걸어 온 길을 되돌아 보는 사진입니다.. ^^; 날씨가 좋았으면 저 멀리 등산하는 분들의 모습이 찍히지 않았을까 싶네요..

사실 겨울이 되면 한라산에서 맑은날을 보기가 정말 힘들게 됩니다.
항상 구름이 껴있어서, 등산할때는 사진에서 보는것처럼
안개가 껴있는듯한 날씨를 보여주게 되죠~

하지만, 재밌는 사실은 여기보다 더 윗쪽인 백록담에 올라가면 또 날씨가 어떻게 될지 모른다는 점입니다.. ^^

백록담 등산은 성판악과 관음사 두개의 코스로 가능한데, 코스중간에 사진처럼 안개가 껴 있어도, 백록담에 오르면 화창한 경우가 있었습니다 ㅎㅎ

이제 윗세오름 대피소에 거의 올라가고 있네요..^^;
사진에서 보이는 길의 끝에 대피소 산장이 나옵니다.
사진의 뒷태가 남자분인걸로 보니... 같이간 일행중에서 제 이모부 이신듯 싶네요 ^^;

이제 다 올라왔습니다..ㅎㅎ
사진에서 왼쪽에 보이는 산장이 옛 대피소인데요.. 요새는 어떤 용도로 쓰이는지는 잘 모르겠지만,
휴게소로 사용이 되지는 않고 있습니다. ^^;
대신 오른쪽의 건물에서 라면등의 간단한 먹거리를 파는 휴게소 역할을 하는데,
이곳이 기존보다 공간이 훨씬 넓고 깔끔해 졌습니다 ^^;

다음번 제가 올라갈땐 이 휴게소 안쪽 사진도 라면과 함께 '인증샷' 을 남겨봐야겠네요 ㅎㅎ

비오거나 하는날이 아니면 휴게소 맞은편 이런곳에서 라면들을 먹을 수 있습니다.
광장이 있는데, 이렇게 나무로 층지게 만들어놔서 앉아 쉴 수 있게 해놨습니다 ^^;
하지만, 겨울엔 눈으로 파뭍혀 큰 의미가 없게 되지만요... ^^;;;

항상 그렇듯, 봄과 가을은 어느샌가 짧아지고, 계절을 제대로 즐기려고 치면 어느덧, 여름, 겨울이 되어버리는듯 합니다.
특히나 산은 더 심한거 같구요..^^

사실 단풍구경을 다음주에 갈까 했었는데 산에는 이미 낙엽이 지고 눈이 내려있네요..
슬슬 겨울 산행 채비를 준비하고 언제 한번 제대로 올라가서 사진을 찍고 와야겠습니다 :)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

새별오름 가을 억새

Nasty — Mon, 02 Nov 2009 16:37:43 +0900

2010 Tistory 달력공모용 사진.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

다음 지도 API를 이용한 GPS정보 처리

Nasty — Thu, 22 Oct 2009 16:38:21 +0900

요새 올레코스 트래킹을 가끔 하고 있습니다.
내가 실제로 걸어본 거리도 궁금하고, 사진의 메타정보(exif)에 위치정보도 넣을 겸 해서 GPS를 들고 다니는데요..

이런 정보들을 구글 어스나 구글 맵을 봤을땐 해상도랑 정보에서 오는 차이때문인지
그다지 실감나게 보이지가 않았습니다.

해서, 현재 내가 사용중인 서버로 다음 DNA Lab에서 오픈API 키를 발급받아 한번 재미삼아 끄적거려봤는데요..
이제까지는 각 코스별로 파일을 따로 만들어 보다가, 이걸 한번 한 화면에 출력을 해주면 재밌겠다 싶어 함수로 작성을 했습니다.

xmlFile은 xml파일경로, olleCouse는 출력해줄 올레의 코스 번호, 마지막 lineColor는 라인의 색입니다.

이러한 함수를 가지고 3코스, 6코스, 14코스를 한 지도에 출력을 해 봤는데요..
아뿔싸.. 속도가 구글 크롬 이외의 브라우저에선 기어다니거나 아예 출력이 되지 않는거였습니다.

이전부터 xml파일의 용량을 의심하고 있긴 했는데요...

gpsbabel을 이용해서 포인트를 30초간격으로 다시 잡아주니 속도가 엄청 빨라졌습니다.
(gps기본값은 5초마다 로깅하게 되어있습니다)

html 전체적인 소스는 아래와 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Daum 지도 API</title>
		<script type="text/javascript" src="api인증키" charset="utf-8"></script>
	</head>
	<body>
		<div id="map" style="width:1000px;height:700px">
</div>
		<script type="text/javascript">
			function drawLine(xmlFileName, olleCourse, lineColor){
				DDownloadUrl(xmlFileName, function(_xml){
						var _marker=_xml.getElementsByTagName("trkpt");
						var point=new Array();
						for(var i=0;i<_marker.length;i++){
							point[i]=new DLatLng(parseFloat(_marker[i].getAttribute("lat")),parseFloat(_marker[i].getAttribute("lon")));
						}
						var pl=new DPolyline(point,{strokeWeight:2, strokeColor:lineColor});
						map.addOverlay(pl);
						map.addOverlay(new DMark(point[0],{infowindow:new DInfoWindow(olleCourse+" 출발"),draggable:false}));
						map.addOverlay(new DMark(point[_marker.length-1],{infowindow:new DInfoWindow(olleCourse+" 끝"),draggable:false}));
				});
			}

var map = new DMap("map", {
				point:new DLatLng(33.360907500, 126.533510000),
				level:10,
				contextMenu:true
				}); 
			map.addControl(new DIndexMapControl());
			map.addControl(new DZoomControl());
			var mapTypeControl=new DMapTypeControl();
			map.addControl(mapTypeControl);
			mapTypeControl.setAlign('left');
			map.setMapType("TYPE_SKYVIEW");

drawLine("olle03.xml","3코스","#FF00FF");
			drawLine("olle6.xml","6코스","#FF0000");
			drawLine("olle14.xml","14코스","#00FF00");
		</script>
	</body>
</html>

대충대충 짠거라 좀 빈약하긴 하네요..^^;

gps로그 정보를 가지고 메쉬업을 해봐도 재미있지 않을까 생각합니다 ^^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.