킹콩

웹에서 padding을 사용하면 고정한 넓이나 높이에 영향을 주므로

높이와 넓이가 지정된 div안에 div를 새로 지정해서 padding만 쓰면 사이즈 계산해서 padding을 넣을 필요가 없다.

ex)

<div style='width:400px; height:400px;'>
    <div style='padding:20px;'>

    </div>
</div>

ex) 사이즈 계산

<div style='width:360px; height:360px; padding:20px;'>

</div>

padding이 상하좌우 20px씩 들어가므로 높이,넓이를 각 40px를 빼줘야함

1. ie7 ~ 8 에선 css의 가상선택자인 last-child가 먹히지 않는다.

( 반대로 first-child는 정상 작동 된다.)

last-child를 모든 브라우저에 사용 하려면 각 객체만큼의 인접 선택자를 사용 하면된다.

<ul>

    <li></li>

    <li></li>

    <li></li>​​

</ul>

가 있다면 마지막 선택자는

ul li:last-child{} -> ie9 이상

ul li+li+li{} -> 모든 브라우저

2. inline-block 처리

ie7 에서 inline-block라는 속성이 먹히긴 하지만 기존의 태그의 속성이 블럭태그 였다면 

먹히지 않는다 해결방법은 속성에 { zoom:1; *display:block } 처럼 핵을 사용 하는 방법이 있는데 추천하지는 않는다.

가장 무난한 해결 방법은 div나 center, dd, dl, li 같은 블럭요소의 태그에 사용 하는것보다

span이나 a, b, i 등 인라인태그에 inline-block를 사용하면 오류 없이 사용 할 수 있다.

3. ie7,8,9 는 초기 간격이나 여백값이 다르기 때문에 초기화를 한번 해주어야 한다.

ex) body{margin:0, padding:0}  혹은 reset.css 를 검색해보기 바란다.

4. 테이블의 테두리 색상은 ie에서 각기 다르기 때문에 각 td에 주는 편이 똑같이 볼 수 있다.

border='1' 이라는 속성 자체보다 css로 td{border:1px solid gray} 처럼 주는 것이 좋다.

두줄을 합치려면 border-collapse:collapse; 속성을 사용하면 되고

td:hover{} 오버시의 테두리 색을 변경하려면 기존 solid보다 우선위권자인 double를 사용하면된다.

td:hover{border:1px solid double}

<style>

.menuTab{display: inline-block;}

.menuTab ul{list-style: none; margin-left: 1px;}

.menuTab ul li{float: left; border:1px solid #C9C9C9; margin-left: -1px; padding: 7px 10px; margin-bottom: 5px;}

.menuTab ul li:hover{border: 1px solid red; margin-right: 1px;}

.menuTab ul li:hover+li{border-left: none;}

.menuTab ul li a{color:black;}

</style>

<div class='menuTab'>

<ul>

<li class=''><a href="">공지사항</a></li>

<li class=''><a href="">가맹정 게시판</a></li>

<li class=''><a href="">자유게시판</a></li>

<div style='clear: both;'></div>

</ul>

</div>

각 브라우저의 태그별 margin과 padding의 값이 서로 상이하기 때문에

그 값을 제로로 초기화시켜서 모든 브라우저의 기초값을 없애고 직접 스타일을 지정하여

값을 넣으면 모든 브라우저에서 같게 보이게 된다. 이 reset을 하지 않을 경우

각브라우저 마다 적용되는 스타일 핵이나 새로운 스타일을 재지정해야 하는 번거로움이 있다.

이걸 미연에 방지하기 위에 reset을 하고 작업하길 권장한다.

reset를 하는법은 각 태그의 margin, padding, 혹은 border등을 삭제한 일련의 규칙을 기술해놓은 css문서를

html 문서에 import시키면 된다. 

ex) <link rel="stylesheet" href="reset.css">

대표적인 reset.css 는

html5를 포함 하고 있는 normalize.css : http://necolas.github.com/normalize.css/

에릭 마이어의 reset.css : http://meyerweb.com/eric/tools/css/reset/

html5doctor : http://html5doctor.com/html-5-reset-stylesheet/

yui2 : http://developer.yahoo.com/yui/reset/

<style>