 |
|
| |
|
  |
15년 전 |
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
|
|
|
|
 추천 : 605 |
추천
목록
|
|
| |
|
