웹표준에 관한 Story

우선 direction에 대해서 알아보자.
우리나라에서 사용하는 모든 페이지들은 기본값으로 direction: ltr; 로 설정이 되어있습니다.
direction는 페이지의 기본적인 언어 배열을 왼쪽에서 오른쪽(ltr : left to right) 또는, 오른쪽에서 왼쪽(rtl : right to left) 으로 할지
설정해주는 속성인데요.
direction의 필요성은 아랍권 같은 언어배열이 오른쪽부터 시작하는 국가에 적용할때 사용되고 있습니다.

1. position의 재정의
#all { position: relative; border: 1px solid gray; width: 300px; height: 70px; }
.red { position: absolute; left: 10px; top: 10px; background: red; float: left; width:50px; height: 50px; }
.red { right: 50px; }
<div id="all">
 <div class="red"></div>
</div>

 

(.red) class에 right: 50px; 라는 값을 재정의 했음에도 불구하고 left: 10px; 값이 그대로 적용되어있는걸 볼 수 있습니다.

//이번에는 반대로 적용해보자.
.red { position: absolute; right: 10px; top: 10px; background: red; float: left; width:50px; height: 50px; }
.red { left: 50px; }

 

(.red) class에 left: 50px; 값으로 재정의가 된걸 확인할 수 있습니다.
이 같은 현상이 일어나는 이유는 우리나라 페이지들의 기본값이 direction: ltr; 로 설정되어있는데에서 비롯됩니다.

해결방법으로, 기존에 설정되어 있는 left: 10px이라는 값을 초기화 하는 방법이 있습니다.
.red { position: absolute; left: 10px; top: 10px; background: red; float: left; width:50px; height: 50px; }
.red { left: auto; right: 50px; }

 

2. direction과의 관계
또 다른 방법으로 direction을 사용하여 언어배열을 rtl로 바꾸는 방법이 있는데요.
간단하게 예를들면,
#all { position: relative; border: 1px solid gray; width: 300px; height: 70px; direction: rtl; }
.red { position: absolute; left: 10px; top: 10px; background: red; float: left; width:50px; height: 50px; }
.red { right: 50px; }

direction을 사용하였을시 위에서 언급한 내용이 반전되는걸 볼 수 있습니다.
결과를 보면 right: 50px;가 그대로 적용된걸 볼수있는데요. left: auto; 값을 적어 초기화할 필요가 없는거죠.
하지만,
#all { position: relative; border: 1px solid gray; width: 300px; height: 70px; direction: rtl; }
.red { position: absolute; right: 10px; top: 10px; background: red; float: left; width:50px; height: 50px; }
.red { left: 50px; }

이렇게 작성하면 적용이 되질 않습니다. 왜냐하면 direction으로 인해서 언어배열이 오른쪽부터 시작하는걸로 바껴서 그런데요.
위에서 나온 예제들을 (모니터에서 등을 지고 거울로 반사해서 바라본다고 생각)하고 이해하면 빠를 것 같습니다.
언어배열이 바낀걸로 인해 그안에서 사용되어지는 속성들의 의미도 미묘하게 반전되는 것인데,
여기에 관련되어서는 추후에 새로 다루거나 여기에 내용을 새로 추가할 생각입니다.

[#.(어떻게)가 아니라 (왜)인지 알고 이해하자.]

보통 layerPopup 창을 띄우거나 할때 다른 영역이랑 겹쳐져서 한쪽을 먹어버리는 경우가 생길것입니다.
예를들면,

#all { position: relative; border: 1px solid gray; width: 302px; height: 302px; }
.red { position: relative; background: red; float: left; width:100px; height: 300px; z-index: 10; }
.blue { position: relative; background: blue; float: right; width:100px; height: 300px; z-index: 20; }
.red .block { position: absolute; left: 50px; top: 100px; background: #000000; width:200px; height: 100px; z-index: 9999; }
<div id="all">
 <div class="red">
  <div class="block"></div>
 </div>
 <div class="blue"></div>
</div>
이와같은 예제와 같이 검은색박스를 absolute로 띄웠을때 파란색박스에 가려지는 현상이 생깁니다.
물론 지금은 단순한 예제에 불과하니 이걸 수정하는데에는 큰 어려움이 없습니다.
하지만! 실제 페이지를 작업하다보면 이 간단하지만 놓치기쉬운 실수를 범하는 경우가 저에겐 있었습니다.
z-index값을 absolute에만 준것인데요.
red와 blue는 동등한 입장입니다. block은 red의 자식이죠.
따라서 자식요소에 index값을 무리하게 준다고해도 부모를 이길수는 없는법이라는거죠.

우스개소리로 예를 하나들자면 A와 B라는 아이가 싸움을 합니다.
흔히들 애들싸움이 어른싸움이 된다고하죠.
결국 A와 B의 부모들이 싸우게 되는데, 그리고 결국 B의 부모가 이겼습니다.
그럼 아이들에 싸움은 어떻게 될까요?
자연스럽게 아이들의 싸움도 B라는 아이가 이기게 되는거죠.

따라서, block의 부모요소인 red에 z-index값을 blue보다 높게 주면 해결이 된다는겁니다.

#all { position: relative; border: 1px solid gray; width: 302px; height: 302px; }
.red { position: relative; background: red; float: left; width:100px; height: 300px; z-index: 20; }
.blue { position: relative; background: blue; float: right; width:100px; height: 300px; z-index: 10; }
.red .block { position: absolute; left: 50px; top: 100px; background: #000000; width:200px; height: 100px; z-index: 21; }

한가지 유의해야 할점은 layerPopup의 특성상 항상위에 노출이 되어야 한다는거죠. 그러니 부모요소보다 index를  높게 지정해줘야 합니다.
이글을 쓰면서 생각한건데 z-index값에 대한 항목들을 정리하고 실제로 적용시킨다면 정말 유용하겠다란 생각을 해봤습니다.
z-index의 새로운 사실을 알게 되면 추후에 이어서 작성하도록 하겠습니다.

[#.본질을 파악하고 이해하자.]

되새김질...합시다

2010년 09월 28일 (수) 날씨흐림
오늘 작업을 하는데 좀 이해가 안되는 부분이 있었다.
제품리스트가 일정수 이상 발생시 가로스크롤이 자동으로 생기게 하는부분이었는데,
간단하게 생각했었는데 의외로 시간이 오래걸렸다.
처음에 ul에 고정 사이즈를 주고 overflow-x:auto; 를 주고 li가 일정수 이상 발생하면
자동으로 가로스크롤이 늘어날거라고 생각했다.
ex) ul { width: 500px; overflow-x:auto; }
       li { display: inline; width: 100px; }
하지만 결과는 꽝!

이걸 해결하기위해 몇가지 방법이 있는데,
첫번째, div 안에 ul을 줬을경우.
이리저리해보다가 ul을 div에 싸고난 후 div에 고정사이즈, overflow-x:auto; 를 주고
ul에 사이즈를 주되 div고정사이즈보다 넘치게 만들면 가로 스크롤은 생긴다.
ex) div { width: 500px; overflow-x:auto; }
       ul { width: 1000px;}
        li { display: inline; width: 100px; }
하지만 maximum이 몇개인지도 모르는 상황에서.. 아니! 설령 알고있다 하더라고 ul이 width값을 갖고들어가면 안될것이다.

두번째, display: table-cell; 을 사용한 경우.
문제는 ie6, ie7에서는 사용이 안된다는점..

세번째, table을 쓰면 제일 간단하다..