CSS 스타일시트 속성정리

링크 스타일

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> 태그를 사용함)

출처: 네이버 블로그

주소: http://baraem2005.blog.me/20169490375