overfloweblog » web-standard

about DIV

overflow — Tue, 08 Apr 2008 10:46:30 +0000

원문 : http://kukie.net/2006/01/05/238/

HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다.
오늘은 div에 대해 알아보자.

div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다.
div의 앞 뒤에 있는 항목들이 가로줄로 흐르지 않고, 엔터값을 입력한 것 처럼 아래로 줄 지어진다는 말이다.

div로 레이아웃이나 박스를 구성하기 위해, CSS에서 가장 많이 쓰는 속성인 position 값으로는 static, relative, absolute, fixed, inherit가 있다.

Position 속성

static: CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡 차곡 쌓이는 기본적인 형태이다.
relative: 한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다. 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.
absolute: 흔히 레이어라는 개념으로 알고 있는 값이다. div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.
fixed: 기본적으로 absolute와 같다. absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.
inherit: 상위에서 지정한 값을 상속한다.

div를 설명하자면, 레이아웃layout 또는 박스모델 boxmodel을 빼놓고 말할 수 없다.
위에도 적었듯이 컨텐츠를 묶어주는 역할을 하는데, 컨텐츠를 묶어서 배열 하는 것이 곧 레이아웃layout이기 때문이다.

컨텐츠 안에서의 div는 사용자가 사용하기 나름일테고, 컨텐츠를 묶어주는 역할의 div는, 위치를 지정함(positioning)으로써 자신의 진정한 역할을 하게 된다.
여기서는 컨텐츠를 묶어주는 가장 크고 바깥의 영역을 담당하는 div에 대해 얘기하도록 하자.

positioning하는 것은 div를 float 시키거나 절대값으로 위치absolute positioning 하는 등 사용자가 원하는 위치에 위치시키는 것을 말한다.
positioning하기 위해서는 위에 나열한 position 속성을 사용하거나, float를 사용하여야 한다.

기본 적인 형태의 Layout

XHTML code





 
  New Document 
 
 


 헤더


 	컨텐츠
 	사이드바
 

푸터

CSS code (float 사용)

body {
 margin: 0;
 padding: 10px;
 background-color: #FFF;
}
#container {
 width: 380px;
}
#header {
 background-color: #FF4A4D;
 height: 50px;
}
#contents {
 float: left;
 background-color: #FFC64A;
 width: 290px;
 height: 214px; /* 임의 지정 */
}
#sidebar {
 float: right;
 background-color: #85C69D;
 width: 90px;
 height: 214px; /* 임의 지정 */
}
#footer {
 clear: both;
 background-color: #3B83B1;
 height: 40px;
}

boxmodel의 예제는 Little Boxes에서 자세히 살펴볼 수 있다. 하단에 몇 개 더 소개하도록 하겠다.

절대값 위치absolute positioning에 대한 개념은 좌표를 지정하여 div를 배열하는 방식이기 때문에 기존의 레이어layer 개념을 알고 있다면 정확하게 익히는 것이 어렵지 않을 것이라고 본다.

그럼 float에 대해 좀 더 알아보자.
float의 값으로는 left, right, none, inherit가 있다.

float 속성

left: left로 설정된 엘리먼트가 HTML 코드에서 바로 다음 엘리먼트의 왼쪽에 위치하게 된다.
right: right로 설정된 엘리먼트는 바로 다음 엘리먼트의 우측에 위치하게 된다.
none: float 하지 않는다.static의 상태로 자연스럽게 박스가 쌓이는 형태라고 보면 된다.
inherit: 상위에서 지정한 값을 상속한다.

float를 사용할 때는 clear에 대해서도 알아야 하겠다.
위에서 어떠한 항목에 대해 float:left; 혹은 float: right;를 설정하였을 경우 그 아래에 있는 것들도 영향을 받게 된다. 그것들에 대해 다시 초기화를 시켜주는 것이 clear이다.
left, right 각각 해당 정렬에 대한 영향을 없애주고 both는 둘 다 없애준다.

div의 width, height

특별히 width나 height를 정해주지 않으면 컨텐츠의 길이와 넓이에 따라 자동적으로 늘어나고 줄어든다.

