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 뿐 아니라 대부분의 코드에 적용가능한 속성인데.. 이 속성이 있는 코드들끼리 영향을 주고 받습니다. 즉 위 예제에서..

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

IE Developer Toolbar 를 소개합니다. 마이크로소프트사의 Internet Explorer(이하 IE) 에서 작동하는 S/W 입니다. 공식적으로 마소에서 배포하는 S/W 이구요. 국내 높은 IE점유율로 IE에서만 잘 보이면 장땡이던 시절이 있었습니다. 그때는 지금과 같이 전문 HTML, XHTML, CSS 코더가 따로 있지 않고 디자이너나, 프로그래머가 병행해서 처리했었죠. 그 만큼 중요하게 생각하지 않았던 부분입니다. 지금은 많이 나아졌지만 국내 웹사이트는 비정상적으로 제작되곤 했죠. 해외에는 뜨지도 않는 그래픽요소가 너무 가득하고, 필요한 정보를 전달하기 위한 사이트구조라기 보단, Look&Feel, 보기 좋은 것에 더 신경을 썼습니다. 물론 디자인이란 것이 보기 좋아야 하지만 웹이란 특..