이제 나의 Season2가 끝났고 Season3 가 시작된다. 이제부터는 내가 스스로 해야된다. 회사… 병역특례라는 울타리에서 벗어났으니 이제는 내가 노력한만큼 결실을 보게 되겠지. 그동안 많이 나태해졌던거같기도 하고 다시 열심히 해야겠다. 앞으로 많이 바빠질것이고, 바쁘게 행동해여야만한다 이제는 어디 안에서 안주해있는게 아니라 뭐든지 스스로 찾고 행동해야되는 상황이 온거다. 대학을 다시 가게되고 학비도 벌어야해서 알바도 하게되고 일도 찾아서 하겠지, 앞으로의 생활 약간의 설레임도 있지만 그만큼 불안감도 있다… 이런불안감은 노력으로 극복해 나가야지. 처음열정 잊지않고 열심히하자. 세상의 길앞잡이가 되기위해 첫번째 관문을 통과한거다.

메인디자인

큐브마을 디자인

어제 새벽 12시에 멀티플레이로 다른사람 3명과 전문가 모드를 했다. 전문가 난이도는 아까말했듯이 너무 어려워서 좀하다가 다들 포기하고 방을 깨버리는 일도 많다. 이번에도 그러려니 하면서 시작했다. 역시 같이했던 3명중 2명은 초보에다가 그중 한명은 아에 레프트4데드 를 처음한 사람이였다. 당연히 클리어를 못할줄 알았는데. 클리어할때까지 오기와 고수분 한명이 껴잇어서 그분덕에 클리어를 할 수 있었다. 클리어 시간은 3시간 27분… 거의 3시간반동안 붙잡고 있는데. 마지막 탈출할때는 정말 내가 좀비무리에서 탈출한거 같아서 기뻣다. 장장 3시간반동안 게임질에서 해방이였다.

아래 사진은 탈출하기 직전 마지막 몰려드는 좀비를 막아내고 있다. 제일 피말리는 순간이다.

드디어 구출하러온 배가 오고 탈출하게 됬다. 감격의 순간

모두 탈출한줄알았는데 한분이 탈출에 실패하고 죽었나보다 …-_-

플레이 시간 3시간 27분

총 3424 마리의 좀비가 저세상으로 떠났다. (마지막에는 허무하게도 영화 촬영이라고 말한다.)

버그 발생

버그의 주된 이유는 부모 엘리먼트가 존재하고 자식 엘리먼트가 float 으로 정렬 되었을때 부모 엘리먼트 넓이에 딱맞게 떨어지는경우 와 함께 float으로 정렬된 엘리먼트 사이에 주석(<!–– text ––>) 이나 비어있는 엘리먼트(<span></span> 등등..) 가 있을경우 생기게 된다. Duplicate Characters Bug 를 구글링과 소스를 만들어서 테스트 해서 알아본 결과 보통 두가지 상황에서 버그가 발생하게 된다.

첫번째, 자식 엘리먼트들이 left 또는 right 로 가로 정렬하고 있고 Width 총 합이 부모의 엘리먼트와 Width 가 같고 자식엘리먼트 사이에 주석 또는 비어있는 엘리먼트가 있는경우 마지막 자식엘리먼트 안에있는 글자가 복사가 된다.

소스 코드

CSS

