Notice
Recent Posts
Recent Comments
Link
살다
웹표준(1) 본문
IE6은 워낙에 문제가 많아, 각종핵과 온갖편법을 동원해야 그나마 FF과 비슷한 모양새를 만들 수 있었고, IE7은 몇가지 부분만 제외하곤 거의 FF와 비슷한 모양을 만들어낼 수 있습니다.
이번글에서 IE계열과 FF계열에서 똑같이 보이게 하기위한 몇가지 작은팁을 소개해 볼까 합니다. 경험에서 우러나온 것이다보니, 약간의 오류가 있을 수 도 있습니다.
하나, 문서타입을 HTML문서 최상단에 반드시 정의하자
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">위의소스처럼 현재문서가 어떤언어로 제작되었는지 DOCTYPE 을 정의해주어야 합니다.
사실 이 한줄로 대다수의 브라우져가 비슷하게 보이게 될 것입니다.
DOCTYPE이 정의되어 있지 않을경우, 각각의 브라우저마다 다른 기준으로 가지고 HTML문서를 랜더링 하기때문에 화면에 보이는 모습이 제각각일 수 밖에 없습니다.
DOCTYPE은 브라우져가 어떤방식으로 HTML을 해석할지 알려주는 중요한 부분이라고 할 수 있겠죠. 저기에 보이듯이 -//W3C//DTD XHTML 1.0 Transitional//EN 부분이 브라우져에게 XHTML 1.0 호환모드로 랜더링 해주세요. 라고 알려주는 부분입니다.
아래의 소스중 원하는 모드로 바꿔주시면 되겠습니다. 물론 자신이 만든 HTML문서가 어떤모드에 최적화되어있는지부터 알아야겠죠?
HTML 4.01 호환모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능
HTML 4.01 엄격모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부태그가 완전히 먹통, 가장 이상적인 문서작성시 사용.
XHTML 1.0 호환모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...ansitional.dtd">
1999년 12월 24일 확정된 프레임문서. frameset이 사용가능. 하지만 넷스케이프.. FF(파이어폭스)쪽의 frame은 전혀 작동 되지 않음
XHTML 1.0 엄격모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
위의 소스들을 간략하게 해석하자만, "해당 문서 HTML출력용 문서이고 W3W의 HTML DTD 4.01을 기반(소스마다 기반이 다름)으로 (Transitional:호환/Strict:엄격)방식으로 랜더링하며 영어로 출력하며, http://www.w3.org/TR/html4/loose.dtd 문서를 참고하면 된다. 라고 해석되어집니다.
여기서 Transitional은 DTD타입을 뜻하는 것으로 아래와 같은 단어로 바꾸어 사용할 수 있습니다.
Strict : 권장 표준안
Transitional : Strict 보단 완화된 표준안
Frameset : 프레임을 나눌경우 프레임페이지에 사용되는 표준안
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
가장 최근의 CSS 규격을 따름. 엘리먼트 배치가 자유로움, 스크롤링 레이어 같은건 사용불가능, position, display 속성과 구현 방법의 차이가 상이, frame 사용 불가능
HTML 4.01 엄격모드
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1999년 12월 24일 확정 규격. 권장하지 않는 element, attribute, frame 사용불가, 엘리먼트 배치가 엄격함, 일부태그가 완전히 먹통, 가장 이상적인 문서작성시 사용.
XHTML 1.0 호환모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm...ansitional.dtd">
1999년 12월 24일 확정된 프레임문서. frameset이 사용가능. 하지만 넷스케이프.. FF(파이어폭스)쪽의 frame은 전혀 작동 되지 않음
XHTML 1.0 엄격모드
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
위의 소스들을 간략하게 해석하자만, "해당 문서 HTML출력용 문서이고 W3W의 HTML DTD 4.01을 기반(소스마다 기반이 다름)으로 (Transitional:호환/Strict:엄격)방식으로 랜더링하며 영어로 출력하며, http://www.w3.org/TR/html4/loose.dtd 문서를 참고하면 된다. 라고 해석되어집니다.
여기서 Transitional은 DTD타입을 뜻하는 것으로 아래와 같은 단어로 바꾸어 사용할 수 있습니다.
Strict : 권장 표준안
Transitional : Strict 보단 완화된 표준안
Frameset : 프레임을 나눌경우 프레임페이지에 사용되는 표준안
두울, margin과 padding 등 의 기본값이 다른 브라우져들
줄간격, margin, padding의 기본값이 다른 브라우져들 때문에 컨텐츠의 높이가 달라서 문서전체, 또는 테이블의 높이 등을 맞추기가 힘든경우가 많습니다.
이럴경우에는 전체선택자를 이용하여 기본값을 정의해줍니다. (2008.01.23 23:40 수정)
* {padding:0px; margin:0px; line-height:100%;}
세엣, float 버그
IE의 버그를 해결하고, FF에 영향을 미치지 않도록 앞서 설명한 CSS핵을 이용해보도록 하겠습니다.
참고 : 2008/01/15 - [이럴땐, 이렇게!/프로그래밍] - 많이 쓰이는 CSS 핵
IE6에서 대표적인 버그로는 float:left; 속성을 주었을때 margin 이 2배로 적용되는 것이 있다.
이를 해결하기위해 언더바(_)을 이용하여 잡아주면 해결됩니다.
.LayerFloatLeft {float:left; _display:inline;}
display 속성을 inline으로 잡아주면 해당버그가 고쳐지며, FF와 IE7에서는 float 이 정의되어있을때 자동으로 inline으로 인식하므로 정상적으로 동작하는 브라우져를 제외시키기 위하여 언더바핵을 사용해서 정의하였습니다.
네엣, input 태그의 아래위 여백문제
IE7에서도 FF과 다르게 input 태그 아래위로 여백이 들어가 있음을 알수있다.
위와 같은 문제를 해결하기 위해, 스타(*)핵을 이용하여 모든 IE계열에서 margin 값을 조정해주면 됩니다.
참고 : 2008/01/15 - [이럴땐, 이렇게!/프로그래밍] - 많이 쓰이는 CSS 핵
**html input, *html input {margin:-1px 0px -1px 0px;}
다섯, 테이블은 가급적 table-layout:fixed 를 사용해서 쓰자.
테이블의 가로폭은 브라우저마다 제각각입니다.(안타깝게도) 안의 내용에 따라 크기가 재정리될수도 있고, 크기가 늘어난다던가 세로가 변한다던가 등의 문제가 항상 머리를 아프게 하죠.
그때 테이블태그에 아래와같이 style 을 지정해두면, 정의한 사이즈가 고정이되며, 한줄한줄 보여지기때문에, 랜더링속도도 훨씬 빨라집니다.
한가지 주의할점은 아래소스를 쓸때 테이블의 제일 첫줄에 가로폭이 반드시 정의되어 있어야 한다는 점입니다.. (또는 아래 예처럼 <col> 태그를 사용해도 됩니다.)
<table style="table-layout:fixed;">
<col width="50%" /><col width="100" /><col width="20" />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<col width="50%" /><col width="100" /><col width="20" />
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
여섯, 이미지의 쓸데없는 공백문제
IE에서는 이미지 하단과 옆 일부분에 공백이 생겨있다.
위의 그림에서 볼 수 있듯이 IE에서는 <img> 태그에 정렬값(align)이 없을경우 저렇게 공백이 생겨버립니다. 이로인해 약 2~3px 의 공간차가 생겨버리게 되죠.
이럴경우 IE를 위해 아래와 같이 <img> 태그에 align 값을 넣어주면 해결됩니다.
<img src="주소" align="(middle:줄중간|top:줄상단|bottom:줄바닥|absmiddle:줄높이중간(?),단, absmiddle 은 비표준.)" />
2008.01.24 17:56 추가
UTF-8 모드에서 align 을 잘못사용시, Hover:underline 이벤트에 문제가 생길 수 있다고 합니다. (댓글참조)
일곱, TABLE에서 COL 태그와 padding 태그 사용에 따른 문제
padding 값에 따라 길이가 달라진다.
위와같이 FF는 COL 태그에 지정된 100px 에서 안쪽으로 10px 이 여백이 생겼고, IE는 지정된 100px에서 밖으로 10px의 여백이 생겼습니다.
이문제를 해결하려면 2가지 방법이있습니다.
IE에 맞추는 방법
<table>
<tr>
<td style="width:100px; padding:5px;"></td>
</tr>
</table>
<tr>
<td style="width:100px; padding:5px;"></td>
</tr>
</table>
위의 소스처럼 하였을 경우에는 IE, FF 모두 100px 에서 바깥쪽으로 10px 이 증가하게 됩니다.
하지만 가로폭을 여백과 상관없이 꼭 100px로 맞추어야 한다면 아래와 같이 하면 됩니다.
FF에 맞추는 방법
<table style="table-layout:fixed">
<col width="100" />
<tr>
<td><div style="padding:10px;"></div></td>
</tr>
</table>
<col width="100" />
<tr>
<td><div style="padding:10px;"></div></td>
</tr>
</table>
위의 소스처럼 TD 엘리먼트안에 DIV나 TABLE을 하나더 넣어 그곳에 padding 값을 정의하면 FF에서처럼 IE도 100px 로 고정되게 됩니다.
출처 : http://blog.arzz.com/298
기타 관련 링크 : http://ie7-js.googlecode.com/svn/test/index.html
반응형
'정보공유' 카테고리의 다른 글
| 블루웹 호스팅 119 서비스 2탄 - 악성코드 삽입 대처하기 (0) | 2009.10.26 |
|---|---|
| Microsoft Offers 90 Day Trial of Windows 7 Enterprise (0) | 2009.09.21 |
| 블루웹 배너 달고 월급받자~! (0) | 2009.08.03 |