만약에 width를 지정했는데, 끊기지 않는 텍스트나 커다란 이미지 혹은 링크로 인해 고정한 width보다 컨텐츠가 넓어질 경우에는 overflow 속성을 지정해서 해결 할 수 있다.
(FF에서는 박스는 고정되어 있고 컨텐츠만 삐져나오고, IE에서는 컨텐츠에 따라 박스가 함께 넓어 지기 때문에 레이아웃이 엄청 깨지는 것을 볼 수 있다. height를 고정한 경우에는 height에도 함께 적용 된다.)

overflow에 지정할 수 있는 속성으로는 visible, hidden, scroll, auto등이 있다.

visible: 내용을 자르지 않고 블럭 밖까지 가도록 허용한다.
hidden: 박스를 넘어갈 경우, 넘어가는 부분을 감추어 버린다. (잘림부분의 크기와 모양은 ‘clip’ 속성에 의하여 결정된다.)
scroll: 박스에 기본적으로 scroll을 제공하게 된다. – print나 projection CSS에서 해당 div안의 넘치는 컨텐츠도 인쇄 해준다.
auto: 박스는 고정해 두고, 박스보다 컨텐츠가 커질 경우 스크롤을 만들어 준다.

만약에 height를 지정했는데 FF에서 컨텐츠가 삐져나온다면, min-height를 이용하여 해결 할 수 있다.
고정된 값을 지정했다면, 컨텐츠가 많이 지더라도 div의 높이 값은 고정되어 있는 것이 맞다.
IE는 자체지능적;으로 컨텐츠에 따라 높이를 마음대로 높혀 버리는데, IE처럼 컨텐츠에 따라 div의 높이가 변해주길 바란다면 min-height라는 속성을 지정해 주면 된다. IE에서는 적용되지 않으므로 * html #id { height: 200px; } 같은 hack도 함께 써주어야 한다.

결론적으로 layout을 위해 div를 사용할 때에는 position, float에 대해서는 기본적으로 알아야 하고, 부가적으로 overflow를 알아두면 더욱 적절히 사용할 수 있겠다.

참고 링크

W3C HTML 4.0 – div spec (en)
Grouping elements: the DIV and SPAN elements
W3C HTML 4.0 – div spec (ko)
구룹 엘레멘트: DIV, SPAN 엘레멘트
W3C HTML 4.0 – position
위치 맞추는 기능의 선택: ‘position’ 속성
W3C HTML 4.0 – float
유동(float)의 위치 맞춤: ‘float’ 속성
W3C HTML 4.0 – oveflow
넘처흐름: ‘overflow’ 속성
Little boxes
CSS Layout Techniques

연관되는 것들에 대해 쓰다보니 글이 조금 길어졌다.
다음에는 layout을 구성할 때의 box model에 대해 적어봐야겠다.

CSS Box Model

overflow — Tue, 08 Apr 2008 08:42:11 +0000

원문 : http://minicube.kr/blog/entry/CSS-박스-모델에-대해

CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다.
박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다.

우선… 첫번째로 이해해야 할 명제는 “모든 엘리먼트, 태그는 박스 모델이다” 라는 것입니다.
, 같은 표현을 위한 태그를 제외하면, 자주 사용하는

, , ,
등의 태그들은 기본적으로 사각형(박스) 형태로 되어 있습니다. 생각해보면 이러한 태그들이 원형으로 들어가는 것은 없지요? ^^;;
두번째는 “contents, padding, border, margin” 입니다. 모든 박스모델은 이러한 속성을 가지고 있고 이 순서대로 둘러싸여있다고 보시면 되겠네요. 또한 padding, border, margin이 각각 4가지 속성을 가지고 있는데, top, bottom, left, right 로 분리할 수 있어서 각 방향의 속성을 따로 지정해 줄 수 있습니다. 예를 들어 margin-right:2px; margin-left:2px; 등으로 이렇게 따로 지정해 줄 수 있으며, 각각의 속성은 임의대로 조합해서 사용할 수 있습니다.

contents : 순수한 콘텐츠

padding : 콘텐츠와 경계선 사이의 여백

border : 경계선. 이 선 자체의 모양이나 두께도 바꿀 수 있다.

margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백

원래 이론상 모든 태그에는 margin, padding, border의 초기값이 0으로 지정되어야 하는 것이 맞지만 각 브라우저의 설정에 따라 기본적으로 가지고 있는 간격이 존재할 수도 있습니다. 예를 들면 순서 없는 리스트를 의미하는
내의 엘리먼트인
태그의 경우 목록 모양을 만들어주기 위해 버튼 형태와 함께 기본적 패딩을 가지고 있습니다. 보통 CSS로 디자인하기 위해서
속성에 list-style:none, padding:0 을 적용해주는 걸 많이 보셨을 거에요.

