[CSS] 각종 속성

1)Anchor 태그에 스타일 시트

<style>      a:link { ... }//기본적인 링크      a:visited { ... }//가봤던 링크      a:hover { ..; }// 마우스가 올라갔을때 </style>

<style>    a:link    {text-decoration: none;color:blue}    a:visited {text-decoration: none;color:blue}    a:hover   {text-decoration: underline ;color:red} </style>

2) 글자 스타일 시트

• font-size : n
• color : #RGB
• font-weight : nomal  /  bold
• font-style : normal / italic 

3) 크기 스타일 시트

• width : n
• height : n

4)  여백에 관한 스타일 시트

문단의 외부 여백을 지정할 수 있다.

키워드	설 명
margin	문단 상/하/좌/우 의 여백 동시 지정
margin-top	문단의 위쪽 여백 지정
margin-bottom	문단의 아래쪽 여백 지정
margin-left	문단의 왼쪽 여백 지정
margin-right	문단의 오른쪽 여백 지정

5) 경계선의 스타일 시트

문단의 경계선의 두께나 폼의 경계선의 두께를 조절할 수 있다.

border : [두께 색상 선의 종류] 로 값을 주며 순서는 상관 없다. 이부분은

border:n(두께)
border-color:n
border-style:n(선의 종류)

와 같이 각각 값을 지정할 수도 있다.

(1) 세부지정

키워드	설 명
border : 두께 색상 선의 종류	문단 상/하/좌/우 동시 지정
border-top : 두께 색상 선의 종류	문단의 위쪽 지정
border-bottom : 두께 색상 선의 종류	문단의 아래쪽 지정
border-left : 두께 색상 선의 종류	문단의 왼쪽 지정
border-right : 두께 색상 선의 종류	문단의 오른쪽 지정
border-width : n	선의 두께
border-color : #RGB	선색

(2) 선의 형태

키워드	설명	키워드	설명
none	선 없음	double	이중선
hidden	감춤	groove	움푹 들어간 입체선
dotted	점선	ridge	튀어나온 입체선
dashed	대쉬선	inset	내용이 잠긴 느낌의 입체선
solid	실선	outset	내용이 튀어나온 느낌의 입체선

6) padding 스타일 시트

경계선과 본문 내용과의 간격 조정

키워드	설 명
padding	상/하/좌/우 의 여백 동시 지정
padding-top	위쪽 여백 지정
padding-bottom	아래쪽 여백 지정
padding-left	왼쪽 여백 지정
padding-right	오른쪽 여백 지정

7) 바탕 스타일 시트

키워드	설 명
background-color : #RGB	바탕색
background-image : url(url)	바탕 이미지
background-repeat : repeat / repeat-x / repeat-y / no-repeat	반복 위치
background-attachment : scroll / fixed	바탕 이미지의 스크롤 여부
background-position : [top / center / bottom ]  [ left / center / right ]  background-position : [x  y] [ x%  y% ]	이미지의 위치

8) list 스타일 시트

키워드	설 명
list-style-image : url(url)	리스트의 기호 대신 사용할 이미지
list-style-position: inside / outside	줄이 분리되었을 때 분리된 문자의 위치

 

출처 : http://blog.naver.com/valianty/130003480753