이제, 아래처럼 정상적으로 보인다.

clear : float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성

값 : left, right, none, both, inherit

clear:none - float에 대하여 박스의 위치를 제약하지않고 float는 계속해서 유효 float는 해제 되지 않는다.

clear:left - 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float 해제

clear:right - 오른쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float 해제

clear:both - 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float 해제

기본값은 none 이고 적용대상은 블록 레벨 요소 이다.

알고 계신 분들이 많겠지만 혹여 모르시는 분들을 위해 알려드립니다.

익스플로어6에서 지원하지 않는 png파일을 투명하게 보이게 할겁니다.

1. 배경화면에 png파일 구현

#header {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='이미지이름.png', sizingMethod='crop');
}

#contents {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='이미지이름.png', sizingMethod='crop');
}

이렇게 속성을 적어주면 IE6에서도 작동되는걸 확인하실 수 있습니다.

2. 이미지형식의 png파일 구현

자바스크립트를 하나 추가하고 이미지에 클래스를 지정해 주면됩니다.
<script type="text/javascript">
function setPng24(obj)
{
obj.width = obj.height = 1;
obj.className = obj.className.replace(/\bpng24\b/i,'');
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src

+"',sizingMethod='image');"
obj.src = '';
return '';
}
</script>

html 소스
<img src="이미지이름.png" alt="png이미지" class="png24" />

IE6 전용 css
.png24 {tmp:expression(setPng24(this));}

링크 스타일

1. a : link → 방문하지 않은 링크 스타일
2. a : visited → 방문한 링크 스타일
3. a : active → 마우스 클릭시 스타일
4. a : hover → 마우스오버시 스타일

폰트 스타일

1. font-size : 수치 ; → 폰트 크기 조절
2. font-family : 폰트명 ; → 폰트 타입 조절
3. font-weight : nomal / bold ; → 폰트의 굵기 조절
4. color : 색상코드(#000000) ; → 폰트 색상 조절

폰트 크기 단위

1. pt(포인트)

2. px(픽셀)
3. pc(파이카) → (1파이카=12포인트)
4. in(인치) → (1인치=2.54cm)
5. cm(센티미터) → (1cm=10mm)
6. em → 영문 글꼴 높이를 1em
7. ex → 영문소문자 x 글꼴 높이를 1ex

폰트 장식 효과 스타일

text-decoration : 값 ;
◎ 종류 : none / underline / overline(윗줄) / line-through(취소선)

커서 모양 변경 스타일
cursor : 값 ;
◎ 종류 : default / hand / move / help / crosshair / text /n-resize / w-resize / e-resize / s-resize

margin 스타일
1. margin-top : 수치 (픽셀) ; 상단마진
2. margin-bottom : 수치(픽셀) ; 하단마진
3. margin-right : 수치(픽셀) ; 오른쪽마진
4. margin-left : 수치(픽셀) ; 왼쪽마진
◎ 사방에 margin스타일주기 → margin : top right bottom left ; (시계 방향 순)

border 스타일
1. 테두리 모양 → border-style : none, solid, dashed, dotted, double, ridge, groove
2. 테두리 두께 → border-width
3. 테두리 색상 → border-color

◎ 사방에 border 속성 지정 → border : 색상 두께 모양 ;
◎ 세부위치 지정하여 각각 적용.
border-top, border-bottom, border-left, border-right
◎ 한꺼번에 테두리 모양, 두께, 색상 적용.
border-style : top right bottom left ;
border-width : top right bottom left ;
border-color : top right bottom left ; (시계 방향 순)

padding 스타일
1. padding-top : 수치(픽셀) ; 상단패딩
2. padding-bottom : 수치(픽셀) ; 하단패딩
3. padding-right : 수치(픽셀) ; 오른쪽패딩
4. padding-left : 수치(픽셀) ; 왼쪽패딩
◎ 사방에 padding 스타일 → padding : top right bottom left ; (시계방향 순)

수평정렬 스타일
text-align : left / center / right ;

수직정렬 스타일
vertical-align : top / middle / bottom
sub(아래첨자) / super(윗첨자)

줄 간격 스타일
line-height : 수치 ;
1. 수치에 단위를 표기하지 않을 경우 : 글자 크기에 비례함.
2. 수치에 단위를 표기할 경우 : 해당 단위로 적용됨.

글자 사이의 간격(자간) 스타일
letter-height : 수치 ;

영문 대소문자 변경 스타일
text-transform : 값 ;
none : 변형하지 않음
capitalize : 첫글자만 대문자
uppercase : 모두 대문자
lowercase : 모두 소문자

배경 그림 스타일
background-image : url("그림파일") ;

배경이미지 반복 스타일
background-repeat : 값 ;
◎ 값의 종류 : no-repeat(1번반복) / repeat-x(가로로반복) / repeat-y(세로로반복) / repeat(연속반복)

배경이미지 고정 스타일
background-attachment : fixed / scroll ;

배경이미지 위치 스타일
background-position : 가로위치 세로위치 ;

스크롤바 스타일

1. scrollbar-face-color : 화살표가 들어있는 박스나 이동박대의 색을 설정
2. scrollbar-shadow-color : 안쪽(우측, 하단) 색을 설정
3. scrollbar-highlight-color : 안쪽(좌측, 상단) 색을 설정
4. scrollar-3dlight-color : 바깥쪽(좌측, 상단) 색을 설정
5. scrollbar-darkshadow-color : 바깥쪽(우측, 하단) 색을 설정
6. scrollbar-track-color : 이동줄의 색을 설정
7. scrollbar-arrow-color : 화살표의 색을 설정(▲, ▼)

<span> 태그
텅빈 태그로 특별한 기능이 없이 스타일을 적용할 경우에 사용됨.
(한 줄에 스타일을 적용할 경우에 사용)

<div> 태그
특별한 기능이 없이 문단단위로 스타일을 적용할 경우에 사용됨.
<br> 태그처럼 자동으로 라인 스킵(line skip) 기능이 있음.
IE에서 <div> 태그는 레이어를 만드는데 많이 활용됨.
(NE에서는 <layer> 태그를 이용하여 레이어를 만들기도 하지만
브라우저와 상관없이 레이어를 작성하는 태그는 <div> 태그를 사용함)

플로트를 이용한 간단한 2단 레이아웃을 만들어 보도록 하겠습니다.

구조는 아래 이미지를 참고해 주세요.

이번 레이아웃을 만들기 위한 CSS는 아주 간단합니다.

각 단에 원하는 너비값을 지정하고 네비게이션은 왼쪽으로 본문 영역은 오른쪽으로 플로트를 지정하면 됩니다.

푸터가 확실히 이 두개의 플로트 아래에 오도록 하기 위해서 푸터에는 플로트 해제해야합니다.

만약 플로트해제를 하지 않는다면 푸터는 content의 오른쪽에 위치하게 될것입니다.

이렇게 기본적인 레이아웃이 완성되었습니다.