글꼴 꾸밈 관련 스타일 시트
|
속성 |
값 |
설명 |
|
color |
색 이름, RGB값 |
글자색 |
|
font-family |
글꼴이름 |
글꼴(글씨체) |
|
font-size |
절대값, 상대값, 길이, 퍼센트 |
글자크기 |
|
font-style |
normal, italic, oblique |
글자모양 |
|
font-variant |
normal,small-caps |
작은 크기의 대문자로 지정하기 |
|
font-weight |
normal,bold,bolder,lighter,100~900 |
글자의 굵기 |
-----------------------------------------------------------------------------------------------------------
텍스트관련 스타일 시트
|
속성 |
값 |
설명 |
|
text-indent |
길이, 퍼센트 (ex) 3cm) |
들여쓰기 |
|
text-align |
left, right, center |
문자열 정렬 |
|
line-height |
normal, 숫자, 길이, 퍼센트 |
줄간격(행간격) |
|
vertical-align |
top,bottom,middle |
수직 정렬 |
|
letter-spacing |
normal,auto, 길이 |
문자 간격 |
|
word-spacing |
normal, 길이 |
단어 간격 |
|
white-spacing |
normal,pre,nowrap |
빈칸 및 줄바꿈 처리 |
|
text-decoration |
none, underline, overline, line-through, blink |
문자열 처리 |
|
text-transform |
none,capitalize, uppercase,lowercase |
문자열 대소문자 변경 |
-----------------------------------------------------------------------------------------------------------
배경 관련 스타일 시트
|
속성 |
값 |
설명 |
|
background |
대표속성 |
|
|
background-color |
색이름,RGB값,transparent |
배경색 지정 |
|
background-image |
url,none |
배경이미지 경로/파일 지정 |
|
background-repeat |
repeat, repeat-x , repeat-y , no-repeat |
배경이미지의 반복여부, |
|
background-attachment |
scroll,fixed |
배경이미지의 스크롤 여부 |
|
background-position |
(퍼센트,길이), (top,center,bottom= 세로위치), |
배경이미지의 시작위치 설정 |
1. 이 중 background-image / background-repeat 속성--------------------------------------------------------
배경에 이미지를 설정하려면 background-image속성을 사용하는데,
삽입할 이미지의 파일명을 기술하려면 url을 기술하여 지정한다.
문서는 물론이고 테이블이나 박스에도 이미지를 설정할 수 있다.
사용법,
selector{ background-image : url("경로") }
타일 효과를 주기 위해서는 background-repeat 속성을 사용하는데, 속성 값은 다음과 같다.
|
속성 값 |
설명 |
|
no-repeat |
배경이미지를 반복하지 않고 한번만 나타낸다. |
|
repeat-x |
배경이미지를 가로 방향으로 반복하여 나타낸다. |
|
repeat-y |
배경이미지를 세로 방향으로 반복하여 나타낸다. |
|
repeat |
배경이미지를 바둑판식 배열로 나타낸다. |
기본값은 repeat 임.
2. 이 중 background-position 속성-------------------------------------------------------
background-position 속성에 비율로 위치를 지정하거나 키워드로 설정할 수 있다.
특정 위치를 지정하지 않으면 기본적을 왼쪽 상단에 나타낸다.
사용법,
selector{ background-position : 속성값 }
왼쪽 상단을 "0%0%"로 보고 오른쪽 하단을 "100%100%"으로 보고 원하는 위치에 계산하여
이미지를 나타낼 수 있다.
|
속성값 |
설명 |
|
0%0% = left top |
왼쪽 상단에 배경이미지를 나타냄. |
|
100%100% = right bottom |
오른쪽 하단에 배경이미지를 나태냄 . |
|
50%50% = center center |
문서 가운데에 배경 이미지를 나타냄. |
3. 이 중 background-attachment 속성 ------------------------------------------------------
스크롤을 이동하면 문서내의 내용들이 스크롤 된다. 일반적으로는 배경 이미지도 내용들과 함께
스크롤이 된다. 하지만 background-attachment 속성을 fixed로 지정하면 배경그림은 그대로 멈춰 있고
문서내의 내용들만 스크롤 된다. 기본적으로는 속성값이 scroll 지정되어 있으므로 다른 내용들과 함께
배경이미지가 스크롤되는 것이다.
사용법,
selector { background-attachment : 속성값 }
|
속성 값 |
설명 |
|
fixed |
배경이미지가 현재 위치에 고정되어 나타남. |
|
scroll |
배경이미지가 HTML 문서의 스크롤 크기에 따라 |
4. 배경 스타일 한꺼번에 설정하기------------------------------------------------------------
배경에 관련된 속성을 한꺼번에 지정할 수 있다. background 속성 다음에 적용하고자 하는 속성들에
대한 값들을 나열하면 된다.
body { color : white ;
background : black url("mulan2.gif") center no-repeat fixed;
}
-----------------------------------------------------------------------------------------------------------
목록 관련 스타일 시트
|
list-style |
대표 속성 |
설명 |
|
list-style-type |
disc, circle, square, decimal, |
목록표시의 형태 |
|
list-style-position |
inside,outside |
목록표시의 위치 |
|
list-style-image |
URL,none |
목록표시에 이미지를 사용할 수 있다. |
----------------------------------------------------------------------------------------------------------
하이퍼링크 관련 스타일 시트
보통 우리가 홈페이지의 링크된 부분에 마우스를 가져다 대면 색이 바뀌면서 밑줄이 생기기도 하고
한번 클릭한 링크부분은 다른 색으로 달라지기도 한다. 이것을 사용하는 것이 <a> 태그이므로
앞에 a가 붙게 되고 그 다음 link는 아직 방문을 하지 않은 링크부분, visited는 한 번 이상 방문한 부분,
active는 마우스로 클릭하는 순간의 스타일을 지정해주는 것이다.
마지막으로 hover의 경우는 마우스를 링크위에 올려놨을 때의 스타일을 지정하는 것이다.
|
a |
설명 |
|
a : link |
하이퍼링크에 대한 모든 설정 |
|
a : visited |
방문한 적이 있는 링크 속성 설정 |
|
a : active |
링크를 클릭하려는 순간의 속성 설정 |
|
a : hover |
마우스가 링크 위에 올라가 있을 때 속성 설정. |
ex)
<html>
<head>
<STYLE TYPE = "text/css">
a:link {text-decoration : none; color : green}
a:visited{ text-decoration : none; color : blue}
a:active{text-decoration : none; color : red}
a:hover{ text-decoration : underline; color:purple}
</STYLE>
</head>
<body>
<h3>방문전 스타일 : <a href = "http://www.daum.net"> 다음 </a> <br>
방문후 스타일 : <a href = "http://www.naver.com">네이버</a> <br>
마우스 올린 스타일 : <a href = "http://www.yahoo.com">야후</a> <br>
</h3>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
'css' 카테고리의 다른 글
| css 정리 <1> (0) | 2012.08.03 |
|---|