DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS
* {
font-family:Tahoma, Gulim;
font-size:12px;
color:#333333;
margin:0;
padding:0;
line-height:120%;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
img {
float:left;
border:0;
}
div {
font-size:0;
}
input {
line-height:130%;
}
input, textarea {
font-size:11px;
color:#333333;
}
table.collapse {
border-collapse:collapse;
margin:1px 0 0 1px;
}
table.collapse td {
border-style:solid;
border-width:1px;
}
table.collapse {
margin:expression("0"); /* validator 통과하고 싶다면 <!--[if IE]> 이용 */
}
#wrap {
position:relative;
width:980px;
margin:0 auto;
}
#wrap 은 가운데 정렬용 div 입니다.
table.collapse 는 FF 가 문제 입니다.
셀에 테두리 다 쳐 놓고 margin 의 left 와 top 을 -1 해서 테두리를 겹치는거네요.
그래서 테이블 자체가 좌,상단이 -1 됩니다.
border-width 에 의해 - 가 더 많이 되므로 일일히 처리해야 합니다.
그리고 IE 에서 block 요소 안에서 float 를 하면, 맨 마지막 요소의 margin-bottom 이 안먹습니다.
block 요소 자체에 padding 을 주고 div 하나 더 씌우는 등의 작업이 필요합니다.
IE6 에서 중첩 block float 요소의 margin left,right 가 x2 되는 현상은 display:inline 으로 해결합니다.
float 가 되면 display:none 이 아닌 이상 display 속성이 무시되는것이 표준이기 때문에,
표준에서 벗어난 것은 아닙니다.
또, IE6 에서 margin-top:-10px 처럼 이용하면 위가 잘립니다.
block 중첩한 후 position:relative; top:-10px; 로 해야 합니다.
IE6 에서 div 는 속이 비어도 기본 글꼴 크기가 적용됩니다. 때문에 font-size:0 입니다.
글을 쓸 때는 p 태그를 쓰면 됩니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS
* {
font-family:Tahoma, Gulim;
font-size:12px;
color:#333333;
margin:0;
padding:0;
line-height:120%;
}
ul, ol {
list-style:none;
}
a {
text-decoration:none;
}
img {
float:left;
border:0;
}
div {
font-size:0;
}
input {
line-height:130%;
}
input, textarea {
font-size:11px;
color:#333333;
}
table.collapse {
border-collapse:collapse;
margin:1px 0 0 1px;
}
table.collapse td {
border-style:solid;
border-width:1px;
}
table.collapse {
margin:expression("0"); /* validator 통과하고 싶다면 <!--[if IE]> 이용 */
}
#wrap {
position:relative;
width:980px;
margin:0 auto;
}
#wrap 은 가운데 정렬용 div 입니다.
table.collapse 는 FF 가 문제 입니다.
셀에 테두리 다 쳐 놓고 margin 의 left 와 top 을 -1 해서 테두리를 겹치는거네요.
그래서 테이블 자체가 좌,상단이 -1 됩니다.
border-width 에 의해 - 가 더 많이 되므로 일일히 처리해야 합니다.
그리고 IE 에서 block 요소 안에서 float 를 하면, 맨 마지막 요소의 margin-bottom 이 안먹습니다.
block 요소 자체에 padding 을 주고 div 하나 더 씌우는 등의 작업이 필요합니다.
IE6 에서 중첩 block float 요소의 margin left,right 가 x2 되는 현상은 display:inline 으로 해결합니다.
float 가 되면 display:none 이 아닌 이상 display 속성이 무시되는것이 표준이기 때문에,
표준에서 벗어난 것은 아닙니다.
또, IE6 에서 margin-top:-10px 처럼 이용하면 위가 잘립니다.
block 중첩한 후 position:relative; top:-10px; 로 해야 합니다.
IE6 에서 div 는 속이 비어도 기본 글꼴 크기가 적용됩니다. 때문에 font-size:0 입니다.
글을 쓸 때는 p 태그를 쓰면 됩니다.
'Web(웹) Study > HTML & CSS' 카테고리의 다른 글
| CSS핵(hack) 정리 (0) | 2008.07.31 |
|---|---|
| DOCTYPE HTML PUBLIC 선언 (0) | 2008.07.15 |
| XHTML 1.0 Strict에서 더 이상 사용할 수 없는 태그 / 속성 (0) | 2008.07.09 |
| CSS의 display 속성 (2) | 2008.06.27 |
| 이젠 CSS도 프레임워크 등장? BluePrint 0.5 (0) | 2008.06.27 |