간단하게
태그로 만든 박스에 패딩을 적용한 소스를 확인해 보겠습니다. 이 편이 박스모델을 이해하는 것이 훨씬 쉬울 것 같습니다.

width:300px;background:#f4f4f4; padding:10px 20px; border:solid 2px red; margin-right:10px; margin-left:10px;“>
THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL.

이 모델을 분석하면 다음과 같이 됩니다.

첫번째 div 엘리먼트의 붉은색의 배경은 height를 지정하지 않고 width만 400px으로 지정하였습니다. 이 엘리먼트는 기본적으론 아무 것도 적용하지 않았기 때문에 padding과 margin은 모두 0입니다.
그 안의 두번째 div 엘리먼트는 width는 300px로 지정했으며, padding은 상하 10px, 좌우 20px이고 border는 상하좌우 모두 solid 형태의 2px, margin은 왼쪽과 오른쪽을 각각 10px로 정하였습니다.
즉 이 박스의 전체 width는 10(margin) + 2(border) + 20(padding) + 300(contents) + 20(padding) + 2(border) + 10(margin) = 364px 입니다.
참고로 background-color 속성도 적용되어있는데 background 속성은 contents + padding 영역에 적용이 됩니다.
height의 경우 콘텐츠에 따라 유동적으로 결정되도록 따로 height 를 주지 않아 일정한 높이는 없지만 2px 의 border가 상하에 적용되어 있고, padding이 상하에 10px 적용되어 있는 걸 확인할 수 있죠.

margin과 padding에서 쓸 단위는 px, em, % 등 상관없이 사용할 수 있습니다.
border의 경우 약간 틀린데 경계선의 모양과 색상을 따로 줄 수 있기 때문에 추가 속성이 있습니다. border-width 외에 border-style, border-color 속성 등이 있습니다. border-style 속성의 경우 경계선의 모양을 결정해주는데, 사용되는 밋밋한(?) 형태의 실선인 ‘solid’ 가 자주 사용됩니다.. border-color 속성은 보시다시피 색상을 지정하는데 RGB코드나 색상명으로 사용하구요. 이 세 속성을 연달아 사용할 수 있어서 border:solid 2px red; 등으로 지정할 수 있습니다.

1. margin 및 padding 의 간략한 표기
원래 margin-top, margin-bottom 등으로 따로 표기하는 것이 원칙이지만 이를 간단하게 margin 속성 하나로 제어할 수 있을 뿐만 아니라 일부의 값이 같으면 더 축약하여 쓸 수 있습니다.
줄여 쓸 때에는 margin:5px 10px 15px 20px; 등으로 네개의 값을 연달아 쓸 수 있는데 ‘상우하좌’ 순서입니다. 이는 위쪽부터 시작해서 시계방향으로 돌아가는 것과 같으니 시계방향이라는 것만 기억하셔도 됩니다.

1개 - margin:5px; – 상하 좌우에 모두 똑같이 5px 의 마진이 적용됩니다.

2개 - margin:5px 10px; – 상하에는 5px, 좌우에는 10px 의 마진이 적용됩니다.

3개 - margin:5px 10px 15px; – 상 5px 좌우 10px, 하 15px 의 마진이 적용됩니다.

4개 - margin:5px 10px 15px 20px; – ‘상좌하우’ 방향에 모두 별도의 마진이 적용됩니다.

다만 이렇게 줄여서 쓸 경우엔 한가지 속성만 지정했을 때와 달리, 네가지 값을 한꺼번에 지정하는 효과가 있기 때문에 주의해야 합니다.
만약 초기 마진이 모두 0으로 지정되어 있는 상황에서 margin:9px 0 0 0; 과 margin-top:9px; 는 보이는 것은 같지만 의미가 같지는 않습니다. 전자는 이전 속성에서 지정된 margin-left나 margin-right 값이 다시 0으로 설정되지만, 후자는 따로 지정하지 않았기 때문에 이전 값에 변화가 없습니다.

