1)Anchor 태그에 스타일 시트
  1. <style>
  2.      a:link { ... }//기본적인 링크
  3.      a:visited { ... }//가봤던 링크
  4.      a:hover { ..; }// 마우스가 올라갔을때
  5. </style>
  1. <style>
  2.    a:link    {text-decoration: none;color:blue}
  3.    a:visited {text-decoration: none;color:blue}
  4.    a:hover   {text-decoration: underline ;color:red}
  5. </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

'공부방 > CSS' 카테고리의 다른 글

[CSS] z-index IE버그  (0) 2009.09.05
[CSS] 배경이미지에 관련된 속성  (0) 2009.09.04
[CSS] 정의와 3가지 적용방법  (0) 2009.09.04
[CSS] 테두리 스타일  (0) 2009.09.04
[CSS] Style을 이용해서 input 한글/영어 제한  (0) 2009.09.04

+ Recent posts