CSS 용어 정리

​css 기본 용어 요약 정리

​

font
font-family : [폰트이름]     (폰트를 지정한다)
font-style : [normal/italic/oblique]     (문자의 형태를 지정한다)
font-variant : [normal/small-cap]     (소문자를 대문자로 표시)
font-weight : [normal/bold/bolder/lighter/100/200/…/900]      (문자의 두께를 조절한다)
font-size : [사이즈]     (글자의 크기를 지정한다)

​

color
color : [컬러값]     (요소의 텍스트색을 지정한다)

​

background
background-color : [색갈값/transparent]     (요소의 배경색을 기술한다)
background-image : [url(주소)/none]     (요소의 배경 이미지를 설정한다)
background-repeat : [repeat/repeat-x/repeat-y/no-repeat]     (배경이미지의 반복을 지정한다)
background-attachment : [scroll/fixed]     (배경의 고정과 스크롤을 설정한다)
background-position : [위치/top/center/bottom/left/right]     (배경이미지의 위치를 지정한다)

 

text
word-spacing : [길이]     (단어간 간격설정)
letter-spacing : [길이]     (문자간 간격설정)
text-decoration : [none/underline/overline/line-though/blink]     (text에 효과를 준다)
vertical-align : [baseline/sub/super/top/text-top/middle/text-bottom]   (세로방향 정렬을 지정한다)
text-transform : [capitalize/uppercase/lowcase/none]     (단어를 대소문자로 바꾸어준다)
text-align : [left/right/center/justify]     (텍스트의 정렬방법을 정한다)
text-indent : [길이]     (들여쓰기를 지정한다)
line-height : [길이]     (라인과 라인간의 간격을 정한다)
text-justify : [newspaper/distribute-all-lines]     (라인폭 자동정렬을 설정한다)
white-space : [normal/per/nowrap]     (공백 처리 방법 설정)

​

boxmodel (margin, padding, border)
margin-top : [길이]     (요소상부의 마진을 설정한다)
margin-right : [길이]     (요소우측의 마진을 설정한다)
margin-bottom : [길이]     (요소하부의 마진을 설정한다)
margin-left : [길이]     (요소좌측의 마진을 설정한다)
padding-top : [길이]     (요소상부의 padding을 설정한다)
padding-right : [길이]     (요소우측의 padding을 설정한다)
padding-bottom : [길이]     (요소하부의 padding을 설정한다)
padding-left : [길이]     (요소좌측의 padding을 설정한다)
border-top-width : [길이]     (요소상부의 선두께를 설정한다)
border-right-width : [길이]     (요소우측의 선두께를 설정한다)
border-bottom-width : [길이]     (요소하부의 선두께를 설정한다)
border-left-width : [길이]     (요소좌측의 선두께를 설정한다)
border-color : [색갈값]     (선색갈을 설정한다)
border-style : [none/dotted/dashed/solid/double/groove/inset/outset]     (선 양식을 설정한다)

 

position
html상에서 x,y,z축으로 각 block의 위치를 레이어처럼 겹치고 세밀한 위치를 지정할수있다.
[absolute][relative]

​

float
float : [left/right/none]     (요소의 위치를 기존 자리에서 분리시킨다)

​

display
display : [block/inline/list-item/none]     (브라우져에 디스플레이 되는 방법을 결정한다)

 

list
list-style-type : [disk/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper- alpha/none]
 (list의 스타일을 정의한다)
list-style-image : [url(주소)/none]     (list마커로 사용할 이미지 선택)
list-style-position : [outside/inside]     (마커가 표시될 위치 지정)
cursor : [hand/move/wait/ne-resize/nw-resize/sw-resize/se-resize]     (커서의 형태를 지정한다)