이번글에서 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/xhtml1-transitional.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/xhtml1-transitional.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 로 고정되게 됩니다.
IE와 FF에서 같게 보이는 것은 사실 웹표준을 맞춘다기보다 브라우저의 특성을 파악해 맞추는 작업이라는 의미가 강합니다.
완벽하게 웹표준을 맞춰 코딩을 해도, 브라우저의 해석여부에 따라 보이는 모습이 달라지기때문에, 결국 각각에 맞게 맞춰줄수밖에 없는 것이죠.
몇가지 IE와 FF 의 모습을 맞추는 방법을 소개했는데, 다음에 좀더 다양한 내용과 자바스크립트등의 내용을 포함하여 2탄을 준비해볼 생각입니다.
'이럴땐, 이렇게! > 프로그래밍' 카테고리의 다른 글
| ExternalInterface.addCallback 버그해결볍 (1) | 2008/02/02 |
|---|---|
| 액션스크립트 3.0과 자바스크립트 연동하기 (0) | 2008/01/24 |
| IE와 FF에서 똑같이 보이게 하기 위한 몇가지 팁 (29) | 2008/01/23 |
| myEolin 추천/북마크 버튼 디자인 바꾸기 (15) | 2008/01/19 |
| 많이 쓰이는 CSS 핵 (11) | 2008/01/15 |
| MySQL 튜닝 18 가지 (2) | 2006/01/25 |
RSS를 등록하여 쉽게 글을 구독할 수 있습니다.
0 Votes |
||
0 Bookmarks |
댓글을 달아 주세요
일단 잘 읽겠다는 답글을 단 후에 읽어보겠습니다. (다 읽고 이해하는데 1주일은 걸릴 듯...)
2008/01/23 22:12수고하셨습니다. 잘 읽겠습니다.
계속 조금씩 정리해서 포스팅 하도록 하겠습니다. >ㅅ<
2008/01/23 23:42지긋지긋한 ie6...
2008/01/23 22:41그냥 ms에서 ie7로 강제업글이라도 시켜주었으면 좋겠다는 생각까지 들어요 ㅠ ㅠ
좋은 정보 감사합니다. 스크랩해놓고 자주 보러 올께요. :)
IE6버그때문에 핵을 사용하였다면 꼭 끝에 /* IE6 KIN */ 을 빼먹어선 안되겠습니다. -0-)b
2008/01/23 23:42input부분, 지금까지는 그냥 그러려니 하고 있었는데 다 방법이 있었네요. 감사합니다.
2008/01/23 22:56그런데 IE에서 form에도 여백이 생기는지 궁금합니다.
기본적으로 form 에는 마진이 생깁니다.
2008/01/23 23:31그래서 CSS에 FORM {margin:0px;} 을 해주면 폼태그 아래위로 공백이 사라집니다. :)
좋은 정보 감사합니다. ^-^;
2008/01/23 22:46도움되셨다니 다행이에요. + _+
2008/01/23 23:42좋은 정보 감사합니다.
2008/01/23 23:13IE8에선 괜찮아지겠죠?
IE6에서 IE7이 나올떄까지를 생각해보면 IE8은... 너무나 먼 미래가 아닐지 ;ㅁ;
2008/01/23 23:41꼼꼼하고 좋은글입니다.
2008/01/23 23:35헌데 약간의 오류가 있네요^^
*html {padding:0px; margin:0px; line-height:100%;}
이 부분은 문제가 있습니다.
모든 브라우저의 마진과 패딩등을 초기화 하는 방식은 많이 있지만 대체적으로 선택자라는 녀석을 사용하여 초기화를 시킵니다
CSS는 상속을 기반으로 하므로 최상단에 선택자를 선언해줍니다
* { margin: 0; padding: 0; }
이것은 절대로 핵이 아닙니다. 선택자 입니다^^
보통은 선택자를 사용하면 대부분의 브라우저에서 문제없이 사이트 제작이 됩니다만, 엄밀하게 말하면 선택자 조차도 사용을 지양하는 것이 좋습니다.
필요할때마다 해당 엘리먼트를 초기화 하는 것이 가장 이상적인 방법이에요^^
그리고 될 수 있으면 거의 모든 CSS 버그는 핵 없이도, 사파리나 IE, FF, 오페라 등의 브라우저에서 동일하게 뜨게 할 수 있습니다.
될 수 있으면 핵 사용은 지양하는 것이 좋습니다..^^
이래저래 아는척만 하고 가서 죄송합니다.
오늘따라 날씨가 차네요.. 감기 조심하세요^^
앗 몰랐던것을 알려주셔서 감사합니다.
2008/01/23 23:33전 단지 padding:0px; margin:0px; 가 FF의 기본값으로 생각하고 있었고, IE는 그렇지 않은듯하여 핵을 사용해왔거든요. ;ㅁ;
자신이 원하는것을 골라 가질수 있을 정도로 많은 정보를 가진것 같습니다....
2008/01/23 23:43조금더 살펴보고 필요한것이 있다면은 가져다가 사용을 해야 겠습니다.^^
유용하게 사용해주시면 그것보다 더 좋은일은 없을거에요 >ㅅ<
2008/01/24 17:10단순히 익스플로러에 맞추기 위한 것이라면 CSS핵은 필요 없습니다.
2008/01/24 00:28http://www.quirksmode.org/css/condcom.html
여기에 가시면 <comment>태그와 <!--[If IE]> 명령어를 사용하는 방법이 나와있지요. 이런 식으로 CSS를 따로따로 만들어주는게 언제 버전업되어 사라질지 모를 CSS핵에 의존하는 것보다 훨씬 낫지요.
이번글을 쓰면서 굳이 CSS핵을 사용한건, 저번글에 CSS핵에 대해 적어둔게 있어서 참고거리가 되었기때문이죠 ^^
2008/01/24 17:12물론 말씀하신것처럼 CSS핵이 브라우저의 특성이나 버그를 이용한것이기때문에, IE가 공식적(?)으로 지원하는 주석선택자(?)보단 불안정하긴 하죠 ^^
좋은의견감사드립니다.
http://ie7-js.googlecode.com/svn/test/index.html
2008/01/24 00:37이 방법도 괜찮을듯 합니다.
오옷!
2008/01/24 17:13좋은링크 감사드립니다. >ㅅ<
좋은 팁과 좋은 댓글들 잘 보고 갑니다. 북마크!
2008/01/24 00:47북마크하실만큼 방대한 양은 아닌데 ;ㅁ;
2008/01/24 17:13북마크 감사드립니다~!
다른건 개발자의 취향에 따라 쓴다고 하더라도(핵이든 선택자든), 저 Doctype만은 꼭 지키는게 좋다고 생각합니다. Doctype 지정만으로도 렌더링 모습이 확 달라집니다. 그런데 국내 대부분의 사이트들은 이걸 안지키죠...
2008/01/24 10:44요즘엔 대부분 에디터툴에서 자동으로 붙여주더라구요 ^^;
2008/01/24 17:14단지 자동으로 붙여준 그 라인이 무슨의미인지 몰라서, doctype 과 전혀 다른방식으로 코딩해서 낭패 ;ㅁ;
다른건 눈에 안들어 왔지만. "여섯, 이미지의 쓸데없는 공백문제" 이 부분에서 align 보다는 모 태그(div가 되겠죠)에 font:0/0 arial; 을 주시는게 더욱 좋습니다. align 잘못 사용하게 되면 utf-8에서 a 태그로 묶여있을경우 hover underline에 문제가 생길 수 있거든요~
2008/01/24 15:01앗 UTF-8 에서 그런문제가 발생할줄이야;;
2008/01/24 17:14쭉 UTF-8 에서 작업해왔는데 왜 몰랐을까요 ;ㅁ;
몰랐던 사실을 알려주셔서 감사합니다.
글 잘 읽었습니다.
2008/01/24 18:11혹시 "IE에 맞춰진 사이트 수정하라" 라는 호소에 참여하고 싶으시면
http://liketree.net/view/63
저기... 다른 질문인데요... IE6에서는 a.gif를, IE7/FF 등의 다른 브라우저에서는 b.png를 출력하려면 어떻게 하면 될까요?
2008/01/24 21:29뭔가 방법이 있을 것 같은데... 검색도 어렵네요...
(저 위에도 적은 말이지만) 잘 읽겠습니다. 현재 2개 읽었는데, 무슨 말인지 알면서도 모르겠습니다. -.-;;;
이미지가 배경으로 들어간다면 CSS핵을 이용해서 서로 다르게 보이게 할 수 있겠지만, 그야말로 이미지를 브라우져에 따라 바꾸실려면, PHP나 Javascript 로 브라우져를 판별한다음 if 문으로 경우의수를 따져 보이게 하는 방법밖에 없습니다. ;ㅁ;
2008/01/24 22:03안녕하세요^^
2008/02/10 23:48이메일은 wya2017@hanmail.net
글자료를 잘 감상했습니다.......저도
티스토리블로그를 운영하고자 합니다
부득이 초대장을 신청하오니
꼭 보내 주셨으면 합니다
부탁드립니다
감사합니다
사람들을 저절로 모여들게 하는 사람
아름다운 꽃이 피어 있거나
탐스러운 과일이 달린 나무 밑에는
어김없이 길이 나 있습니다.
사람들이 저절로 모여들기 때문일 것입니다.
그와 마찬가지 이치로 아름답고
향기나는 사람에게 사람이 따르는 것은
당연한 일이 아닐까 싶습니다.
내가 좀 손해 보더라도 상대를 위해
아량을 베푸는 너그러운 사람. 그래서 언제나
은은한 향기가 풍겨져 나오는 사람.
그런 사람을 만나 함께 있고 싶어집니다.
그 향기가 온전히 내 몸과 마음을
적셔질 수 있도록, 그리하여 나 또한 그
향기를 누군가에게 전할 수 있도록 말입니다.
스치듯 찾아와서 떠나지 않고
늘 든든하게 곁을 지켜주는 사람이 있고.
소란피우며 요란하게 다가왔다가
언제 그랬냐는 듯이
훌쩍 떠나가는 사람들도 있습니다.
소리없이, 조용히, 믿음직스럽게
그러나 가끔 입에 쓴 약처럼 듣기는 거북해도
도움이 되는 충고를 해 주는 친구들이 있고
귓가에 듣기 좋은 소리만 늘어놓다가 중요한
순간에는 고개를 돌려버리는 친구들도 있습니다
우리 곁에는 어떤 사람들이 머물러 있습니까?
있을 땐 잘 몰라도 없으면 표가 나는 사람들,
순간 아찔하게 사람을 매혹시키거나 하지는
않지만 늘 언제봐도 좋은 얼굴, 넉넉한
웃음을 가진 친구들, 그렇게 편안하고
믿을 만한 친구들을 몇 이나 곁에 두고 계십니까?
나 또한 누군가에게 가깝고 편안한
존재인지 그러기 위해 노력은 하고 있는지
스스로에게 자문하고 싶습니다.
두드러지는 존재,
으뜸인 존재가 될 필요는 없습니다.
오래 보아도 물리지 않는 느낌,
늘 친근하고 스스럼없는 상대, 그런 친구들을
곁에 둘 수 있었으면, 나 또한 남들에게
그런 사람으로 남을 수 있었으면 하고 바랄 뿐입니다.
이미 초대되신듯 하네요 >ㅅ<
2008/02/12 17:28