그런데, 예전에는 아주 쉬웠던 이 방법이 요즘에는 꽤나 까나 롭다.
예전에는 table 을 써서 가로/세로 크기 100% 주고 가운데 정렬 하면 손쉽게 구현이 되었으나, 요즘에는 웹 표준이니 뭐니 해서 Div 를 써서 구성 하는데, 이게 좀처럼 생각대로 움직여 주질 않는다.
일단 화면 크그에 맞게 세로 크기를 100% 를 잡으려 하는데, 이게 100% 로 잡히질 않는 경우가 있다.
예전에는 이걸 어떻게 맞춰야 하는지 몰라서 대충 높이를 화면 크기로 잡아 주곤 했으나, 요즘은 모바일도 고려해야 하고 워낙 디바이스의 종류가 다양해서 대충 수치로 잡아 주는걸로는 대응이 안된다.
일단 이것은 웹표준 상에서는 특정 오브젝트의 100% height 가 부모오브젝트의 height 의 영향을 받기 때문이라서, 그냥 100% 로 맞출려는 모든 상위 오브젝트의 height 를 100% 로 잡아 주면 된다.
대충 이런 식인데, "wrap" 이라는 오브젝트의 크기를 화면 크기의 100% 로 잡고 싶다면 그 상위 오브젝트인 "html" 과 "body" 를 100% 로 잡아 주어야 하고, 만약 그걸 감싸고 있는 오브젝트가 있다면 그것의 크기로 100% 로 잡아 주어야 원하는 항목의 height 를 100% 로 잡을 수 있다. 중간에 하나라도 100% 가 아니면 100% 로 잡히지 않는다.
... 그런데... 아주 예전에는 이렇게만 해도 되었었는데, 요즘엔 이것도 잘 먹히지 않는다.
100% 가 잡히기는 하는데....
요렇게 3개의 판넬을 배치하고 중간에 있는 "content" 항목의 크기를 height 100% 로 잡으면...
이렇게 페이지 크기가 100% 를 넘어 버린다.
이건 저 "content" 의 height 가 100% 로 되어 버리면서 "header" , "footer" 의 높이가 추가 되기 때문. (상위 오브젝트 크기를 높이 100% 값으로 가져 오니 어찌보면 당연함.)
현재로선 저 height 에서 "header" , "footer" 의 높이 만큼을 빼주는 수 밖에 없음.
그래서, jQuery 를 이용하거나, 아니면 "content" 영역에 padding 을 "-" 값으로 지정해 맞추는 등 온갖 편법이 다 동원되고 있는데...
그중의 한가지 방법으로 "display:table-row " 를 사용하는 방법이 가장 간단하다.
이렇게 가장 바깥의 영역을 "display:table" 로 지정하고, 그 안쪽 영역인 "header" , "content", "footer" 를 "display:table-row" 로 지정하는 것이다.
간단히 설명하자면 "wrap" 를 테이블로 설정하고, "header" , "content", "footer" 를 테이블의 셀로 설정함으로 해서, 예전에 테이블로 레이아웃을 구성했던 방식으로 구현 한것.
이렇게 하면...
요렇게 깔끔하게 딱맞는 페이지를 구성 할 수 있다.
※안타깝게도 XP (IE8 이하) 에선 통하지 않기 때문에 호환성에 문제가 있을 수도 있다.
