Page Layout & DTD

이번 페이지에서 다룰 내용은 요즘들어 世人들의 집중적인 관심을 받고 있는 Page layout에 Table이 좋은가 Div가 좋은가에 대해 여러가지 의견들이 있는데 바로 그 issue를 집중적으로 다루어 보려고 합니다. 어딘지 확실히 기억은 나지 않지만 어느 사이트에서 이런 제목의 글을 본 기억이 납니다. 제목이 아마 "Table은 이제 쉴 때!" 였던 것 같습니다. 그 제목을 보는 순간 과연 테이블이 그 동안 무슨 실수를 했길래 이제 집에서 애나 봐야 되는지(사실 애보는 것도 아무나 하는거 아닙니다...^^) 궁금해서 참을 수 없더군요. 만약 테이블이 사람이라면 "너 왜 그랬어? 좀 잘하지! 너 보고 쉬라는데 내가 일년 정도 홈페이지에 손 놓고 있는 동안 뭔일 있었냐? 그런 소리를 들은 지금의 심경은 어떠냐?" 등등 그냥 확 들이대고 물어 볼텐데 그럴 수도 없고 말이죠... 만약에 정말로 Table에게 감정이 있다면 어떤 기분이었을까요? 아마 모르긴해도 "Starcraft의 Marine이 Lost Temple map의 center로 rush 나갔다가 overlord 한테 깔려서 기절하고 깨어나서 zergling이랑 zealot이랑 사이좋게 같이 않아서 땅에 난 풀을 뜯는 꿈을 꾸는 듯이 황당한 기분" 아닐까요. 제가 이렇게 얘기하면 혹시 제가 Table 애호가라서 table을 두둔하려는 것 아니냐는 오해를 하실 것 같아서 미리 말씀드리는데 제가 Table 애호가인 것은 사실 입니다만, Table 애호가인 동시에 Div 애호가이기도 합니다. 왜냐하면 둘 다 없어서는 안될 element 이기 때문입니다. 둘 중에 하나라도 없다면 무슨 재미로 web page를 만들겠습니까.

하여간 내용이 뭔지 궁금해서 살펴 보았더니 내용인즉슨, "지금까지 주제넘게도 Table이라는 넘이 page layout에 끼어들어있었다. 하지만 이제 Div라는 쉽고 편리한 element가 있으니 이제 복잡다난하고, rendering 하는데 시간도 많이 걸리는 Table의 사용을 피할 것이며, 특히 page layout 같은 경우 사용하기 쉬운 div element를 사용하자." 라는 요지의 글로서 div 사용의 합리성과 table 사용의 불합리성을 동시에 부각 시키는, 제가 보기에는 다소 편파적인 내용이었던 것 으로 기억합니다. 그런데 그 글을 보고난 후 저에게 몇 가지 의문을 생겼는데, 그 의문에 대해 말하기 전에 한 가지 밝혀 둘 것은 앞으로 진행되는 내용이 그 글을 쓰신 분을 반박하거나 비난하려는 의도는 전혀 없으며 단지 그 글을 보고 품게된 몇 가지 의문점과 그 글의 내용과 제가 알고 있는 것과의 차이점에 대한 저의 의견을 제시하는 것 뿐이라는 사실입니다. 그 글을 보고 품은 저의 의문이란

이라는 의문 입니다. 내용이 다소 길어 질 것 같아서 몇 회가 될지 모르지만 여러 회에 걸쳐 다룰 내용에는 위의 세 가지 의문점에 대한 제 의견과 제 나름대로의 대안 제시를 할 것이고, 그 바탕은 그 동안의 제 경험과 짧지만 제가 알고 있는 것들이 될 것 입니다. 따라서 제가 제시하는 대안들이 절대적인 것은 당연히 아니며, 다만 "이런 방법도 있다"라는 그야말로 의견의 제시일 뿐 임을 알아 두시면 되겠습니다. 그러면 이제 본론으로 들어가서 Page layout을 하는데 결정적인 영향을 미치는 CSS property들에 대해 집중적으로 알아 보겠습니다. Page layout의 중요한 CSS property는 아래의

Page layout시에 고려해야 될 CSS

