목차
- css 를 사용하는 3가지
- background
- color
- font
- margi, padding, border
- list
- float
- position
- float
css 를 사용 하는 3가지
1) 외부 스타일 시트(External Style Sheet)
<link rel="" type="" href="">
2) 내부 스타일 시트(Internal Style Sheet)
<style type="text/css"></style>
3) HTML태그내에 스타일 지정(Inline Styles)
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] (배경이미지의 위치를 지정한다)
color
color : [컬러값] (요소의 텍스트색을 지정한다)
font
font-family : [폰트이름] (폰트를 지정한다)
font-style : [normal/italic/oblique] (문자의 형태를 지정한다)
font-variant : [normal/small-cap] (소문자를 대문자로 표시)
font-weight : [normal/bold/bolder/lighter/100/200/…/900] (문자의 두께를 조절한다)
font-size : [사이즈] (글자의 크기를 지정한다)
margi, 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] (선 양식을 설정한다)
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] (커서의 형태를 지정한다)
float
float : [left/right/none] (요소의 위치를 기존 자리에서 분리시킨다)
position
html상에서 x,y,z축으로 각 block의 위치를 레이어처럼 겹치고 세밀한 위치를 지정할수있다.
[absolute][relative]
float
float : [left/right/none] (요소의 위치를 기존 자리에서 분리시킨다)