soulgraphy

CSS 에서 float 속성 사용할 경우 잘 나오던 배경이 사라지는 경우가 있습니다. 예를 들어 CSS 예제1 .wrap {width:500px; background-color:red;} .left {float:left; width:250px;} .right {float:right; width:250px;} 코딩 예제1 왼쪽 오른쪽 위와 같이 두개로 분리한 영역을 감싸는 영역의 배경이 사라지는 경우죠~ 이런 현상은 class="wrap" 이 적용된 영역의 높이가 0px 로 인식도기 때문에 보이지 않는 경우인데.. 이유는 float 란 녀석의 속성때문에 그렇습니다. float란 속성은 div 뿐 아니라 대부분의 코드에 적용가능한 속성인데.. 이 속성이 있는 코드들끼리 영향을 주고 받습니다. 즉 위 예제에서..

표준코딩을 하면 브라우저 버전에 따라 확인을 해야 합니다. 요즘은 IE7을 가장 많이 사용하고 있지만.. 아직도 IE6 이하 버전을 사용하는 사람이 많기 때문에 브라우저를 확인하지 않으면 깨지는 현상이 있을 수 있겠죠. 이 프로그램은 브라우저 버전별로 사이트를 확인 할 수 있도록 도와줍니다. UI는 일반 브라우저와 유사해서 쉽게 사용할 수 있습니다. 제일 상단 "탭" 메뉴에서 원하는 브라우저 버전을 채크하면 탭 형태로 브라우저가 생성됩니다. (쉽죠? ^.^) 다른 프로그램도 써 봤는데.. 요놈이 비스타에서도 잘 돌아가고.. 제일 좋네요. ^.^ 프로그램 다운 받기 [Download IETester v0.2.3 (24MB)] 제작사 홈피 바로 가기 [http://www.my-debugbar.com/wiki..

clear:both; 는 float 설정을 초기화 해주는 옵션입니다. 다음과 같이 나란히 두개의 영역이 나오게 태그에 float 속성을 주겠습니다. 1번 2번 1번 2번 float속성에 left를 기입해 연속적으로 나타나게 합니다. 그렇다면 두번째 에 clear:both 속성을 넣으면 어떻게 될까요? 속성을 부여받은 태그는 이전 태그의 float 속성을 말그대로 clear 해 줍니다. 그래서 위 예제에 적용하면 2번이 아래로 떨어지게 됩니다. 1번 2번 1번 2번 붉은 색으로 표시된 clear 속성을 삽입결과 2번 div 가 아래로 떨어지는 걸 보실 수 있습니다. 이 예제는 clear:both 에 대해 알아보기 위한 예제입니다. (실제 코딩에서는 약간 다르겠죠. ^^;;;)