와 같이, 크게 나누어 CSS box model, visual formatting, positioning 의 세 가지로 분류하고, 각 항목에 해당 CSS property들로 구성해 보았습니다. 또한 확실히 밝혀 둬야 되는 문제가 앞으로 진행되는 내용은 모두 Internet Explorer 6.0 이상의 version이 기준이며 제가 다른 browser 에서 거의 실험한 바 없다는 사실 입니다. 확실히 알아 두시기 바랍니다.

Internet Explorer & DTD

이번에 집중적으로 다루려고 하는 Page layout에 대해 말하기 전에 반드시 전제되어야 되는 사실은 사용하는 browser가 browser 화면에 rendering해 주는 결과가 standard-compliant mode(표준 모드)냐, non standard-compliant mode(비표준 모드)냐 하는 것 입니다. 또한 이러한 전제를 두는 이유는 순전히 Internet Explorer 때문인데 그 이유는 IE(MS의 말에 의하면 그나마 6.0이상의 version에만 해당되는)에서는 DTD 선언에 따라 두 가지 mode로 rendering 된다는 사실 때문입니다. 그러므로 이번 페이지에서 DTD에 대해 다루지 않을 수 없는 이유는 일반적인 IE 사용자들, 즉 DTD에 대해 별 다른 고려없이 사용하는 사람들이나 고려는 하면서도 차일 피일 미루는 사람들(저도 포함됩니다... ㅜ.ㅜ)을 위해서 입니다. 왜 Netscape나 FireFox 같은 browser는 가만히 놔두고 IE 냐고 의문을 가질 수 있겠지만 사실 다른 browser들은 제가 실험해 본 바(아직 일 부분에 대해서만)에 의하면 DTD mode에 관계없이 W3C spec에 의거한 표준 모드로 rendering 됩니다. 그렇다면 NN이나 FF는 DTD 선언을 안하고 문서를 만들어도 상관이 없느냐하면 그건 절대 아닙니다. 표준 모드로 rendering 되느냐와 DTD의 사용 여부는 사실 별개의 문제이지만 IE에서는 DTD 선언에 따라 엄연히 다른 결과가 나오기 때문 이렇게 복잡한 설명과 함께 그걸 따져보지 않을 수 없는 거죠. 바로 이러한 이유 때문에 많은 사람들이 IE가 웹표준에 상반되게 개발되어서 웹 표준을 만드는데 해악을 끼치고 있다고 말하는 것 같습니다. IE 도 다른 browser와 같이 한 가지 rendering 결과만 나온다면 이런 문제를 다룰 이유 조차 없었을 테니 말이죠. 하지만 저를 포함해서 대 다수가 IE를 사용하기 때문(이 사이트의 경우도 99% 이상의 접속 browser가 IE입니다.) 같은 처지를 겪는 사람으로써 이 문제에 대해서 바로 알고 대처해 나가야겠습니다.

그럼 본론으로 들어가서, 사용하는 browser와 상관없이 대 부분의 사용자들은 아마 아래와 같이 HTML을 사용하리라 봅니다.

즉 위의 coding과 같이 DTD 선언을 하지 않고 말이죠. 제가 이렇게 말하면 DTD에 대해 전혀 고려하지 않고 사용하는 사람들은, "그럼 이렇게 사용하지 뭐 어떻게 사용하는데?" 라고 반문하시겠죠. 예 그렇습니다. 대 부분 지금까지 이렇게 사용해 왔고, 현재도 대 부분 이렇게 들 사용하고 있습니다. 이렇게 사용해도 현재는 아무런 문제가 없습니다만 머지않아(상당히 임박했다고들 합니다만) 웹 표준(web standards)이라는 걸 발표한다고 합니다. 이런 웹 표준을 누가 만드느냐 하면 IETF (Internet Engineering Task Force)와 여러분들이 잘 알고 있는 W3C (World Wide Web Consortium)에서 제정하고, 일단 웹 표준이 제정되면 더 이상의 비평이나 변경을 허용하지 않는다고 하는군요. 변경을 못하게 하는건 그렇다 치고 사람들이 함 씹어보겠다고 하는 비평까지 허용하지 않을 재주가 있다니... 오! 놀라워라... 하여간 이런 표준이 제정되면 MS도 그 표준에 맞추지 않으면 안 될 것으로 예상됩니다. MS가 지금까지 표준을 등한시 하고 독자적으로 browser를 개발한 것과 같은, 더 이상의 표준에 어긋나는 방식을 사용하기는 힘들겠죠. 아무리 IE 사용자가 대 부분이라고해도 말입니다.