2. 여러 margin 사이의 충돌
화면 상에서 세로방향(상하)에 연달아 있는 엘리먼트의 경우 margin 속성이 맞닿게 되면 작은 쪽이 없어져 병합되는 현상이 발생합니다.
예를 들어 첫번째 div 엘리먼트가 margin:10px 0;으로 설정되어 있고, 두번째 div 엘리먼트가 margin:20px 0 55px;로 설정되어 있다면 첫번째의 아래 마진 10px와 두번째의 위 마진 20px가 더해져서 총 30px의 마진이 들어가야 원래 의도에 맞습니다만, 이때 마진이 병합되어 작은 마진은 사라지고 20px의 마진이 적용되는 것입니다. 이를 피하기 위해서는 경계선이 없는 엘리먼트의 경우 한쪽에는 마진 대신 패딩을 적용해주면 됩니다. 경계선(border)이 있는 경우는… 코딩을 바꿔야겠지요. ^^
하지만, 이러한 병합은 가로방향(왼쪽, 오른쪽) 마진과 float가 적용된 엘리먼트의 마진의 경우엔 적용되지 않기 때문에 이럴 때에는 걱정하지 않으셔도 됩니다.

3. 음수값의 margin, padding 사용 가능
원래 마진과 패딩 값은 양수 값을 사용하는 것이 원칙이지만 음수를 사용해서 특이한 효과를 줄 수 있습니다. 주로 겹치는 효과 등을 연출할 수 있습니다.

CSS

Special Effect

이 문구는 아래 special effect라는 문구가 있는 div 엘리먼트에 margin-top:-10px; 를 준 것입니다. 다만 주의하실 점은 원래 엘리먼트에 링크가 있을 경우에 아래 엘리먼트의 마진을 조정하여 원래 엘리먼트의 영역를 덮을 경우 링크가 적용되지 않는 현상이 발생할 수도 있습니다.

4. 인라인 태그와 블록 태그의 margin, padding 적용의 차이
표현을 위한 태그를 제외한 엘리먼트들은 보통 블록 속성을 가진 태그와 인라인 속성을 가진 태그가 존재합니다. 블록 속성 태그는
로 대표되며 이와 비교되는 인라인 태그가 태그입니다.
블록 속성 태그는 위 아래로 분리된 영역을 가지기 때문에 옆으로 별도의 콘텐츠를 배치할 수 없습니다. 하지만 인라인 속성 태그는 블록을 생성하지 않기 때문에 양 옆으로도 콘텐츠를 배치하는 것이 가능합니다.
이 인라인 태그들에 margin이나 padding 속성을 적용할 때에는 좌우 방향의 값은 적용되지만, 상하 값은 적용되지 않는 것을 유의하셔야 합니다.
CSS 속성 중 display 속성을 지정하여 원래의 인라인 태그나 블록 태그들도 역할을 서로 바꾸는 것이 가능하긴 하지만 display:inline; 등으로 강제적으로 인라인 속성으로 변경한
엘리먼트도 역시 상하 방향의 마진과 패딩이 적용되지 않기 때문에 주의해주세요~

5. 테두리 넣기 (border속성)
경계선은 세가지 속성을 별도로 가지고 있습니다. 어떤 모양인지 보여줄 style과 두께를 말하는 width, 색상을 말하는 color 속성입니다. 이 속성이 상하좌우에 적용되어 border에 관련된 속성은 총 12개의 조합이 있을 수 있습니다. (물론 이와 별도로 구분되는 속성도 있습니다. border-collapse 같은…)
style의 경우 border-top-style, border-bottom-style, … , border-style 속성이 있을 수 있는데 경계선의 모양을 결정합니다. 가장 많이 사용하는 실선의 경우 ‘solid’를 사용합니다. solid, dashed, dotted, double, groove, inset, outset, ridge 등의 속성이 존재합니다만 각각의 모양은 직접 만들어보세요~ (우리나라 특성상 화려한 그래픽을 자랑하는 국내 웹사이트 특성상 이 속성들을 다 사용할 일은 없을 것 같습니다만-_-) width는 말 그대로 두께를 말하고, color 역시 RGB코드 또는 색상명을 사용할 수 있습니다.
border-right:solid 2px red; 등으로 한 방향의 경계선 스타일을 간략하게 지정할 수도 있고 네 방향이 다 같을 경우 border:solid 2px red; 같은 식으로 더 간단하게 통합할 수 있습니다. 속성의 순서는 상관없이 사용할 수 있으며 생략할 수도 있지만, 생략할 경우에는 기본값으로 처리되게 되죠.

