선의 굵기(border-width) 와 선의 색상(border-color)은 별도로 설명할 필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.
style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예
스타일시트 소스
<style>
table { border-color: #408080; border-style: dashed;
}
td { border-color: #FFBD32; border-style: ridge; }
</style>
---------------------------------------------------------------------------------
▶ 각 항목을 클릭하시면 새창으로 상세사용법을 보실수 있습니다.
css 속성모음 입니다.
실제로 적용할때 많이 사용하는 부분을 모아 두었습니다.
많이 활용하세요.
| 배경값 설정 | background | B |
| 배경 이미지의 스크롤 여부 설정 | background-attachment | |
| 배경색 설정 | background-color | |
| 배경 이미지 | background-image | |
| 배경 위치 설정 | background-position | |
| 배경 이미지의 반복 설정 | background-repeat | |
| 박스 경계선의 속성 설정 | border | |
| 박스 아래 경계선의 속성 설정 | border-bottom | |
| 박스 아래 경계선의 두께 설정 | border-bottom-width | |
| 박스 경계선의 색상 설정 | border-color | |
| 박스 왼쪽 경계선의 속성 설정 | border-left | |
| 박스 왼쪽 경계선의 두께 설정 | border-left-width | |
| 박스 오른쪽 경계선의 속성 설정 | border-right | |
| 박스 오른쪽 경계선의 두께 설정 | border-right-width | |
| 경계선 스타일 지정 | border-style | |
| 박스 위쪽 경계선의 속성 설정 | border-top | |
| 박스 위쪽 경계선의 두께 설정 | border-top-width | |
| 박스 경계선의 두께 설정 | border-width | |
| 이미지나 테스트의 배치 지정 | clear | C |
| 글자색의 설정 | color | |
| 디스플레이 값의 변경 설정 | display | D |
| 이미지나 택스트의 배치 지정 | float | F |
| 글꼴 속성 설정 | font | |
| 글꼴 종류 설정 | font-family | |
| 글자 크기 설정 | font-size | |
| 글자 모양 설정 | font-style | |
| 글꼴의 전환 | font-variant | |
| 글자 두께 지정 | font-weight | |
| Element(요소) 높이 설정 | height | H |
| 글자간의 간격 조절 | letter-spacing | L |
| 각 줄간격 설정 | line-height | |
| 목록의 스타일 설정 | list-style | |
| 목록의 이미지 설정 | list-style-image | |
| 목록의 위치 형태 설정 | list-style-position | |
| 목록의 형태 설정 | list-style-type | |
| 모든 여백 설정 | margin | M |
| 맨 아래쪽 여백 설정 | margin-bottom | |
| 맨 왼쪽 여백 설정 | margin-left | |
| 맨 오른쪽 여백 설정 | margin-right | |
| 맨 위쪽 여백 설정 | margin-top | |
| 박스내의 간격 설정 | padding | P |
| 박스내의 아래쪽 간격 설정 | padding-bottom | |
| 박스내의 왼쪽 간격 설정 | padding-left | |
| 박스내의 오른쪽 간격 설정 | padding-right | |
| 박스내의 위쪽 간격 설정 | padding-top | |
| 수평 정열을 설정 | text-align | T |
| 텍스트의 효과 조절 | text-decoration | |
| 텍스트에서 첫번째 줄 들여쓰기 | text-indent | |
| 문자열의 변환 | text-transform | |
| 수직 정열을 설정 | vertical-align | V |
| 띄어쓰기 부분의 처리 | white-space | W |
| Element(요소) 너비 설정 | width | |
| 단어들 사이의 간격 조절 | word-spacing |
-------------------------------------------------------------------------------------
[font-style]
1. font-style: normal;
2. font-style: italic;
3. font-style: oblique;
[font-weight]
1. "font-weight: normal;"
2. "font-weight: bold;"
3. "font-weight: bolder;"
4. "font-weight: lighter;"
5. "font-weight: 100"
6. "font-weight: 200"
[font-size]
1. "font-size: 12pt;"
2 "font-size: 16px;"
3 "font-size: 0.86cm;"
4 "font-size: 8.6mm;"
5 "font-size: 0.34in;"
6 "font-size: 200%;"
[font-variant]
1. "font-variant: normal;" : Cascading Style Sheets
2. "font-variant: small-caps;" : Cascading Style Sheets
[text-align]
1. "text-align: left;"
2. "text-align: justify;"
[text-indent]
1. "text-indent: 5px;"
2. "text-indent: 3em;"
3 "text-indent: 5cm;"
[text-decoration]
1. "text-decoration: none;"
2. "text-decoration: underline;"
3. "text-decoration: overline;"
4. "text-decoration: line-through;"
5. "text-decoration: line-through overline underline;"
6. "text-decoration: blink;"
[text-transform]
1. "text-transform: none;"
2. "text-transform: uppercase;"
3. "text-transform: lowercase;"
4. "text-transform: capitalize;"
[letter-spacing]
1 "letter-spacing: 1em;"
[word-spacing]
1 "word-spacing: 1em;"
[color]
1. "color: navy;"
2. "color: #369369;"
3. "color: rgb(80.80.80%"
4. "color: rgb(111,111,999"
[background-color]
1. "background-color: gray;"
2. "background-color: #EEEEEE;"
3. "background-color: rgb(80.80.80%"
[background-image]
1. "background-image: url(list1.gif)"
[background-repeat]
1 "background-repeat: repeat;"
2. "background-repeat: repeat-x;"
3. "background-repeat: repeat-y;"
4. "background-repeat: no-repeat;"
[background-position]
1. "background-position: 10% 10%;"
2. "background-position: 1cm 1cm;"
3. "background-position: top;"
4. "background-position: center;"
5. "background-position: right bottom;"
[background-attachment]
1. "background-attachment: scroll;"
2. "background-attachment: fixed;"
[background]
1. "background: url(list1.gif) yellow no-repeat top left"
[padding]
1. "padding: 0 0 0 0; background-color: #EEEEEE;"
2. "padding: 50px; background-color: rgb(80.80.80%"
[margin]
1. "margin: 0; background-color: #EEEEEE;"
2. "margin: 50px 50px 50px 50px; background-color: rgb(80.80.80%"
3. "margin: 0 0 0 -30px; background-color: rgb(80.80.80%"
[border-style]
1. border-style: none;"
2. "border-style: solid;"
3. "border-style: dotted;"
4. "border-style: dashed;"
5. "border-style: double;"
6. "border-style: groove;"
7. "border-style: ridge;"
8. "border-style: inset;"
9. "border-style: outset;"
10. "border-style: solid dashed dotted outset;"
[border-width]
1. "border-width: 1px 1px 1px 1px;"
2. "border-width: 0 0 0 0; border-style: solid;"
3. "border-width: 1px 1px 1px 1px; border-style: solid;"
4. "border-width: 3px; border-style: solid;"
5. "border-width: 3mm; border-style: solid;"
6. "border-width: 1px 1cm 1mm 1in; border-style: solid;"
7. "border-width: thin; border-style: solid;"
8. "border-width: medium; border-style: solid;"
9. "border-width: thick; border-style: solid;"
[border]
1. "border: 1px;"
2. "border: #999999;"
3. "border: solid;"
4. "border: solid #999999;"
5. "border: 1px solid #999999"
[float]
1. "float: left;"
[visibility]
1. "visibility: visible;"
2. "visibility: hidden;"
3. "visibility: collapse;"
[list-style-type]
1. "list-style-type: default;"
2. "list-style-type: disc;"
3. "list-style-type: circle;"
4. "list-style-type: square;"
5. "list-style-type: decimal;"
6. "list-style-type: decimal-leading-zero;"
7. "list-style-type: lower-roman;"
8. "list-style-type: upper-roman;"
9. "list-style-type: lower-greek;"
10."list-style-type: lower-alpha;"
11."list-style-type: upper-latin;"
12."list-style-type: none;"
[list-style-image]
1. "list-style-image: url(list1.gif)"
2. "list-style-image: url(list2.gif)"
[list-style-position]
1. "list-style-position: inside"
2. "list-style-position: outside"
[list-style]
1. "list-style: url(list1.gif) inside;"
2. "list-style: square outside;"
3. "list-style: url(list1.gif"
4. "list-style: square;"
5. "list-style: inside;"
[cursor]
1. cursor: auto;
2. cursor: crosshair;
3. cursor: default;
4. cursor: pointer;
5. cursor: move;
6. cursor: e-resize;
7. cursor: ne-resize;
8. cursor: nw-resize;
9. cursor: n-resize;
10. cursor: se-resize;
11. cursor: sw-resize;
12. cursor: s-resize;
13. cursor: w-resize;
14. cursor: text;
15. cursor: wait;
16. cursor: help;
17. cursor: url(list1.gif)
nw-resize : 커서의 방향이 북서쪽
ne-resize : 커서의 방향이 북동쪽
sw-resize : 커서의 방향이 남서쪽
se-resize : 커서의 방향이 남동쪽
e-resize : 커서의 방향이 동서쪽
w-resize : 커서의 방향이 서동쪽
n-resize : 커서의 방향이 북남쪽
s-resize : 커서의 방향이 남북쪽
help: ? 모양으로 표시
move : 이동 모양으로 표시
text : 텍스트 입력상태로 표시
crosshair : 십자가로 표시
wait : 모래시계 모양으로 표시
hand : 손 모양으로 표시
-------------------------------------------------------------------------------------
웹페이지의 기본이라고 할 수 있는 css 정의.. 태그별로 쓸 수 있는 css 정리..
<body>
background-color / 배경색 / background-color:#ff0000
background-image:url / 배경그림 / background-image:url("이미지명")
background-repeat / 배경그림 반복여부 / background-repeat:no-repeat
background-position / 배경그림의 위치 / background-position:right bottom
background-attachment / 배경그림 고정여부 / background-attachment:fixed
예제>
<STYLE TYPE="text/css">
body {
color:#7BA2AA;
font-weight:bold;
background-color:#FFFFFF;
background-image:url("person1.gif");
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
</STYLE>
<문서 글꼴과 서식>
color / 글꼴색 / red ,blue , ..#ffffff,...
font-style / 글꼴 / normal , italic , oblique
font-weight / 굵기 / none,bold,lighter,bolder, 100 , 200 ,...
font-size / 글꼴 크기 / 10,11,...
font-family / 글꼴 family / serif, sans-serif,굴림,돋움...
text-decoration / 장식 / none , underline,overline,line-through,blink
text-align / 정렬방법 / left,right,center
margin-top / 윗여백 / 10px, 20px, 숫자 + 단위로 구성단위를 안주면 default 로 px 가 붙음
margin-left / 왼쪽 여백 / 10px..
margin-right / 오른쪽 여백 / 10px..
margin-bottom / 아래쪽 여백 / 10px..
line-height / 줄간격 / normal, 150% , 1
letter-spacing / 문자 간격 / -1, 0.5em (em 은 그 범위에서 유효한 글자 크기를 1로 함.)
word-spacing / 단어 간격 / 1em 예제><STYLE TYPE="text/css">
body {
font-family: 돋움체,돋움,굴림체,굴림,Arial;
text-decoration:italic;
font-weight:bold;
font-size:12pt;
margin-top:30px;
margin-left:80px;
margin-right:80px;
margin-bottom:10px;
text-align:center;
letter-spacing:0.5em;
word-spacing:1em;
}
</STYLE>
<링크스타일>
A: link {스타일} / 링크A: visited{스타일} / 이미 방문한 링크
A: active{스타일} / 링크 클릭 후 마우스를 떼었을 때
A: hover{스타일} / 링크에 마우스를 over 하였을 때예제>
<STYLE TYPE="text/css">
A:link {color:blue; text-decoration:none}
A:visited {color:#A58778; text-decoration:none}
A:active {color:red; text-decoration:none}
A:hover {color:aqua; text-decoration:underline}
</STYLE>
<태그위치>
position / 상대위치,절대위치 / absolute , relative ==> div로 되는 layer 에 많이 쓰인다..
left / x 위치 / 10px..
top / y 위치 / 10px..
width / 폭 / 10px..
height / 높이 / 10px..
예제>
<STYLE TYPE="text/css">
h1. ex1 {
포지션:relative; ==> 네이버에서 태그가 중복되어 앞에 한글로 보여드립니다.
left:20;
top:30;
width:600px;
background-color:blue;
height:300px
}
h1. ex2 {
포지션:relative; ==> 네이버에서 태그가 중복되어 앞에 한글로 보여드립니다.
left:-20;
top:10;
width:500px;
background-color:red;
height:100px
}
</STYLE>
<기타속성>
visibility / 태그가 화면에 보이는 여부 / hidden, visible
display / 태그가 화면에 표현되는 여부 / none/inline/block
z-index / 태그들 사이의 순서 / 숫자 값
예제>
<STYLE TYPE="text/css">h1.one {
visibility:visible;
}
h1.two {
visibility:hidden;
}
</STYLE>
댓글 없음:
댓글 쓰기