'인터넷(Internet)/표준코딩'에 해당되는 글 3건

  1. 2009/10/28 float속성 사용시 배경이 없어지는 경우 (3) by 아스크림
  2. 2009/02/13 [표준코딩] IE5.5, IE6, IE7, IE8 인터넷익스플로어 브라우저 버전별 확인 프로그램 (2) by 아스크림
  3. 2009/01/22 [표준코딩] clear:both 스타일 요소 알아보기 by 아스크림

float속성 사용시 배경이 없어지는 경우

인터넷(Internet)/표준코딩 : 2009/10/28 11:04
Tag css, float, 표준코딩

CSS 에서 float 속성 사용할 경우 잘 나오던 배경이 사라지는 경우가 있습니다.

예를 들어
CSS 예제1
.wrap {width:500px; background-color:red;}
.left {float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제1
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>


위와 같이 두개로 분리한 영역을 감싸는 영역의 배경이 사라지는 경우죠~

이런 현상은 class="wrap" 이 적용된 영역의 높이가 0px 로 인식도기 때문에 보이지 않는 경우인데..
이유는 float 란 녀석의 속성때문에 그렇습니다.

float란 속성은 div 뿐 아니라 대부분의 코드에 적용가능한 속성인데..
이 속성이 있는 코드들끼리 영향을 주고 받습니다.

즉 위 예제에서 본다면 wrap 과 left, right 는 서로 영향을 미치지 않기 때문에 wrap 속에 left, right가 있더라도 높이가 0이 되는 것이죠.
이 문제를 해결하려면 float 영향을 받아야 하는 코드에 float 속성을 함께 써 주면되겠죠.
불필요한 곳에  float 를 사용하면서 틀어질 수 있는 그리드는 clear:both; 속성으로 방지해 주면됩니다.

아래에 변경된 예제입니다.
CSS 예제2
.wrap {float:left; width:500px; background-color:red;}
.left {clear:both; float:left; width:250px;}
.right {float:right; width:250px;}

코딩 예제2
<div class="wrap">
<div class="left">왼쪽</div>
<div class="right">오른쪽</div>
</div>

Posted by 아스크림
Trackback(0) : Comment (3)

댓글을 달아 주세요

  1. sdadsadasd 2010/01/08 21:34  수정/삭제 댓글쓰기 댓글주소

    asdas

  2. BlogIcon sdadsadasd 2010/01/08 21:34  수정/삭제 댓글쓰기 댓글주소

    asdsaf

  3. 남영훈 2010/01/08 21:48  수정/삭제 댓글쓰기 댓글주소

    남영훈

[표준코딩] IE5.5, IE6, IE7, IE8 인터넷익스플로어 브라우저 버전별 확인 프로그램

인터넷(Internet)/표준코딩 : 2009/02/13 04:12
표준코딩을 하면 브라우저 버전에 따라 확인을 해야 합니다.
요즘은 IE7을 가장 많이 사용하고 있지만.. 아직도 IE6 이하 버전을 사용하는 사람이 많기 때문에
브라우저를 확인하지 않으면 깨지는 현상이 있을 수 있겠죠.

이 프로그램은 브라우저 버전별로 사이트를 확인 할 수 있도록 도와줍니다.
UI는 일반 브라우저와 유사해서 쉽게 사용할 수 있습니다.

IETester

제일 상단 "탭" 메뉴에서 원하는 브라우저 버전을 채크하면 탭 형태로 브라우저가 생성됩니다. (쉽죠? ^.^)

다른 프로그램도 써 봤는데.. 요놈이 비스타에서도 잘 돌아가고.. 제일 좋네요. ^.^

프로그램 다운 받기 [Download IETester v0.2.3 (24MB)]

제작사 홈피 바로 가기 [http://www.my-debugbar.com/wiki/IETester/HomePage]


Posted by 아스크림
Trackback(0) : Comment (2)

댓글을 달아 주세요

  1. 태건 2009/09/10 16:14  수정/삭제 댓글쓰기 댓글주소

    감사히 받아 가겠습니다.

  2. 아자마마라 2010/04/27 00:38  수정/삭제 댓글쓰기 댓글주소

    브라우저별 테스트하는거 때문에 찾고다녔는데 감사합니다 + ㅅ+

[표준코딩] clear:both 스타일 요소 알아보기

인터넷(Internet)/표준코딩 : 2009/01/22 16:55
Tag clear:both, css, 표준코딩
clear:both; 는 float 설정을 초기화 해주는 옵션입니다.

다음과 같이 나란히 두개의 영역이 나오게 <div> 태그에 float 속성을 주겠습니다.

1번
2번
<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="float: left">2번</DIV>

float속성에 left를 기입해 연속적으로 나타나게 합니다.

그렇다면 두번째 <div>에 clear:both  속성을 넣으면 어떻게 될까요?
속성을 부여받은 태그는 이전 태그의 float 속성을 말그대로 clear 해 줍니다.
그래서 위 예제에 적용하면 2번이 아래로 떨어지게 됩니다.

1번
2번
<STYLE>div.sample {margin:10px; width:100px; height:30px; text-align:center; background-color:gray;}</STYLE>

<DIV class=sample style="float: left">1번</DIV>
<DIV class=sample style="clear:both; float: left">2번</DIV>

붉은 색으로 표시된 clear 속성을 삽입결과 2번 div 가 아래로 떨어지는 걸 보실 수 있습니다.


이 예제는 clear:both 에 대해 알아보기 위한 예제입니다. (실제 코딩에서는 약간 다르겠죠. ^^;;;)


Posted by 아스크림
Trackback(0) : Comment (0)

댓글을 달아 주세요