6. IE6 Quirks 모드 이하에서의 적용 이상
국내에서 가장 높은 점유율을 자랑하는 IE6의 경우, DTD를 별도로 지정하지 않고 Quirks모드로 돌릴 경우에는 박스 모델의 해석이 약간 틀려집니다. 또한 5.5 이하 버전에서는 상관없이 발생하는 현상인데요.

원래 width 속성으로 지정된 길이는 박스모델 내에서는 contents에 대해 적용되고 margin, border, padding과 별도로 적용되는 것이 맞습니다만, IE6의 Quirks모드와 IE5.5 버전 이하에서는 contents와 함께 padding, border 를 합한 것으로 계산하는 이슈가 있습니다.
이를 해결하기 위해서는 표준 모드로 동작할 수 있도록 정확한 DTD를 지정해주는 방법이 1차적인 대책입니다만 IE5.5 이하 버전에서는 이것도 적용되지 않기 때문에 컨디션 코드 또는 CSS 핵을 사용해주어야 합니다. 즉 IE구버전에만 적용되는 CSS핵을 사용하셔서 여기에만 적용되는 width를 직접 계산하셔서 넣어주셔야 하죠.
(참조 : http://www.456bereastreet.com/)

7. IE6 에서 float속성 적용된 div의 좌우 마진 두배 현상
이 현상은 박스 모델과는 크게 관련은 없지만, 레이아웃/콘텐츠 구성 시 div 엘리먼트의 마진을 조정하면서 이유없이 일어나는 버그이기 때문에 다루어 봅니다.
블록 속성의 엘리먼트에 float 속성을 주면 블록 속성을 유지하면서도 가로로 배열하는 것이 가능합니다. 이 경우가 레이아웃을 잡을 때 많이 사용하는 형태입니다만, IE6의 경우 float된 엘리먼트의 경우 가로 방향의 마진이 적용되는 경우 이 마진이 두배씩 적용되는 현상이 발생합니다. 이것은 위의 경우와는 달리 명백한 버그라고 할 수 있겠네요…
예를 들어 가로 500픽셀의 div 엘리먼트 내에 두개의 div엘리먼트를 float속성을 주어 배열하는 경우를 생각해보죠. 첫번째 엘리먼트는 100픽셀의 가로길이를 가지고 두번째 엘리먼트가 왼쪽 마진을 50px를 가지고 350px의 길이를 가지게 되면 100 + 50 + 350 = 500 의 식에 의해 정확히 맞아 떨어지게 되는 것이 이론상 맞지만..

float:left;width:100px;“>
LAYER1

float:left;margin-left:50px;width:350px;“>
LAYER2

타 브라우저에서는 의도한 대로 정확히 보이지만, IE6의 경우 버그 때문에 마진이 두배가 되어 100px 의 마진이 적용되죠. 이것은 전체 길이 500px 를 넘어서게 되어 두번째 엘리먼트는 첫번째 엘리먼트의 다음 줄로 넘어가게 되죠.
이 버그를 해결하려면 float된 두개의 div 엘리먼트에 display:inline; 속성을 주어서교정할 수 있습니다만, 이 속성은 인라인으로 바뀌는 것이 아니고 단순히 IE의 버그를 해결하기 위해서 존재합니다. 여전히 이 div엘리먼트의 속성은 블록 속성입니다.

“각 브라우저의 설정에 따라 기본적으로 가지고 있는 간격이 존재할 수도 있습니다.”
이부분에서 저를 포함한 많은 분들이 애를 먹은 경험이 있을겁니다. 빌어먹을 IE6..
저같은 경우는 정확한 DTD 선언으로 어느정도 타협하고, CSS 핵을 써야하는 상황은 무시합니다.
이렇게라도 해야 정신적 건강에 어느정도 도움이 되지 않을까요..
갑자기 서글퍼지네요.

웹표준 출사표

overflow — Tue, 01 Apr 2008 09:24:15 +0000

오랜 세월동안, 역시나 돈으로 좌우되는 웹브라우저시장에서 각 브라우저들은 저마다 경쟁하면서 각자 발전해 왔습니다.
결국은 Microsoft 의 ‘OS 에 브라우저 끼워팔기’ 로 순진한 Windows 사용자들을 현혹시킨 Internet Explorer(IE) 가 브라우저 시장을 독점하게 됩니다.
사용자들 뿐만 아니라 웹개발자들도 그렇게 독점된 IE 에 길들여져서 IE 안에서만 만들고 보여져 왔습니다.
그러나 Windows 에 길들여져온 순진한 사용자들은 한참 후 에야 브라우저가 IE 만 있는게 아니었고, 더 좋은 브라우저도 있다는걸 뒤늦게 알게 됩니다.

요즘 구루들의 칭찬이 자자한 FireFox(FF) 로 갈아타려고 했더니, 그동안 IE 에 맞춰져 만들어진 웹사이트들은 FF 에서 이리저리 깨지고 난리도 아닙니다. 사실 웹표준에 대한 이슈의 계기가 바로 FF 의 출현이라고 해도 과언이 아니죠.
얼마전 acid3 테스트 1위에 빛나는 apple 의 Safari 는 빠른 렌더링 속도의 매력으로 많은 사용자들을 끌어모으고 있습니다만 역시 IE 에 맞춰진 웹사이트들은 제대로 보여지지 않습니다.

웹사이트는 하나인데 브라우저는 여러가지가 있고, 또 그 브라우저들은 한 웹사이트를 제각각의 모습으로 보여줍니다.
사용자들은 어떤 OS의 어떤 브라우저로 웹사이트에 접근하더라도 똑같은 모습으로 보여지길 원합니다.

사용자들의 수준이 높아지면서 Mozilla 계열의 FF, Opera, apple 의 Safari 등 비 IE 브라우저들의 점유율이 나날이 조금씩 높아지고 있습니다.
이미 전세계적으로 비 IE 브라우저들의 점유율은 FF 를 선두로 IE 의 점유율에 근접해 있습니다. 우리나라를 포함한 아시아권만 아직까지 IE 가 독보적이긴 하지만 말이죠.
모바일웹도 이제는 www 와 유사하게 진화 하고 있으며 곧 www 와 동일한 플랫폼으로 발전하게 될 것 입니다.
이쯤되면 IE 만 고려하고 IE 에만 맞춰진 웹사이트는 글로벌 시대에서 자연스럽게 퇴보하겠구나 라는 생각이 들게 됩니다.

안타깝지만 각 브라우저들의 해석 렌더링 엔진을 통일시킬 방법은 현재로선 없어 보입니다.
그렇다면 웹사이트를 만드는 웹개발자들은 어떤 브라우저에서도 똑같은 모습이 나오도록 웹사이트를 만들면 되겠죠.
그래서 필요한것이 어디서나 똑같이 보여줄 수 있는 방법, 일명 “웹표준” 입니다.

다행히 W3C의 권고안을 기초로 하는 일명 “웹표준”에 대한 노력들이 우리나라에서도 여기저기서 잡초처럼 일어나면서 현재는 무성하게 자라나 있습니다.
물론 그 권고안을 무시하는 개념없는 MS 의 브라우저 IE 도 있습니다.
안타깝게도 우리나라는 그런 브라우저가 오랜시간동안 뿌리깊이 자리잡고 있는 특수한 상황이라서 더욱 시급하게 대처해 나가지 않으면 안됩니다.
IE 가 아니면 인터넷 뱅킹도 못하고, 고스톱 게임도 못하고, 연말정산 자료도 받지 못하는 실정입니다.
이제는 웹디자이너, 웹기획자, 웹퍼블리셔 등등 웹사이트를 만드는데 관련된 모든 웹개발자들의 몫입니다.

그동안 배우고 잘 써먹어온 방법과는 다른, 생소하고 익숙하지 않은 방법이라서 망설이거나 거부감을 느끼는 개발자들도 많이 있을것입니다.
여러가지 브라우저에서 제대로 보이게 하는 가장 편리한 방법은 웹표준 – 뭐 꼭 이런 동기가 아니더라도 웹표준을 해야하는 이유는 얼마든지 있습니다.

우선 코딩이 단순화 됩니다.
기존의

을 이용한 레이아웃은 위지윅 에디터의 힘까지 입어 태그가 2중 3중으로 겹쳐있고, css 를 활용하지 않고 구조와 표현이 공존하는 코딩으로 소스만 길어져서 브라우저의 렌더링 속도가 느려지게 됩니다.

은 “표” 를 담당하는 엘리먼트(태그)입니다. 애시당초
로 웹페이지의 구조를 잡는다는건 용도에 맞지 않는 구성이었죠.
구조를 담당하는
,
등 엘리먼트를 이용해 구조(layout)를 잡고,
,
등의 구조안의 컨텐츠요소를 담당하는 엘리먼트들로 채워줍니다.
그리고 css 를 통해서 그 구조를 표현(style) 해 준다면 구조와 표현이 분리되어 소스도 간결해지고 브라우저 렌더링 속도 역시 빨라집니다.

웹2.0 이라는 단어로 더 유명한 시맨틱 웹 에 맞춰야 한다는 이유도 있습니다.
검색엔진등의 기계가 해석하는 용도에 맞춰서 코딩한다는 거죠. 예를 들면
,
등의 문서의 제목으로 쓰이는 용도의 엘리먼트는 문서 제목 정도로 해석될 수 있기 때문에 그 용도에 맞는 내용이 있어야 검색 데이터도 제대로 쌓일 수 있겠죠.
이런것도 용도에 맞는 표준 엘리먼트(태그)를 사용하면서 코딩을 하게 된다면 자연스럽게 해결되는 문제입니다.

웹표준을 해야해 말아야해? 라는 논쟁은 너무나 시대에 뒤떨어진 논쟁이고, 무조건 해야 한다는 전제로 다른 논쟁과 연구를 해야겠죠.
예를 들면 보다 효율적인 웹접근성의 방법에는 어떤것들이 있는가 라던지, 곧 시행될 장애인 차별 금지법에 대해서 우리의 웹사이트는 어떻게 대처해야 할까 등을 말이죠.

우리나라의 많은 웹개발 종사자들이 뒤늦게나마 웹표준의 중요함에 대해서 인지하고 있다는건 다행이라고 생각합니다.
몰랐더라도 이제부터 인지하고 함께 만들어가는 개발자분들이 많이 생겨났으면 하는 바램입니다.

개인적으로 안타까운 사실은, 제가 다니고 있는 회사에서는 웹표준의 중요함과 필요성에 대해서 대부분 모르고 있다는 것입니다.
ActiveX 컨트롤 등 IE 에 친화적인 웹서비스를 하는 회사의 특징 때문에 특별히 고민할 필요를 못느끼는 듯 합니다.

얼마전 사이트 개편때 디자인 외주를 주면서까지 웹표준(엄밀히 말하자면 DTD Transitional) 사이트 디자인 개편을 단행했는데,
그 이유가 단순히 다른 사이트도 그렇게 바꾸고 있으니까 우리도 하자는 것,
로 만들어진 레이아웃은 IE 에서 렌더링 속도가 느려서 라는 것입니다.
어떤 이유에서라도 웹표준에 근접하는 노력을 했다는건 중요하지만,
이제는 그 필요성을 정확히 인지하고 웹표준에 대한 노력을 함께 한다면 더없이 좋을것 같습니다.
웹표준이라는 단어가 어디서 시작된 단어인지는 모르지만, 상당히 적절한 단어라고 생각됩니다.
단순히 css+xhtml 에 의한 표준에 국한된 의미가 아니라, 웹페이지에 사용되는 모든 도구들의 표준을 통칭한다는 의미로 받아들여 집니다.
javascript 역시 제멋대로인 MS 의 Jscript 덕분에 ECMAscript 라는 표준안이 탄생하게 되었죠.
억울하겠지만 우리는 이런 표준을 위한 노력의 결과물들을 공부하고 사용해서 악의 무리에 대항(?) 해야 합니다.
웹표준에 대한 노력은 이제 막 시작된것도 끝난것도 아닙니다. 많은 사람들의 노력으로 계속해서 끊임없이 이루어져 나가고 있는것 입니다.
제자신도 아직은 부족한 실력이지만 이런 뜻깊은 노력에 동참하고 싶습니다.
이런 노력들이 멈추지 않는한 우리나라도 언젠가는 safari 나 FF 로 인터넷 뱅킹이 가능한 시대가 반드시 오리라 믿고 있습니다.
그래서 저는 앞으로 더 많은 시간과 노력을 웹표준에 투자 하고자 합니다.
짧은 지식으로 두서없이 적은 제생각을 읽어주셔서 감사합니다