하니가모님이 네이트에서 “모란소프트“로 검색한 내용을 소개하고 계셔서 링크를 클릭하고 들어갔더니 Safari가 이런 메세지를 띄운다.

무비안의 스크립트가 원인으로 Macromedia Flash Player 8의 실행속도가 느려집니다. 이대로 계속되면 응답하지 않는 경우가 있습니다. 스크립트의 실행을 중지하겠습니까?

역시 친절한 Safari씨. Flash안의 스크립트까지 살펴봐주는구나:-) 미워할래야 미워할데가 없다!(..아..조금..있긴하다..;;)

Firefox를 메인 브라우저로 사용하고 있었지만 알 수 없는 에러로(아마 플러그인때문이라고 생각하지만..) Safari로 메인 브라우저를 변경한 뒤, 처음에는 Firefox의 플러그인을 사용하지 못하는 관계로 조금 불편하긴 했지만 많은 분들의 조언으로 이런저런 좋은 플러그인도 많이 발견하고 또 erehwon님이 말씀하신 것처럼 사용자에 대한 자상한 배려에 이제는 완전히 Safari팬이 되버렸다:-)

죄송합니다. 짧은 지식에 잘못된 정보를 내보내고 말았습니다. 위의 메세지는 Flash Plugin이 내보내는 메세지라고 합니다. 따라서 Safari와는 관련이 없다고 합니다. 정태영님께서 가르쳐 주셨습니다. 태영님 감사합니다. 본문에 언급된 두분에게 트랙백까지 보내놨는데 난감하군요..;; 하니가모님, erehwon님 죄송합니다. 역시 인터넷에서 글을 쓸때는 조금 더 신중하게 작성해야겠습니다.

그래도 내 맘 알지? Safari ♥

del.icio.us hotlist를 구독하고 있는데 역시 전세계인(아마도..)이 사용하는 서비스인지라 이런저런 재밌는 페이지가 많이 올라온다. 오늘은 High T3ch Magazine의 TOP 20 Japanese Commercials이라는 페이지가 hotlist에 올라왔다. 제목은 이렇지만 일본뿐만 아니라 우리나라에서 예전에 화제가 된 라면광고(너구리였던가?)가 4위에 올라와 있고 중국이나 다른 아시아권 CM도 눈에 띈다. 아마 서양인이 동양인을 보면 다 비슷비슷해 보여서 Japanese Commercials이라는 이름으로 정리한 것 같다.

예전 학교 다닐때 세계각국의 CM을 수집하기 위해서 선배들 일하고 있는 프로덕션에 찾아가 자료실에서 비디오 하나 하나 처음부터 끝까지 빨리감기로 보면서 원하는 광고 찾아서 더빙 받던 걸 생각하면 정말 감회가 새롭다. 지금은 YouTube나 Google에서 검색하면 웬만한 건 다 나오니 말이다. 불과 10년 사이에 세상이 이렇게 바뀔줄 누가 알았겠는가! 하긴 10년전에는 내가 이런 일 하고 있으리라고는 꿈에도 생각 못 했었다.

p.s/ amaikoi님의 블로그에 가시면 더 많은 종류의 일본 텔레비젼 CM을 보실 수 있습니다.

요즘 하니가모(화니가모?)님의 블로그를 열심히 스토킹(?) 중인데 글을 읽다가 궁금해져서 이런 저런 검색 사이트에서 내 ID로 검색을 해 보았다. 그러던 중 정말 오랫만에 daum에서 검색을 하니(구글 검색엔진을 사용하고 있으니 어차피 구글과 검색결과가 같을 거라는 생각에 그 동안 거의 이용을 안 했었다. 그 이전엔 검색결과가 그다지 좋지 않았었고…) 다음 카페 검색결과에 예전에 내가 쓴 글이 나왔다!

“8秒의 운명”(아마 지금은 운영을 안하는 듯)이라는 카페에서 3년도 전에 내가 홈페이지에 올렸던 일기를 한달 정도 스크랩 해두고 있었다! 예전 서버 해약하고 하드 몇번 망가진 다음에 예전 자료가 하나도 안 남아 있어서 예전 일기를 보니 새롭기도 하고 잊고 있던 일들도 기억해 내고…정말 땅속에 뭍혀 있던 타임캡슐을 우연히 발견한 것만 같은 느낌이다.

예전에 내가 쓴 글을 읽어보니 일본에 처음와서 신나서 재미나고 신기해서 방방 뛰어다니던 모습이 눈에 선하다. 정말 무얼해도 처음 해보는게 많고 처음 겪어보는 일이 많아서 좋았었는데 이제는 그것도 다 일상이 되어 버리고…역시 익숙해진다는게 좋기도 하지만 때로는 조금 서글픈 느낌이 든다.

그땐 참 날씬하고 잘 나갔는데 말이지:-) 하하하