.wrap {width: 300px; border:2px solid #aaa;}
.div01 {float: left; display:inline; width: 100px;}
.div02 {float: left; display:inline; width: 100px; background:#000; color:#fff;}
.div03 {float: left; display:inline; width: 100px; background:#ddd; color:red; font-weight:bold;}


Markup

<div class = "wrap">
<div class = "div01">Float - Left</div>
<!-- comment --><!-- comment -->
<!-- comment --><!-- comment -->
<div class = "div02">Float - Right01 여기에 있는 글씨가 복사가 됩니다</div>
<div class = "div03">Float - Right02 여기에 있는 글씨가 복사로 됩니다</div>
</div>


정상적인 레이아웃의 모습

IE6 Rendering (Bug)

아래는 IE6 에서 보여지는 모습이다. 아래의 “복사로 됩니다” 가 버그로인해 생겨난것을 볼수있다.

두번째, 자식 엘리먼트들이 세로 정렬되면서 자식엘리먼트 사이에 주석 또는 비어있는 엘리먼트가 있는경우 마지막 자식 엘리먼트가 부모 엘리먼트의 Width 와 같은 경우 안에있는 글자가 복사가 된다.

소스코드

CSS

.demobox{width:250px;border:3px solid green;}
.firstfloat{float:left;width:100px;background:gray;}
.secondfloat{float:left;width:250px;border:1px solid red;}


Markup

<div class="demobox" >
<div class="firstfloat">First float</div>
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- 주석의 갯수만큼 생긴다. (주석하나당 2개 글자가 찍힌다.) -->
<!-- 링크는 복사되고 이미지는 안되는걸로봐서 텍스트 글자만 찍힘 -->
<div class="secondfloat">
<p>
Second float
<span>
In IE6 some of this text is replicated in a
"mystery block element" that starts directly
below the float. This tan colored float has a
2px bottom margin which also duplicates into
the mystery element, getting added to the
bottom of the text if it is wrapped in a span,
as it has been here.
<a href="#">Test link</a>
<img src="images/pinecone3.jpg" alt="" />
</span>
</p>
</div> <!-- End of second float -->
</div> <!-- End of .demobox -->


소스 참조 - Explorer 6 Duplicate Characters Bug

정상적인 레이아웃의 모습

IE6 Rendering (Bug)

IE6 에서 보여지는 모습이다. 아래의 “een here. Test link” 가 버그로인해 생겨난것을 볼수있다.

IE7 에서의 Duplicate Characters Bug

위의 소스 로 IE7에서는 버그가 나타나지 않는다. 그러나 Duplicate Characters Bug 가 IE7에서도 생기는 경우가 있다. 발생하는 요건은 위의 조건에서 부모의 엘리먼트안에 인라인 엘리먼트(display 가 inline 속성인 내용) 가 들어있을때 나타나게 된다. 아래의 소스코드는 위 예제의 Markup에서 IE7에서 나타나는 현상을 보여주는 예이다.

IE7 Duplicate Characters Bug Markup

Markup Example01

<div class = "wrap">
<div class = "div01">Float - Left</div>
<!-- comment --><!-- comment -->
<!-- comment --><!-- comment -->
<div class = "div02">Float - Right01 여기에 있는 글씨가 복사가 됩니다</div>
<div class = "div03">Float - Right02 여기에 있는 글씨가 복사로 됩니다</div>
<span>Test Text</span>
</div>


Markup Example02

<div class="demobox" >
<div class="firstfloat">First float</div>
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- comment --> <!-- comment -->
<!-- 주석의 갯수만큼 생긴다. (주석하나당 2개 글자가 찍힌다.) -->
<!-- 링크는 복사되고 이미지는 안되는걸로봐서 텍스트 글자만 찍힘 -->
<div class="secondfloat">
<p>
Second float
<span>
In IE6 some of this text is replicated in a
"mystery block element" that starts directly
below the float. This tan colored float has a
2px bottom margin which also duplicates into
the mystery element, getting added to the
bottom of the text if it is wrapped in a span,
as it has been here.
<a href="#">Test link</a>
<img src="images/pinecone3.jpg" alt="" />
</span>
</p>
</div> <!-- End of second float -->
<span>Test Text</span>
</div> <!-- End of .demobox -->


IE7 Rendering (Bug)

아래 그림에서 보여진거 와 같이 부모의 Div 에 “Test Text” 라고 span 엘리먼트가 들어가있으면 버그가 발생한다. (span 뿐 아니라 img 등 인라인속성 모두 버그 발생)

해결 방법 및 결론

해결방법이 여러가지다. 일단 부모의 엘리먼트가 자식의 엘리먼트에 딱맞기 때문에 Width 를 3px 이상 늘리던가 마지막 버그가 발생하는 자식 엘리먼트를 margin 을 -3px 이상 주는 방법이다. 또 다른 방법은 마지막 엘리먼트의 float을 클리어 시켜주는 방법이 있다. 마지막 엘리먼트 다음에 <br style=”clear:both”> 이런식으로 해결하는거다. 주석으로 인해 버그가 생겼을경우는 <!–[if !IE]>주석<![endif]–> 이런식으로 Conditional Comments 를 사용해도된다. 그리고 첫번째 예제의 가로 정렬했을때는 복사되지않는 엘리먼트에 background 속성을 지정하거나 복사되는 엘리먼트에 position:relative 를 주면 텍스트만 없앨수잇다. 그리고 이건 제일 단순한 방법이긴 하지만 그리 추천하지 않는 방법이 있는데 그건 복사되는 부분을 &nbsp;공백으로 복사되는부분이 나타나지 않을때까지 공백을 지정하는거다. 또 여기서 재미있는 부분이 있는데, 복사되는 텍스트는 원래 가지고있는 속성(굵기, 폰트, 색상 등등) 과 링크 (a Element)를 그대로 가져온다. 그러나 img 는 복사가 되지 않는다.

여러가지 버그 해결 방법이 있지만 내가 생각하기에 제일 좋은방법은 아에 버그가 나타나지 않은 환경의 CSS 를 작성하는거다. 주석은 여러개 붙여서 사용하지 않는게 좋고, float 과 float 사이에는 아무것도 없는 인라인 속성의 엘리먼트가 있는것은 좋지 않은거 같다. 코딩을 할때는 언제나 이렇게 IE 의 버그 를 염두하고 작업해야한다. 특히 Duplicate Characters Bug Characters Bug 는 막상 코딩할때 눈에 안띄어도 유지보수 해야할때 나중에서야 알게되는 경우가 많다. (텍스트가 길어지거나, 주석을 추가해서 생기는경우 등등) 항상 버그의 유무를 체크하며 코딩하고 테스트 해보자.

참조

• Explorer 6 Duplicate Characters Bug - www.positioniseverything.net
• Explorer 6 Duplicate Characters Bug - veerle’s Blog
• IE Duplicate Characters Bug - 마지막 문자 복사 버그 - CSS Design Korea

Display:inline 을 통한 해결

첫 번째 예제같은 float 이 가로로 정렬 되었을때를 제외하고 두 번째 예제 같은 경우 display:inline 으로 깔끔하게 해결하는 방법이 있었다. 찬명님의 블로그를 보고 알게됬다. 그리고 www.positioniseverything.net 에서 아래에 나온 내용이였는데 좀더 꼼꼼하게 읽어보고 글을 써야겠다.

31일부터 어제까지 정신없이 놀다보니 이제야 글을쓴다. 다들 여기저기 블로그에서는 새해소망과 마무리, 결산을 적는구나. 2008년은 나름 바쁜해이기도하고.. 내자신이 가장 나태해진 해이기도 하다. 2008년을 되돌아보자면…

2008년 1월부터 훈련소(병역특례라 4주훈련)를 갔다왔다. 현역군인들에 비할바가 못되지만, 정말 추워서 힘들었지만 주변 소중한사람들을 생각할수있는 시간이어서 좋았던거같다. 그리고 다시 회사생활.. 일상으로의 복귀, 어느새 내역할은 디자이너보다 웹퍼블리셔의 역할이 점점 커지고있었다. 복잡해지는 코딩과 스크립트, 브라우져별 특성까지… 배운것은 많았다. 그리고 회사도 좀 힘든상태였고 일도 많다보니 회사에서는 바쁜날이 많았다. 또 회사생활 인간관계라는것도 좀 알게됬고.. (좀 부정적이 된거같다.) 회사생활이 바빳지만 그와 반대로 나의 마음가짐은 나태해졌다. 사실 책도 많이읽고 자기발전도 하고 포트폴리오도 멋지게 만들고 이렇게 계획이있었는데 거의 실천을 못했다. 결정적으로 회사일 외에는 신경쓰기 싫다는이유로 많이 게을러졌다. 회사일이 바쁘다는 자기 핑계일까… 어느덧 회사생활도 2년이 넘어 나태해진것일까… 가장 고쳐야 할 점이다. 이렇게 일상속으로 회사를 다니면서 어느덧 2008년은 지났다.

아직은 내가 25살이라는거.. 2009년이라는거 실감이 안난다. 새해가되면 바로 실감이안나고 2,3월달 정도되야 2009년이라는걸 느끼게된다. 2009년은 나에게 새로운 시작의 해이기도하자. 내나이 이제 25이지만 20살 시작부터 20대의 내인생을 Season 으로 나눌수있다. Season1 부터 되돌려보자면,

season1 은 20대 초반의 대학생활 이때는 항상 열정적으로 뭐든지 부딫쳐보자는 생각이였다. 실제로 몸을 아끼지않고 뭐든지 해봤다. 알바도 많이 하고 술도 많이마시고, 사람도 많이 만났다. 그전 학생때와 다른 성인으로써 첫발을 내딛는 기분은 정말 좋으면서도 낯설었고 새로운것들을 경험했다. 배운것도 정말 많았고 열정도 의지도 넘쳤다. 남들이 해보지 않았던 여럿 아르바이트와 밴드생활과 처음으로 여러사람들 앞에서 해보는 공연들 즐겁기도 하고 어떻게보면 가장 철없을때인거 같기도 했다. 하지만 해결해야할 병역문제..

이때부터가 season2 였다. 초등학교 6학년때 유리에 심하게 손을 다친것을 이용해 보충역 판정을 받았다. 여기서 내인생의 첫번째 갈림길이 된거같다. 원래는 편하게 공익을 갔다 올 생각이였지만 잘생각해보니 공익을 가서 얻는게 별로없었다. 집이 어려워 용돈을받고 지낼수없는 상황이고 공익을 하는동안에 지하철이나 동사무소 이런곳에서 할일없이 떼우거나 공무원들 심부름 이런건 별로하기 싫었다. 그래서 우연히 광고에서본 IT컴퓨터 학원에서.. IT병역특례지원방법을 알게됬다. 그때 그학원을 다니게되고 병역특례를 목표로, 또 IT 웹마스터로 목표로한것은 나의 제일 중요했던 선택이였다. 그렇게해서 학원을다니고 포트폴리오를 만들고 수십개의 회사에 지원을해서 면접을 봤다. 정말 면접은 많이 본거같다. 갈수있는 회사가 많았지만. 나도 까다로운 선택을해서 선택을했다. 하지만 첫번째 선택은 실패였다… 헤어시스라는 곳을 다녔는데 이곳은 정말 최악의 회사다. 본부장이라는사람 중심으로 병역특례로만 이루어진 각종비리와 급여연체등 이곳에 있어봤자 비전이 없다 생각해서 과감하게 그만두고(결국 그회사는 병역비리로 걸려서 문을 닫게됬다.) 다시 면접을봤다. 그리고 지금 노애드 라는 회사를 잘다니고있다. 회사를 다니고 사회생활을 하다보니 대학교 졸업이 중요하다는것을 알았다. 이제 병역특례가 끝나는 2009년 2월.. 이때부터가 나의 season3 시작이다.

대학교를 들어가면 지금보다 많이 바쁠거다. 학교생활도 해야되고 돈도 벌어야하니까 일단 지금 내가 하고있는일, Design/Flash/Web Publishing 은 계속 할꺼다. 지금 내 닉네임, “길앞잡이” 남들보다 앞서나가고 항상 선두주자가 되자

Season3 시작, 20살 처음의 열정을 다시 떠올리며 열심히하자!

MCC(MirageWorks Control Center) 의 User 페이지의 모습과 소스

MCC 사이트 작업을 하기전, 세로100%레이아웃 작업에 골머리를 썩고있었는데 http://www.dave-woods.co.uk/?p=144이곳의 내용을 이용한 신현석님의 개인홈페이지에서 해결방법을 알아내고 그뒤로 그방법을 써서 세로100% 사이트제작을 해왔다.

CSS 만을 이용해서 100% Height Layout 제작방법

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.header {
    position: relative;
    height: 100px;
    background: #ddd;
    z-index: 1;
}
.container{
    min-height: 100%;
    margin: -100px 0 -50px;
}
*html .container{
    height: 100%;
}
.content-area {
    padding: 100px 0 50px;
}
.footer{
    height: 50px;
    background: #ddd;
}

Markup

<div class="header">
    Header
</div>
<div class=”container”>
  <div class=”content-area”>
    Contents
  </div>
</div>
<div class=”footer”>
  Footer
</div>
</body>


하지만 가로세로 100% 에 서브메뉴가있는 구조 는 정말 난감했다. 어떤경우냐면, 가로세로 100% 레이아웃에 서브메뉴의 높이값이 필요한 디자인(마진&패딩 값이 존재하고, 100%의 높이 또는 최대최소 높이를 정해서 스크롤 생성등등) 에서는 CSS 만으로 해결하기가 힘들었다. 결국 자바스크립트의 offsetheight를 이용해 Header 와 Footer 를 제외한 가운데 Container 부분의 높이를 구해서 해결을했다. 하지만 자바스크립 미숙인지 어떻게든 해결은 했지만, 내가만든 스크립트가 브라우저마다 적용이 조금씩 달라서 힘들었기도 하고, 약간 부족한게 있어서 찜찜하기도 했다.

그래서 이번에는 다른방법을 써봤다. 마크업시 아에 테이블을 빼고 코딩이아니라 레이아웃을 위해 Header,Container,Footer 를 테이블로 레이아웃을 나누어봤다.

CSS

table{width:100%;height:100%;min-height:768px;border-collapse:collapse;}
td{margin:0;padding:0;vertical-align:top;}
.branding{height:100px;background:#226699;}
.container{height:100%;background:#fff;}
.site_info{height:50px;background:#009900;}


Markup

<table>
  <tr><td class="header">
    Header
  </td></tr>
  <tr><td class=”Container”>
    SubMenu/Contents
  </td></tr>
  <tr><td class=”Footer”>
    Footer
  </td></tr>
</table>


이렇게 사용해보니 Header 와 Footer 를 제외한 Container 의 높이값을 100%로 가질수있었다!! 하지만 기쁨도 잠시 테스트를 Firefox 에서 했는데, Firefox/Chrome/Safari/Opera 에서는 내가 원하는대로 나왔으나 DTD설정이 있는경우에 IE6, IE7 은 가운데 Container 의 100%높이값을 브라우저 그대로 높이값으로 계산해버리는 현상이 나타났다. 결국 원하는대로 해결이 되지않았다. 또 다시 IE를 저주하며 자바스크립 을 사용하지 않고 해결하는방법은 찾지 못했다. 추후 해결방법을 알게되면 다시 글을 써야겠다.

관련링크

• 브라우져 화면의 100% 높이를 유지하는 레이아웃
• element.offsetHeight

문제를 간단하게 해결하는방법을 알아냈다!!

IE 에서만 사용할수 있는데 (어짜피 IE에서만 생기는 문제니까..) height:expression(document.body.clientHeight-60); 이렇게 사용하면 된단다. 뒤에 60은 전체 높이에서 제외할 px 을 적으면 된다. document.body.clientHeight 를 이용해서 자바스크립만들고 뻘짓을 했는데.. CSS 만으로 간단하게 고칠수 있었구나. CDK 를 보다가 알아낸 방법인데.. 역시 배워야할꺼는 많고 세상에 고수들도 많구나~

CSS

html,body { height:100%; margin:0; padding:0; }
.layout { width:100%; height:100%; min-height:768px; border-collapse:collapse; }
.layout td { position:relative; margin:0; padding:0; vertical-align:top; }
.branding { height:100px; background:#226699; }
.container { height:100%; height:expression(document.body.clientHeight-150); background:#fff; }
.site_info { height:50px; background:#009900; }
.navigation-wrapper { float:left; position:relative; width:250px; height:100%; overflow:auto; background:yellow; }
.navigation { width:200px; height:618px; background:#ddd; }
.contents { float:left; min-width:750px; height:100%; background:#dd5588; }


Markup

<table class="layout">
<tr class="branding"><td>
로고 및 메뉴 영역
</td></tr>
<tr class="container" style=""><td>
<div class="navigation-wrapper">
<div class="navigation">
네비
</div>
</div>
<div class="contents">
컨텐츠
</div>
</td></tr>
<tr class="site_info"><td>
푸터 영역
</td></tr>
</table>


참조 - DOCTYPE 적용 후 IE에서의 다단 100% Height Table Layout 풀림 문제 - CSS Design Korea

열흘동안 놀기만한 휴가이지만, 그리 아쉽진 않다.
나름 알차게 놀아왔고, 최근 이렇게 놀기만 해본거도
정말 오랜만인듯 하니말이다.

이제 잠자리를 들고 오늘부터 다시 일상으로 컴백이구나…

블로그를하며 오랜만에 글을쓰니 어색하고..
할말은 많은데 두서가없다…
20살떄부터 2년간 싸이월드에서 일기를 쭉써왔는데..
일기형식이라도 거의 매일 블로그에 글좀 써야겠다.
항상느끼는건데 내 글쓰는솜씨는 정말 형편없으니까.. 노력을 해야지

그래서 디자인을 구상중이다.
주제는 길앞잡이,
그리고 디자인 컨셉은 신문사와같은 다단 레이아웃
일단 레이아웃 만 잡아봤다.

아 빨리 디자인해야지
너무 많이 미뤄왔던거같다.

실제 벌레도 이렇게 다채로운 색상을 가지고 있다.
별생각없이 그냥 이쁘게 생긴벌레여서
포토샵으로 그려본거다.

ⓒ designed by jeoungyoung.lee

주5일째근무에 크리스마스 까지끼면..
28일까지 열흘정도 쉬게됬는데..

지금회사에서 2년간 일해보면서
처음으로 긴휴가를 가져본다.

사실 쉬고싶은날도 많았지만,
정말 프로젝트 하나끝나면 바로시작되고 ..
중간중간 사이에 디자인일까지 겹치게 되면서..
틈이 없었다.

짧다면짧고 길다면 길수있는 휴가이지만..
그냥저냥 놀고먹고 하는거보다
자기발전도좀하고.. 못만났던 사람들도 만나고싶다.
근데 오늘은 어쩌다보니 그냥저냥 지나가는구나

음.. 이번 쉬는날동안 해야되는것들
리스트를 한번 적어본다

1. 크리스마스 전 23,24일 단기 알바 (일당20만원짜리 알바다 wow)
2. 블로그 스킨디자인
3. 실버라이트 공부
4. 사놓고 안읽었던 책읽기
5. 오래동안 못본 사람들 만나기