IE의 경우 자기들 스스로가 말한 것 처럼 version 6.0 에서 부터 선택적으로 웹 표준을 사용하고 있습니다. 선택적이라는 단어는 쓰거나 안 쓰거나를 선택한다는 뜻 이지만 사실 IE6.0에서 표준을 선택적으로 사용할 수 있다는 사실 자체를 모르는 사람에게는 결코 선택적이지 못하겠죠.

웹 표준을 IETF와 W3C에서 제정한다고 합니다. 웹 표준이라는 의미는 곧 HTML, CSS 등의 웹 언어의 규격 및 제반 사항들을 통일 시킨다는 의미이며, 이는 곧 browser 사양이나 OS에 관계없이 화면상에 같은 결과를 나타내야 된다는 것을 의미합니다. 마땅히 그래야 되는 일이겠죠. 그런데 이러한 표준을 만드는 사람들은 누구일까요? 무슨 인터넷 계에 어떤 절대자나 神이 있어서 "웹 말쌈이 서로 달라 표준으로 사맏디 아늬할쎄...중략... 오늘 내가 너희에게 웹 표준을 하사하니 서로 다투지말고 사이좋게 나누어 쓰거라..." 뭐 이렇게 생겨나는 건 아닐테고 말이죠. 결국 사람이 만든다는 말인데, 사람이 하는 일에는 항상 개인이나 단체, 또는 국가가 행사하는 영향력이 있게 마련입니다. 웹 엔지니어링 분야라고 해서 뭐 별 다르겠습니까. 이러한 영향력이 어떻게 생기는지는, 한 마디로 말하면 투자하고 노력한 만큼 생기게 되어 있습니다. 일본의 경우 이러한 투자와 노력을 계속하여 그 결과로 Ruby text라는 새로운 CSS3 spec을 만들어 냈습니다. 아마 대부분 처음들어 본 CSS property일 겁니다. 저는 일본말을 잘 몰라서 뭐라고 설명할 수는 없지만 일본말의 경우 같은 漢字라도 경우에 따라 다른 음이 난다고 들었습니다. 또 외래 단어의 경우에는 옆(또는 아래나 위)에 그 발음을 일본말로 달아 주더군요. 뭐 말로 만 하지말고 아래와 같은 예를 하나 들죠. 현재 IE 6.0 이상 에서만 보입니다...

Mac메꾸 Donald도나르도

어떻습니까. 얼핏 보면 두 줄로 보이지만 마우스로 select해 보면 두 줄이 아니라 한 줄이라는 것을 알 수 있겠죠. 소스는 아래와 같습니다.

<ruby style="font:18px verdana;margin-top:0px;">Mac<rt style="font:11px verdana;
color:tomato;">메꾸</ruby> 
<ruby style="font:18px verdana;margin-top:0px;">Donald<rt style="font:11px verdana;
color:tomato;">도나르도</ruby>

이와 같이 투자와 노력하기에 따라 원하는 결과를 얻을 수도 있습니다. W3C 에 의하면 일본어를 위한 module이라고 표현하지 않고 '동아시아 국가'의 언어 표기를 위한 module이라고 하지만, 거의 일본어에 많이 사용하는 것은 뻔한 일입니다. 한글의 경우 이런 음이나 한자를 괄호속에 표기하지 않습니까. 물론 이 Ruby의 경우 일본어 뿐만이 아니라 한글 중국어 등에도 쓰일 수 있는 CSS property 이기는 하지만 말입니다. 이와 같이 이런 표준들은 투자하고 노력하는 국가나 단체, 개인에게 유리한 방향으로 가게 마련이라는 거죠. 일본의 경우 '게이오 대학' 이라는 곳이 W3C와 연계하여 Internet Engineering 분야를 연구하고 있다고 하더군요. 우리도 그런 노력을 해야함에도 불구하고 검찰의 지휘권을 누가 발동하느냐 어쩌느냐 하면서 정신들 못차리고 있으니 그런 노력이라는게 참으로 요원한 일이죠. 그러니 개인이라도 노력해야겠습니다. 정신 못차리는 인간들만 믿고 있을 수는 없으니까요.