오늘은 아침부터 비가 내렸다. 그렇게 많이 내리는 건 아닌데 역까지 걸어서 10분정도 걸리기에 우산을 안 쓰면 꽤 젖을 것 같은 비였다. 하지만 집에 우산이 딸랑 하나..;; 회사에 놔두고 안 가져온 우산만 4,5개 되는데 꼭 이럴때 비가 온다. 이상하게 아침에 비가 많이 내리는 것 같다. 비 올때 우산 쓰고 회사가서 퇴근할때는 비 안오니까 귀찮아서 안 가져오고, 잊어버리고 안 가져오고..하나 있는 건 유우코 쓰고 가라고 놔두고 일단 집에서 5분거리에 있는 편의점까지 뛰어가서 우산을 사기로 하였다.

조금 뛰다가 힘들어서(..;;) 걸어갔는데 빗발이 점점 거세진다. 겨우 편의점에 도착했는데 비닐우산이 500엔! 예전엔 300엔 정도 였던 것 같은데…그래도 비가 계속 내리고 있으니 할 수 없이 사서 쓰고 가는데 역에서 2분정도 거리에 있는 99엔샵에서 99엔짜리 우산을 팔고 있는게 아닌가! 아..

나카노 사카우에(中野坂上)역에 도착하자 어느새 비가 멎어 있었다..;; 허허허..다시 회사 도착하니 비가 쏟아지고..우산 산 보람이 하나도 없다. 다시 회사의 우산꽂이에 우산 하나 추가. 퇴근할때는 또 깜빡하고 우산 놔두고 퇴근해버렸다..;;

역시 머리가 나쁘면 평생 고생 한다.

요즘 Web표준에 대한 관심이 높아지면서 XHTML+CSS로 코딩을 하고자 하는 분들이 많이 늘은 것 같다. XHTML+CSS에 의한 코딩에서 많은 분들이 어려움을 느끼고 계시는게 아마 float의 처리가 아닌가 싶다. 나도 예전 그 부분에서 많은 어려움을 겪었지만 결국 Tony Aslett씨가 고안한 “clearfix:after“로 해결을 하고 있다.

<div id="contentsArea">

<div id="contents">Contents</div>

<div id="subNavigation">Sub Navigation</div>

</div>

가령 위와 같은 마크업을 작성하고 왼쪽에는 컨텐츠가, 오른쪽에는 서브 네비게이션이 위치하도록 CSS를 작성한다고 하자.

#contentsArea {
    background-color:#F90;
    padding:10px;
}

#contents {
    background-color:#3C0;
    float:left;
}

#subNavigation {
    background-color:#3CC;
    float:right;
}

컨텐츠를 왼쪽에 위치시키기 위해서 float속성에 left를 주고 서브 네비게이션의 float속성에 right를 주어서 각각 왼쪽과 오른쪽에 배치된 페이지가 완성되었다. 하지만 여기서 문제가 되는게 float속성을 해소(clear:both)시켜 주지 않으면 높이값(height)이 생기지 않는 것이다.

이 문제를 해소하기 위해서 CSS에 다음과 같은 소스를 추가한다.

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

그리고 XHTML문서의 contentsArea에 class태그를 추가하는 것으로 간단히 문제가 해결된다.

<div id="contentsArea" class="clearfix">

id가 아니라 class를 지정하고 있는 경우에는 스페이스로 구분하여 clearfix를 지정해 주면 된다.

<div class="comment clearfix">

신현석님이 알려주신 overflow 속성을 이용한 방법도 참고하면 많은 도움이 되리라고 생각한다.

she님이 알려주신대로 IE7(베타3)에서는 이 소스가 적용되지 않는다(쇼크!!). 여기에 다시

*+html .clearfix { overflow:auto; }

이렇게 IE7용의 hack을 적어주면 문제는 해결되지만 그다지 의미가 없는 것 같다(기존 작업물의 수정에나 용이할듯..;;). 역시 현석님이 알려주신대로 스크롤바에 유의해가며 overflow:auto;를 이용해서 작업하는게 더 나을 것 같다.

찾아보니 벌써 IE7문제에 대한 해결책이 나와 있었다!(도움주신 kazu님에게 감사드립니다!)

Roger Johansson씨에 따르면 display: inline-table을 display:inline-block으로 바꿔주면 문제가 해결된다고 한다:-)

최종 소스

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \\*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

참고링크

• New clearing method needed for IE7? - 456 Berea Street
• EasyClearing, the Aslett/PIE way is NOT broken in IE7! - tanfa
• acidic float tests - satzansatz.de
• On having layout - satzansatz.de
• IE/Win: inline-block and hasLayout - brunildo.org

역시 이래서 Web Design이 재미있다:-)
…그리고 무엇보다 영어공부의 필요성을 절실히 느낀다..;;

좋은 공부하게 해주신 jely님, she님, kazu님 감사합니다:-)

IE 전용 zoom프로퍼티를 이용한 clear방법

2006년 12월 26일 업데이트

.clearfix{
zoom:1;/*for IE 5.5-7*/
}

.clearfix:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}

이 방법은 IE 전용 프로퍼티를 이용하고 있기에 hack을 사용하지 않아도 되는 장점과 IE7에서도 적용이 되고 소스코드도 줄어드는 장점이 있지만 역시 IE 전용 프로퍼티를 이용하는데서 오는 껄꺼로움이 남는다..;