웹 표준 코딩시 주의할점

레이아웃 코딩시 float 속성 주의 할점
div 안에 div의 플로트 속성을 주면
밖의 div에 꼭 플로트 속성을 적용시켜야 한다
안그러면 밖의 div가 안의 div를 감싸질 못한다.
 
예제 소스
오른쪽에 같다  붇는다.
<style type="text/css">
#box {width:500px;border:1px solid red;float:right;}
#a {width:100px;border:1px solid #000;float:left;}
#b {width:100px;border:1px solid #000;float:right;}
</style>
 
왼쪽에 같다  붇는다
<style type="text/css">
#box {width:500px;border:1px solid red;float:right;}
#a {width:100px;border:1px solid #000;float:left;}
#b {width:100px;border:1px solid #000;float:right;}
</style>
 
익스에는 자동으로 float : left 설정되어 잘 보이지만 파폭에서는 아예 선 하나만 나온다
<style type="text/css">
#box {width:500px;border:1px solid red;}
#a {width:100px;border:1px solid #000;float:left;}
#b {width:100px;border:1px solid #000;float:right;}
</style>
해당 div를 가운데 정렬
해당 div에 가운데 정렬를 시키려면 해당 div가 아닌
해당 div의 상위 요소에 text-align:center 나 margin: 0 auto를 적용 시켜야 한다.
 text-align:center 하구 margin 0 auto 하고 같은 뜻이다.
 
파폭은 바디에   text-align:center 와 마진 오토를 함께 써줘도  가운데 정렬이 안된느데 이것은
위에서 설명한 것처럼 예외적인 파폭 버그이다 익스는 잘 동작한다
 
파폭에서는  #cantainer 와 최고 밖에 있는 전 레이어 아웃을 감싸고 있는 곳에 마진 오토 값을 적용시켜야 가운데 정렬이 된다.
 
div박스 정렬시 파폭은 text-align:center를 인식못하고  margin 0 auto값을 가운데 정렬로 인식
따라서 파폭에서 가운데 정렬 되어서 보이게 할려면 둘다 써주어야 한다.
text-align 값을 항상 인식 못하는것은 아니다.
파폭은 예외적으로 div에만 text-align:center를 인식 못한다.
 
더 자세히 설명
파폭은  text-align을 텍스트에 대한..가운데 정렬으로 알아들어 내용물을 가운데 정렬시키는데 박스는 정렬 안시킨다.
 <div id=table>
 
<div id=header></div>
 
<div id =container>
<div id =left></div>
<div id=center></div>
<div id=right></div>
</div>
 
<div id=footer></div>
 
</div>
 
일때 container float=left 주는 레이어아웃 기법을 사용했을 때
container에 width 치수를 주면
float:right라는 속성으로 인해 id=right 레이어가 창크기를 키우면 오른쪽으로 가는 것을 막을 수가 있다.
 
따라서 레이어 아웃에는 width 값을 꼭 넣어줘야 한다. %로 하는것이 원래 더 좋은데 불가능할 때도 있다.
 <div id=box>
<div class=top></div>
<div class=center></div>
<div class=bottom></div>
</div>
 