또 하나 재미있는 것은 그 표준이라는 것을 누가 인증해 주느냐하는 것인데, 위에서 언급한 IETF 나 W3C 같은 경우도 정작 국제표준화기구(ISO)에서는 인증을 못 받고 있다는 것 입니다. 하긴 그걸 인증하긴 힘들겠죠. ISO 는 자기네들이 스스로 "우리는 세계의 모든 표준을 관장한다"고 공언했는데, 그 말을 수정해서 "우리는 세계의 모든 표준(Interent Engineering 빼고)을 관장한다." 라고 자기 모순을 일으킬 수는 없을테니 말입니다. 누가 누구를 인증하느냐, 또는 누가 누구를 지휘하느냐... 기득권이나 힘을 자랑하기 위함이겠죠.

그러면 이제 부터, 일단 CSS box model을 가지고, DTD에 따라 두 가지 결과가 나오는 IE의 rendering 방식에 대해 알아 보도록 하겠습니다. CSS box model 에는 위의 항목에서 보는 바와 같이 padding, border, margin이 있는데 그 중에서 padding과 margin의 경계선인 border를 대상으로 IE의 선택적 DTD mode에 대해 알아 보도록 하겠습니다. 아래를 보면 gold 배경색의 width:150px, height:150px 의 box가 두 개 보입니다. 그리고 각각의 box 속의 내용을 보니 아마도 DTD mode에 대한 비교를 위한 두 개의 box인 것 같습니다. 여러분들 중에 HTML menu 부터 주욱~ 여기 까지 보신 분이라면 아마 비슷한 그림을 본 기억이 나실 겁니다. 어디냐 하면 바로 HTML 고급과정 / iframe의 iframe 예제에서 span element에 width와 height를 주면 Transitional mode에서는 작동해도 Strict mode DTD에서는 작동하지 않는다는 것을 설명했던 바로 그 예제지요. 이번에는 span element가 아니라 div element를 사용해서 border를 1px solid tomato로 지정했습니다. 우선 아래의 두개의 box를 자세히 보시고 어느 쪽이 큰지 그 크기를 비교해 보시죠... 차이가 없다구요? 아뇨 분명히 차이가 있습니다. 차이가 있길래 비교해 보라는거 아니겠습니까? 두 개를 비교해서 왼쪽이 커 보이는 사람은 여기를 오른쪽이 커 보이는 사람은 여기를 click해 보시죠.

Click 하고 나면 어떤 button 들이 보일텐데 그 각각의 button이 나오게 되면 양 box의 border를 25px 로 지정하고 비교해 보시죠. 어떻습니까? 25pixel 의 두께로 비교하니 차이가 확연하게 드러나지 않습니까. 이제 다시 border width를 1pixel로 줄여도 오른쪽 box가 조금은 더 커 보일 겁니다. 그렇죠? 이 결과에 대해 설명하면 왼쪽의 Transitional DTD의 경우 border를 포함한 width, height 150의 정사각형이고, 오른쪽의 Strict DTD 의 경우 border를 제외한 width, height 150의 정사각형으로 화면에 render 된다는 것을 알 수 있습니다. width:25px 상태에서 왼쪽의 box를 오른쪽의 box속에 넣으면 빈 틈없이 정확하게 맞아 떨어진다는 말입니다. 그러므로 border-width를 1px로 했을 경우 왼쪽 box의 전체 크기는 150px, 오른쪽 box는 152px 이므로 오른쪽 box가 2px 더 큰 셈이죠. 정말인지 눈으로 직접 확인해 보고 싶으면 이 사이트 첫 페이지의 Data Room / 2번의 Screen Calipers를 download 받아서 설치하고 직접 재 보시져...^^ 또 아래의 source code를 copy 하고 왼쪽의 코드 실행기를 작동하여 각자 확인해 보실 수도 있습니다.

