특이하게도 회사 업무 실전에서 body의 z-index를 내려야할 상황이 왔습니다.


이때까지 html/css 코딩하면서 이런 상황이 온 것은 정말 처음이었습니다. 사실 이런 상황은 실무에서도 일반적인 상황은 아닙니다. 일반적인 상황에서는 body의 z-index를 내리지 않아도 배경그림이 잘 보이고 모든 기능 다 동작 하거든요.


그런 상황이 왔던 사이트는 아라센터의 메인페이지입니다.


http://aracenter.org/


문제는 이 사이트의 경우 메인페이지가 다른페이지와는 다르게 배경으로 커다란 여자아이 그림이 들어가야 했고, 이 그림이 회원가입시에는 보여지지 않아야만 했습니다. 게다가 xe(구 제로보드) 엔진을 써서 동작하는 웹페이지였다는게 문제였습니다.


그러니까 레이아웃 스킨을 쓰는데, 그냥 body요소가 들어가는 레이아웃 스킨에 배경에 깔리는 여자아이 그림이 들어가면 회원가입 단계에서도 이 그림이 보여져서 회원가입폼의 가독성이 심각하게 안좋아졌습니다.




(위 사이트의 모습에 여자아이 배경그림이 깔린다고 생각해 보십시오. 디자인적으로 보기에도 이상할 뿐 아니라 UX 측면에서도 좋지 않습니다.)




그래서 레이아웃 스킨이 아닌 본문이 들어가는 자리에 여자아이 배경이 깔리는 코드를 삽입해야 했고, 그렇게 하기 위해서는 본문에 div를 하나 더 만들어서 position:absolute 시킨 다음에 z-index:-1 속성을 줘야만 했습니다. 왜냐하면 실제 사이트의 그림을 보면 알겠지만 본문 부분 뿐 아니라 위의 메뉴 부분까지 배경이 깔려줘야 하기 때문입니다.




(참고 : 문제의 발단이 된 부분의 html/css 설정값이 담긴 스크린샷)




근데 문제는 해상도가 높은 컴퓨터에도 홈페이지가 디자인적으로 자연스러워 보이게 하기 위해 body에도 repeat-x 속성이 들어간 배경이미지가 들어가야 했다는 사실입니다.


그래서 그냥 놔두면 body의 배경이미지가 더 앞으로 겹쳐져서 본문에서 넣었던 여자아이 그림이 보이지 않게 되었습니다.


이를 보완하기 위해 body의 z-index를 -1로 주는 순간...


크롬이나 파폭에서는 잘 동작했지만 익스플로러에서는 링크든 메뉴에 심겨진 jquery 코드이건간에 전부다 동작하지 않는, 일명 웹사이트가 먹통이 되는 현상이 발생했습니다.


실무에서 쓰는 코드를 변형해서 이 상황을 그대로 보여주려니 참 번거로운 일이 아닐 수 없어서, 간단하게 테스트 코딩을 해서 이걸 보여주려고 했는데 이게 참... 익스플로러가 body의 z-index가 -1일때 무조건 먹통이 되는건 아니더군요. -_-; 그래서 테스트 코드로 이 상황을 보여주는 것을 할 수 없었습니다. (역시 그지같은 익스플로러...)




결론적으로 말해서 실무에서 이런 상황을 해결하려면, body에 심겨진 배경이미지와 z-index 속성을 지우고 대신 html 태그에 이 속성들을 입히는 것이 최선입니다. http://aracenter.org/ 사이트 코드 보시면 그렇게 만들어져 있지요.


(해당 부분 캡쳐)




결론적으로 말하면 html/css 코딩할때 어떤 경우에라도 body의 z-index를 -1로 설정하면 익스플로러에서 동작하지 않을 수 있기 때문에 이 방법을 쓰면 안된다는 이야기가 되겠습니다.





댓글을 달아 주세요

티스토리 툴바