링크 스타일

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의 오른쪽에 위치하게 될것입니다.

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

· 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따라 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 CSS.

· 적용하고자하는 속성을 미리 정의해 두고 필요한 경우 해당 문자열에 쉽게 적용할 수 있으며 문서 전체의 모양을 일괄적으로 변경 할 수 있는 기능.