어떤가요? 전혀 다른 결과가 나오지 않습니까. "겨우 단어 하나 바꿨을 뿐인데..." 이 사실을 처음 안 사람들은 상당히 혼란스러울 겁니다. 전혀 생각지도 않았던 !DOCTYPE 선언에 따른 두 가지의 다른 rendering 방식이라니 말입니다. MS의 표현을 빌자면 이러한 !DOCTYPE 선언을 '!DOCTYPE switch"라고 표현하는데, 이 !DOCTYPE switch 라는 표현이 표준에 맞는지 어떤지는 모르겠습니다만, 하여간 MS의 설명은 표준 모드(standard-compliant mode)의 DTD를 사용하면 !DOCTYPE switch on, 그렇지 않은 경우를 !DOCTYPE switch off 라고 표현하고 있습니다. 그렇다면, 뭐 표현이야 어쨌건 우리가 사용해야 할 방식은 어떤 방식일까요? 물론 말한 것도 없이 표준 방식입니다. 그럼 어떤 browser를 사용하느냐 하는게 문제인데, 제 생각입니다만 그건 순전히 '여러분들의 선택'에 달려있다고 봅니다. NN이나 FF의 경우 표준 모드를 따르고 있지만 100% 표준은 아니며, IE의 경우도 그네들이 표현하는 !DOCTYPE switch on 상태를 사용하면 별 문제가 없으며 더 세부적인 문제는 그 표준이라는 것이 발표되고 생각해도 늦지 않으리라 봅니다. 새로운 표준이 나온다고 해서 지금까지 사용하던 규격을 완전히 무시하고 새로운 규격이 생기는 것은 아니기 때문이죠. 다만 IE의 경우 위에서 비교해 본 바와 같이 두 가지 방식으로 rendering되므로 표준 모드 방식을 사용하면 되겠습니다. 그러면 !DOCTYPE 선언에 사용되는 '사용 가능값(possible value)'에 대해 알아 보고, 또 IE에서는 DTD를 어떻게 선언할 경우에 !DOCTYPE switch가 on / off 되는지 알아 보겠습니다.

IE의 !DOCTYPE switch on / off 에 따른 rendering test

이제 IE에서 !DOCTYPE switch on / off 에 따른 rendering 결과를 확인해 봐야 되겠습니다. 방법은 아래의 표 중에서 파란색 굵은 글씨를 click 한 후 표 하단 box의 <!DOCTYPE Declaration>의 내용이 바뀌면 '실행 하기' button을 눌러서 rendering 결과를 직접 확인해 보시죠.

여러분들 모두 위의 결과를 확인해 보셨겠죠? 그렇다면 이제 부터 제가 연재하려고 하는 PLS(Page Layout Series) 중에서 그 첫 번째 페이지인 이번 페이지의 결론에 이르렀습니다. 결론은

IE를 사용하면서 웹 표준에 맞춰서 Page Layout을 준비하려면 !DOCTYPE 을 반드시 선언할 것이며, 위에서 실험 한 바와 같이 URL link가 빠진 transitioal mode DTD 나 frameset DTD와 같이 !DOCTYPE switch가 off 되는 형식의 !DOCTYPE 선언은 해 봤자 표준적 rendering 이라는 면에서 말짱 꽝이다.

가 되겠습니다. 물론 처음 화두로 꺼낸 Table 이냐 Div냐 라는 주제와 동 떨어진 결론이지만 그건 이 series가 끝날 무렵 결론을 낼 것이고, 우선은 선결 과제로서 IE의 !DOCTYPE switch에 대해 따져 보지 않고서는 Page layout이고 뭐고가 무의미하기 때문에 1편의 결론은 이렇게 내릴 수 밖에 없습니다. 지금 이 페이지를 마감하면서 저 자신 또한 정신이 좀 없습니다. 이번 페이지 정도의 분량의 작업이라면 작업량으로만 봤을 때 뭐 두어 시간 정도면 되겠죠. 그런데 틈틈히 라고는 하지만 거의 1 주일이라는 시간을 들였습니다. 나름대로 신중을 기하고자 NN, FF 같은 browser에서도 대충은 확인을 해보고, MSDN Library도 여기 저기 뒤지느라 그렇게 되었습니다. 그렇지만 혹시 틀린 내용이나 표현이 발견되면 게시판에 지적해 주시면 감사하겠습니다. PLS... 그럼 다음 페이지에서...

Page Layout & DTD | Page Layout Series Part I

TABLE versus DIV

Page layout시에 고려해야 될 CSS

Internet Explorer & DTD

IE의 !DOCTYPE switch on / off 에 따른 rendering test