현재 제정되고 있는 CSS3 Module 중 CSS Multi-Column Layout Module은 Candidate Recommendation 상태로 거의 권고 마무리 단계에 이르렀으며, 웹 브라우저의 지원 상황도 다른 모듈보단 비교적 양호한 상태이다.

물론, IE나 기타 미지원 브라우저를 위한 간단한 JavaScript pollyfill도 마련되어 있으며, 아무런 조치를 취하지 않아도 원래 내용을 전달하는 데는 별문제가 없어서, 지금 당장 써먹어도 큰 불편은 없다고 할 수 있는데 요놈의 쓰임새는 다음과 같다.

.two-col {
  -webkit-column-count: 2;
  -webkit-column-gap : 20px;
  -webkit-column-rule: 1px dashed #ccc;
  -moz-column-count: 2;
  -moz-column-gap : 20px;
  -moz-column-rule: 1px dashed #ccc;
  column-count: 2;
  column-gap : 20px;
  column-rule: 1px dashed #ccc;
}

이렇듯 그 사용 방식도 명확해서 이해하기도 쉬운데, 브라우저별 구현 방식에서 아직 몇 가지 소소한 차이가 있어서 예상치 못한 부작용을 가져올 수도 있다. Safari와 Firefox의 CSS3 Multi-Column Layout Module 구현 버그(이)란 제목의 글 마저 읽기 →

웹에서 가끔 눈에 띄는 adf.ly나 linkbucks.com 서비스로 생성된 링크를 누르면 광고 페이지로 연결되면서 몇 초간 광고를 쳐다봐야만 원래 방문하려는 페이지로 이동할 수가 있는데, 물론 자주는 아니지만, 막상 닥치면 이런 잠깐의 기다림도 성가시고 불필요한 시간 소비로 느껴질 수밖에 없다.

그래서 이런 불편을 덜고자 하는 생각이 또 하나의 익스텐션 아이디어로 발전하면서 광고 넘김이가 만들어졌다.

원리는 아주 간단해서, 광고를 보여주는 페이지에 있는 원래 방문하려는 페이지의 주소를 가져다 document.location 값에 전달해서 바로 이동하게 하는 구조. 물론, 이렇게 간단한 꼼수를 부렸기 때문에 광고 페이지에 있는 JavaScript 구현 방식이라도 바뀌면 거기에 맞는 수정이 필요하다.

가장 큰 난관은 각 서비스로 연결된 공개되지 않은 은밀한 사이트의 주소가 알고 보니 한두 개가 아니었는데, 이미 나와 있는 비슷한 기능의 Google Chrome extension인 Linkbucks skip과 UserScripts에 공개된 AdsFight! for Greasemonkey에서 그 목록을 확보할 수 있었다.

앞으로 비슷한 다른 서비스 지원은 보이는 대로 추가할 예정.

사람은 죽음을 두려워한다. 하지만, 죽은 것 자체가 두려운 것이 아니라—죽어 있음을 느낄 수는 없을 테니까—바로 자기가 사랑하는 그 어떤 것을 더는 지속할 수 없기 때문이리라. 진정 두려운 것은 바로 삶의 마침표인 것이다. 당신은 지금 이 순간 진정으로 원하는 것을 하고 있는가—삶을 살아가고 있는 것인가, 아니면 혹시 그냥, 그날을 기다리기만 하고 있는 것은 아닌가?

우연히 방문한 블로그의 Alive란 제목의 글에서.

보통 메뉴를 마크업할 땐 li로 나열해서 float propterty를 줘서 일렬로 늘어트린 후 감싸고 있는 상위 엘르먼트에다 width를 지정하고 margin propterty로 중앙에 위치시키는 기법이 많이 사용된다.

그런데 메뉴가 더 추가되거나 삭제되면 전체 가로 너비를 다시 지정해줘야 하는 문제가 발생하는데, 이런 단점을 보완한 기법이 있는데 바로 display:inline과 display:inline-block propterty에 그 해법이 있다.

CSS Wizardry에 소개된 기법으로 마크업과 CSS는 다음과 같다.

마크업:

<ul id="nav">
  <li><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/work/">Work</a></li>
  <li><a href="/clients/">Clients</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

CSS:

#nav{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
}
#nav li{
  display:inline;
}
#nav a{
  display:inline-block;
  padding:10px;
}

text-aling:center;로 inline 속성을 갖게 된 li를 중앙 정렬하되 중요한 것은, li에다 display:inline;을 주고 a에는 display:inline-block;을 지정해 주는 것.

일반적으로 그냥 li에 display:inline-block;을 지정해 줄 수도 있지만, IE6-7에선 inline-block을 inline elements에 지정했을 때만 제대로 인식하기 때문에 a elements에 지정하였다.

얼핏 IE에선 inline-block이 말을 잘 듣지 않는다고 들은 것 같아서 이름 그대로 float만 떠올렸는데, IE6-7에서도 inline-block을 제대로만 활용하면 이렇듯 그 효용성은 더 높아질 것이다.

개인적으론 먼저 HTML은 문서의 내용을 제대로 전달해주기 위한 중요한 틀이라고 생각하기 때문에, 항상 마크업을 할 때마다 신중하고 올바른 습관을 들이려 노력하고 있다. 문서를 전달하는 기초 틀만 제대로 짜 놓으면 반 이상 완성된 페이지로 다가섰다고 볼 수 있기 때문이다. 근래 HTML5가 대두하면서 공부해야 할 것도 덩달아 늘어나서 항상 최신 정보를 놓치지 않고 습득하려 노력하고 있다.

CSS를 짤 때의 느낌은 전혀 다른데, 많은 상상력이 필요로 하고 그만큼 디자인 실력과 눈썰미도 받쳐주어야 하는 기술이라고 생각한다. 항상 부족함을 느끼기 때문에 남이 해놓은 멋진 디자인을 보면 모방도 많이 하는 형편이다. 그리고 항상 풀리지 않는 문제로 골치를 앓기도 하는데, 주 요인은 아무래도 IE. 최신 브라우저의 CSS3 지원 상황도 날로 호전되면서 연일 꼼꼼히 챙겨야 할 필요를 느낀다.

마지막으로 JavaScript는 파면 팔수록 난해하지만, 또 신기하기도 하고 페이지에 활력을 불어넣을 수 있는 요술 지팡이 같은 느낌. 예전 조립 장난감의 작은 부품을 붙였다 떼었다 차근차근 조립하고 완성해서 제각기 자기 역할에 맞게 팔다리가 맞물려서 움직이는 모습을 보고 뿌듯해했던 느낌 말이다.

결국은 개인적인 생각에 중요도를 놓고 따지면, HTML > CSS = JavaScript라고 생각하지만, 재미와 매력은 JavaScript >= HTML > CSS라는 느낌.

 없음.