이럴 때 id속성이 top과 bottom에는 아무 내용이 없고 center에만 내용이 있을 때
익스플로러에서는 top과 center 사이 그리고 center와 bottom 사이에 공백이 생긴다.
이유는 익스플로러가 폰트 사이즈를 자동으로 줌으로써 발생되는 문제 이므로
top과 bottom 에 font-size=0 속성을 준다.
div 박스에 리스트 스타일에 float:속성을 준경우 그박스안에 있는 요소가 float속성에 영향을 받을 있다
따라서 해결책은 같은 쪽으로 float속성을 준다. 그리고 그 상위 박스에도 float속성을 주는 것을 잊지말자.
그리고 h1~h6속성을 자체 margin값과 padding값을 가지고 있으므로
공백을 안생기게 하기 위해서는 margin:0px; padding:0px 값을 주어야 한다. ^^;
실무에서 굉장히 자주 마주치는 익스플로러 6 만의 CSS 버그가 있습니다.
쏭군은 익스플로러 7과, 파이어폭스2를 기반으로 디자인 작업을 합니다.
(사파리나 오페라는 아주 가끔 열어보고요.. 그래서 사파리에서 약간의 문제가 있긴 하지만..)
그래도 익스7, 파폭2에서 제작하면 익스 6이나 다른 브라우저에서도 그럭저럭 잘 뜨더군요..
그런데 익스 6은 역시 요주의 녀석이긴 한게...
레이아웃이라던가 객체가 벌어지는 현상이 안 생길래야 안생길수가 없어서..
실무에서 정말 자주 마주치는 익스플로러 IE용 버그 해결 방법을 몇 가지 쓰고자합니다
float 를 쓴 객체에 margin의 left 값이나 right 값이 들어가면 마진값이 두배로 늘어납니다. 그래서 파폭이나 익스7에서 멀쩡한 레이아웃이 익스 6에서는 마진값이 2배로 불어나서 레이아웃이 깨지거나 벌어집니다. 그래서 반드시 알아야하는 버그해결 법입니다.
float 를 쓴 객체에 margin 가로값을 주고나서는 꼭 display: inline 값을 주자는 것!

거의 모든 IE관련 버그는 홀리핵이라는 녀석을 많이 사용하는데, 사용법은 간단합니다
* html { height: 1px; }
그리고 css 상단에는 모든 * 필터를 이용해서 마진과 패딩을 0으로 셋팅하고 CSS 코딩을 시작한다면, 거의 모든 브라우저의 마진 및 패딩 문제를 해결한 상태에서 코딩을 시작할 수 있습니다. 물론 100% 해결되는 건 아니지만 80% 이상 원하는 시안을 얻는데 도움이 됩니다
* { margin: 0; padding: 0; }
가장 널리쓰고, 유용한 핵이라고 할 수 있겠습니다~
위에 녀석들도 필수적으로 숙지하고 이용해야 하는 자주 등장하는 녀석들입니다만, 역시 IE의 패딩버그를 따라갈 수 없지요.. 덜덜 ㅠㅠ 이 패딩버그는 상당히 많이 발생하고, 레이아웃도깨먹고, 고치는데 많이 헷갈리기도 하는 기특한 녀석이라서~ 정말 겁납니다~
위에 사용한 별표 * html 을 이용해서 해결하는 방법이 있습니다~
CSS 표준의 width나 height 값은 border 값, padding 값, margin 값을 모두 제외한 순수한 알맹이 값을 의미하는 반면에 IE는 height나 width에 padding과 border값을 포함합니다. 따라서 상당히 레이아웃 차이가 많이 나는 경우가 있습니다. 그런 경우에는 아래의 방식대로 해결하시면 됩니다.
#content { width: 200px; padding-left: 10px; }
이렇게 하면 일반브라우저에서는 총 너비는 210px 입니다. 그런데 이것을 IE에서는 그대로 200을 유지해버리기 때문에, 실제 크기 210px 을 줘야합니다.
#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; }
/* 핵으로 210px 을 줍니다, 패딩은 위에서 줘서 패스~ */
맥용 IE에서는 CSS를 정상적으로 읽는데 핵 때문에 다시 깨집니다. 그래서 다시 맥용 IE를 위해서 아래와 같이 코딩해주면 완성됩니다.
#content { width: 200px; padding-left: 10px; }
* html #content { width: 210px; w\idth: 200px; }
 /* \ 를 이용해 200px로 돌려줍니다~ */
 
엉뚱하게 자꾸 공백이 생긴다면 float:속성이 상위나 하위에 있는지 보고
상위에 float 속성을 주면은 밑에도 float속성을 주자~!
더블 마진값 들어가는것은 익스6에서 display:inline 으로 버그 해결 ㅎㅎ ^^;
나의 코딩 단점은 id값을 너무 많이 준다는것 되도록 class 사용하자~!!

http://naucika.tistory.com/156