주메뉴 바로가기 견적문의 바로가기 주내용 바로가기
Blue Red Orange Green Grey
Mobile/HTML5
웹표준 코딩시 주의할점
입력 2012.07.26 오후 06:14 | 수정 2012.07.26 오후 06:14 | 조회 2,545
x-mind
레이아웃 코딩시 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; 와 margin auto 를 함께 써도 가운데 정렬이 안되는데 이것은 위에서 설명한 것처럼 예외적인 파폭 버그이다.

그러나 익스는 잘 동작한다.

파폭에서는 #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:0; padding:0 값을 주어야 한다.

--------------------------------------------------------------------------------

실무에서 굉장히 자주 마주치는 익스플로러 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; width: 200px; }
/* 를 이용해 200px로 돌려준다 */

--------------------------------------------------------------------------------

엉뚱하게 자꾸 공백이 생긴다면 float: 속성이 상위나 하위에 있는지 보고 상위에 float 속성을 주면은 밑에도 float속성을 주자.
--------------------------------------------------------------------------------

더블 마진값 들어가는것은 익스6에서 display:inline 으로 버그 해결......

--------------------------------------------------------------------------------

코딩 단점은 id값을 너무 많이 준다는것 되도록 class 사용하자.

출처: http://dbwhddn10.springnote.com/pages/442899
[출처] 웹 표준 코딩시 주의할점 (칼라로마) |작성자 킹마야
Security number

click to select icon

  • Very Happy
  • Smile
  • Sad
  • Surprised
  • Shocked
  • Confused
  • Cool
  • Laughing
  • Mad
  • Razz
  • Embarassed
  • Crying or Very sad
  • Evil or Very Mad
  • Twisted Evil
  • Rolling Eyes
  • Wink
  • Exclamation
  • Question
  • Idea
  • Arrow
  • Sux
  • Good
  • Very Angry
  • Attention


목록수정삭제인쇄0


Board List
No.제목글쓴이조회등록일
실무에서 많이 쓰는 위주로 순서없이 그때 그때 포스트합니다.x-mind5132015.04.02
HTML5강좌 링크x-mind1,6002012.02.28
23네이버 웹마스터 도구로 사이트 검색엔진에 추가x-mind1652016.04.26
22[HTML5] 안드로이드 및 아이폰에서 input file 사용시 카메라 호...x-mind4042016.04.22
21유투브 동영상을 배경으로x-mind1892016.03.30
20Canvas - 파일로 저장x-mind3892015.09.08
19모바일웹 카카오링크 연동(단순텍스트 링크 보내기)x-mind8322015.06.11
18[링크]나의 웹사이트에 Facebook 계정으로 로그인 하기x-mind7502015.01.22
17[HTML5] 위치정보 사용하기x-mind9142014.10.27
16모바일 브라우저 테스트 도구x-mind1,1772014.03.20
15Safari 브라우저 모바일 모드x-mind1,3522014.03.20
14iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기x-mind1,6452013.03.27
13터치 이벤트를 이용한 사용자 제스처 분석x-mind2,6682013.03.26
12모바일 웹 스크롤 페이징x-mind6,9422013.03.26
11웹표준, 웹접근성을 고려한 HTML 코딩 작업시 규칙.x-mind3,0622013.01.24
10Google Chart Api 이용 QR 코드 생성x-mind1,2462013.01.24
9웹표준 코딩시 주의할점x-mind2,5452012.07.26
8tabindex 속성이 오히려 접근성을 해친다.x-mind2,0162012.04.11
7아이폰, 안드로이드 바탕화면에 바로가기 만들기 4x-mind8,6712012.03.27
6이전버전에서의 HTML5요소 사용x-mind9472012.03.02
5HTML5 API 강좌 #1 – Web Storage 와 Application Cachex-mind1,1772012.02.28
4화면 사이즈에 맞게 이미지 확대x-mind4,0222012.01.27
Copyrightⓒ x-mind.co.kr All rights reserved. 1