HTML과 자바스크립트에서 스타일시트 속성
|
BACKROUND(배경) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
background |
background |
background-color background-images background-repeat background-attachment background-position |
웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정할수 있다. |
|
background-attachment |
backgroundAttachment |
scroll fixed |
배경그림을 고정 또는 스크롤 |
|
background-color |
backgroundColor |
color_RGB color_NAME rgb(red,green,blue) transparent |
배경 색상 및 배경색의 투명성 설정 |
|
background-image |
backgroundImage |
url(url) none |
배경그림 설정 |
|
background-position |
backgroundPosition backgroundPositionX backgroundPositionY |
top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos |
배경그림의 위치를 설정하며 백분율을 표시할 때는 숫자와 %를 사용하고 절대위치는 숫자로 표시한다. |
|
background-repeat |
backgroundRepeat |
repeat repeat-x repeat-y no-repeat |
배경그림이 화면보다 작을 경우 반복해서 보여줄지 여부를 설정 |
|
TEXT(글자) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
color |
color |
color_RGB color_NAME rgb(red,green,blue) |
글자 색을 설정 |
|
direction |
direction |
ltr rtl |
글자를 표시하는 방향설정 |
|
letter-spacing |
letterSpacing |
normal lengthpx |
글자 사이의 간격을 지정 하며 픽셀은 숫자 다음에 px로 표시 |
|
text-align |
textAlign |
left right center justify |
글자의 정렬을 설정 |
|
text-decoration |
textDecoration |
none underline overline line-through blink |
글자의 꾸밈 및 형식 설정 |
|
text-indent |
textIndent |
lengthpx % |
좌측 여백을 백분율 또는 픽셀값으로 설정 |
|
text-transform |
textTransform |
none capitalize uppercase lowercase |
글자의 대.소문자 변환 여부를 설정 |
|
word-spacing |
whiteSpace |
none lengthpx |
단어 사이의 간격을 설정 |
|
FONT(글꼴) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
font |
font |
font-style font-variant font-weight font-size line-height font-family caption icon menu |
글꼴에 관련된 속성을 설정하며 line-height 값은 줄과 줄 사이의 간격을 백분율로 표시하고 각각의 요소 값은 콤마없이 두 개 이상 설정할 수 있다. |
|
font-family |
fontFamily |
family-name generic-family |
글꼴이름을 설정 우선순위에 따라 두 개이상 콤마로 연결할수 있다. |
|
font-size |
fontSize |
xx-small x-small small medium large x-large xx-large smaller larger lengthpx % |
글자 크기를 설정 |
|
font-style |
fontStyle |
normal italic |
글자의 형태를 설정 |
|
font-variant |
fontVariant |
normal small-caps |
글자의 크기를 설정 |
|
font-weight |
fontWeight |
normal bold bloder lighter 100 200 ..... 800 900 |
글자의 두께를 설정 |
|
BORDER(경계선) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
border |
border |
border-width border-style border-color |
경계선의 너비, 형식, 색을 설정 두 개이상 설정 가능 |
|
border-bottom |
borderBottom |
border-bottom-width border-style border-color |
아래 경계선의 너비, 형식, 색을 설정 두 개이상 설정 가능 |
|
border-bottom-color |
borderBottomColor |
border-color |
아래 경계선의 색을 설정 |
|
border-bottom-style |
borderBottomStyle |
none hidden dotted dashed solid double groove ridge inset outset |
아래 경계선의 형식을 설정 |
|
border-bottom-width |
borderBottomWidth |
thin medium thick lengthpx |
아래 경계선의 두께를 설정 |
|
border-color |
borderColor |
color |
콤마없이 두 개이상의 값을 설정가능 |
|
border-left |
borderLeft |
border-left-width border-style border-color |
왼쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능 |
|
border-left-color |
borderLeftColor |
border-color |
왼쪽 경계선의 색을 설정 |
|
border-left-style |
borderLeftStyle |
border-style |
왼쪽 경계선의 형식을 설정 |
|
border-left-width |
borderLeftWidth |
width |
왼쪽 경계선의 두께를 설정 |
|
border-right |
borderRight |
border-right-width border-style border-color |
오른쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능 |
|
border-right-color |
borderRightColor |
border-color |
오른쪽 경계선의 색을 설정 |
|
border-right-style |
borderRightStyle |
border-style |
오른쪽 경계선의 형식을 설정 |
|
border-right-width |
borderRightWidth |
width |
오른쪽 경계선의 두께를 설정 |
|
border-style |
borderStyle |
style |
경계선의 형식을 설정 |
|
border-top |
borderTop |
border-top-width border-style border-color |
위쪽 경계선의 너비, 형식, 색을 지정 두 개이상의 값을 설정가능 |
|
border-top-color |
borderTopColor |
border-color |
위쪽 경계선의 색을 설정 |
|
border-top-style |
borderTopStyle |
border-style |
위쪽 경계선의 형식을 설정 |
|
border-top-width |
borderTopWidth |
width |
위쪽 경계선의 두께를 설정 |
|
border-width |
borderWidth |
width |
경계선의 두께를 설정 |
|
MARGIN(여백) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
margin |
margin |
margin-top margin-right margin-bottom margin-left |
여백의 속성을 설정 |
|
margin-bottom |
marginBottom |
auto lengthpx % |
아래의 여백을 설정 |
|
margin-left |
marginLeft |
auto lengthpx % |
왼쪽의 여백을 설정 |
|
margin-right |
marginRight |
auto lengthpx % |
오른쪽의 여백을 설정 |
|
margin-top |
marginTop |
auto lengthpx % |
위쪽의 여백을 설정 |
|
PADDING(경계선과 내용과의간격) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
padding |
padding |
padding-top padding-right padding-bottom padding-left |
상,하,좌,우의 경계선과 글자 사이의 간격을 설정 |
|
padding-bottom |
paddingBottom |
lengthpx % |
아래 경계선과 글자 사이의 간격을 설정 |
|
padding-left |
paddingLeft |
lengthpx % |
왼쪽 경계선과 글자 사이의 간격을 설정 |
|
padding-right |
paddingRight |
lengthpx % |
오른쪽 경계선과 글자 사이의 간격을 설정 |
|
padding-top |
paddingTop |
lengthpx % |
위쪽 경계선과 글자 사이의 간격을 설정 |
|
LIST(목록) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
list-style |
list-style |
list-style-type list-style-position list-style-image |
목록의 형식,위치,그림의 속성을 설정 |
|
list-style-image |
listStyleImage |
none url(url) |
목록의 표시를 그림으로 설정 |
|
list-style-position |
listStylePosition |
inside outside |
목록 항목의 위치를 설정 |
|
list-style-type |
listStyleType |
none disc circle square decimal decimal-leading-zero lower-roman lower-alpha upper-roman upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha |
목록의 항목 표시자의 속성을 설정 |
|
DIMENSION(영역) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
height |
height |
auto legthpx % |
영역의 높이를 설정 |
|
line-height |
lineHeight |
auto legthpx % |
영역의 줄 간격을 설정 |
|
width |
width |
auto legthpx % |
영역의 너비를 설정 |
|
CLASSIFICATION(식별) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
cursor |
cursor |
url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
커서의 모양을 설정 |
|
float |
float |
left right none |
해당요소를 상위 요소안에서 좌.우로 이동할 것인가를 설정 |
|
position |
position |
static relative absolute |
화면에 표시할 위치를 설정 |
|
visibility |
visibility |
visible hidden |
화면에 표시 여부를 설정 |
|
POSITION(위치) | |||
|
속 성 명 |
속 성 값 |
내 용 | |
|
css |
jsss | ||
|
bottom |
bottom |
auto legthpx % |
상위의 요소 아래 경계선에서 떨어진 간격을 설정 |
|
clip |
clip |
rect(top,right,bottom,left) auto |
|
댓글을 달아 주세요
관리자만 볼 수 있는 댓글입니다.