CSS에서 사용하는 속성 모음

Background (배경 이미지 관련 속성)

속 성	설 명	값
background	background의 여러 가지 속성을 간단하게한번에 선언하여 사용할수 있다.	background-colorbackground-imagesbackground-repeatbackground-attachmentbackground-position
background-attachment	페이지 스크롤을 할 때, 페이지와 함께 스크롤되게 할 것인지 아니면 배경 이미지는 고정되게할 것인지를 설정할 수 있다.	scrollfixed
background-color	특정 요소의 배경 색상을 지정할 수 있다.	color-rgbcolor-hexcolor-nametransparent
background-images	배경 이미지를 지정할 수 있다.	url(URL)none
background-position	배경 이미지가 시작되는 위치를 조정할 수 있다.	top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos
background-repeat	배경이미지를 반복할 것인지 하나만 보여줄것인지 설정할 수 있다. 배경 이미지 반복 시어느 방향으로 반복할 것인지도 설정할 수 있다.	repeatrepeat-xrepeat-yno-repeat

 

Border (테두리 관련 속성)

속 성	설 명	값
border	border의 여러 가지 속성을 간단하게 한번에선언하여 사용할 수 있다.	border-widthborder-styleborder-colorborder-bottom
border-bottom	border-bottom(아래쪽 테두리)의 여러가지 속성을 간단하게 한번에 선언할 수 있다.	border-bottom-widthborder-styleborder-color
border-bottom-color	border-bottom의 색상을 설정할 수 있다.	border-color
border-bottom-style	border-bottom의 스타일을 설정할 수 있다.	border-style
border-bottom-width	border-bottom의 너비를 설정할 수 있다.	thinmediumthicklength
border-color	상하좌우 모든 테두리의 색상을 1개에서4개까지 한번에 설정할 수 있다.	color
border-left	border-left(왼쪽테두리)의 여러가지 속성을간단하게 한번에 선언하여 사용할 수 있다.	border-left-widthborder-styleborder-color
border-left-color	border-left의 색상을 설정할 수 있다,	border-color
border-left-style	border-left의 스타일은 설정할 수 있다.	border-style
border-left-width	border-left의 너비를 설정할 수 있다.	thinmediumtricklenght
border-right	border-right(오른쪽테두리)의 여러가지 속성을간단하게 한번에 선언하여 사용할 수 있다.	border-bottom-widthbordrt-styleborder-color
border-right-color	border-right의 색상을 설정할 수 있다.	border-color
border-right-style	border-right의 스타일을 설정할 수 있다.	border-style
border-right-width	border-right의 너비를 설정할 수 있다.	thinmediumthicklength
border-style	상하좌우 모든 테두리의 모양을 1개에서 4개까지스타일을 한번에 설정할 수 있다.	nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-top	border-top(위쪽테두리)의 여러가지 속성을간단하게 한번에 선언하여 사용할 수 있다.	berder-top-widthborder-styleborder-color
border-top-color	border-top의 색상을 설정할 수 있다.	border-color
border-top-style	border-top의 스타일을 설정할 수 있다.	border-style
border-top-width	border-top의 너비를 설정할 수 있다.	thinmediumthicklength
border-width	상하좌우 모든 테두리의 너비를 한번에설정할 수 있다.	thinmediumthicklength

 

CLASSIFICATION (분류)

속 성	설 명	값
clear	바로 이전의 요소에서 선언된 float 속성을해제한다.	leftrightbothnone
cursor	마우스 포인터의 모양을 지정할 수 있다.	urlautocrosshairdefaultpointermovee-resizene-resizenw-resizen-resizese-resizes-resizew-resizetextwaithelp
display	요소를 보일 것인지, 감출 것인지를 지정할 수 있다.요소를 보이게 할 경우 어떤 방식으로 보이게 할 것인지 설정할 수 있다.	noneinlineblocklist-itemrun-incompactmarkertableinline-tabletable-row-grouptable-header-grouptable-footer-grouptable-rowtable-column-grouptable-columntable-celltable-caption
float	텍스트나 이미지 등의 요소를 흐르게 만들어,인접해 있는 다른 요소와 함께 흐르게 만들수 있다.	leftrightnone
position	요소를 어떤 방식으로 위치시킬 것인지지정할 수 있다.	staticrelativeabsolutefixed
visibility	요소를 보이거나 감출 수 있다.	visiblehiddencollapse

 

Dimesion (각종 치수)

속 성	설 명	값
height	요소의 높이를 지정할 수 있습니다.	autolength%
line-height	문장의 줄 간격을 지정할 수 있습니다.	normalnumber length%
max-height	요소의 최대 제한 높이를 지정한다.	nonelength%
max-width	요소의 최대 제한 너비를 지정한다.	nonelength%
min-height	요소의 최소 높이를 지정한다.	length%
min-width	요소의 죄소 제한 너비를 지정한다.	length%
width	요소의 너비를 지정한다.	auto%length

 

Font (글꼴)

속 성	설 명	값
font	폰트를 설정하기 위해 필요한 다양한 속성의값들을 줄여서 간편하게 선언할 수 있다.	font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-barfont-family
family name	폰트의 종류를 지정할 수 있다.	generic-family
font-size	폰트의 크기를 지정할 수 있다.	xx-smallx-smallsmallmediumlargex-largexx-largesmallerlagerlength%
font-size-adjust	소문자를 기준으로 글자 크기를 조정할 수 있다.font-size에서 지정된 글자의 높이와 소문자 x의비율로 글자 크기를 재지정한다.	nonenumber
font-stretch	글자의 선명도, 즉 장평을 설정할 수 있다.	normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded
font-style	폰트를 기울임체로 사용할 수 있다.	normalltalicoblique
font-variant	소문자를 작은 대문자로 만들 수 있다.	normalsmall-caps
font-weight	폰트의 두께를 지정할 수 있다.	normalboldbolderlighter100200300400500600700800900

 

Generated Content (콘텐츠 생성)

속 성	설 명	값
content	요소의 앞(:before)과 뒤(:after)에 어떤 내용을생성할 것인지 지정할 수 있다.	stringurlcounter(name)counter(name,list-style-type)counters(name,string)counters(name,string,list-style-type)attr(X)open-quoteclose-quoteno-open-quoteno-close-quote
counter-increment	요소 요소에 번호를 매길 수 있다. 번호는 카운터로자동으로 증가하는 특성을 가지고 있다.앞과 뒤 선택자와 함께 사용된다.	noneidentifier number
counter-reset	앞서 만든 카운터의 값을 초기화 한다.	noneidentifier number
quotes string	요소 앞뒤에 인용부호를 주가할 수 있다.	none

 

List and Marker (리스트와 표시)

속 성	설 명	값
list-style	여러가지 리스트 스타일을 줄여서 한 번에지정할 수 있다.	list-style-typelist-style-positionlist-style-image
list-style-image	리스트 앞에 붙는 아이콘을 임의의 이미지로지정해 줄 수 있다.	noneurl
list-style-position	리스트 앞에 붙는 블릿을 리스트에 포함해서표현할 것인지, 리스트에 포함하지 않고 표현할것인지 지정할 수 있다.	insideoutside
list-style-position	리스트 앞에 붙는 블릿 아이콘의 모양을설정 할 수 있다.	nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha
marker-offset	항목표시자와 블럭간의 간격 지정	autolength

 

Margin (마진 - 바깥여백)

속 성	설 명	값
margin	마진 속성을 한꺼번에 줄여서 사용할 수 있다.	margin-topmargin-rightmargin-bottommargin-left
margin-bottom	요소의 아래쪽 마진을 줄일 수 있다.	autolength%
margin-left	요소의 왼쪽 마진을 줄일 수 있다.
margin-right	요소의 오른쪽 마진을 줄일 수 있다.
margin-top	요소의 위쪽 마진을 줄일 수 있다.

 

Outlines (윤곽)

속 성	설 명	값
outline	요소의 윤곽을 디자인 할 수 있다. border와 달리화면 배치나 크기에 영향을 주지 않는다.	outline-coloroutline-styleoutline-width
outline-color	요소의 윤곽 색상을 지정 할 수 있다.	colorinvert
outline-style	요소의 윤곽 스타일을 지정 할 수 있다.	nonedotteddashedsoliddoublegrooveridgeinsetoutset
outline-width	요소의 윤곽 너비를 지정할 수 있다.	thinmediumthicklength

 

Padding (패딩 - 안쪽여백)

속 성	설 명	값
padding	패딩 속성을 한꺼번에 줄여서 사용할 수 있다.	padding-toppadding-rightpadding-bottompadding-left
padding-bottom	요소의 아래쪽 패딩을 줄 수 있다.	length%
padding-left	요소의 왼쪽 패딩을 줄 수 있다.
padding-right	요소의 오른쪽 패딩을 줄 수 있다.
padding-top	요소의 위쪽 패딩을 줄 수 있따.

 

Positioning (위치제어)

속 성	설 명	값
bottom	지정된 요소의 위치를 요소의 아래쪽 기준으로지정한다.	auto%length
left	지정된 요소의 위치를 왼쪽 기준으로 지정한다.
clip	지정된 수치만큼 4각형의 각 부분을 잘라낸다.	shapeauto
overflow	컨텐츠가 요소의 크기보다 커져서 넘치게 되면이를 보이게 할 것인지 혹은 감출 것인지 등에대한 설정을 할 수 있다.	visiblehiddenscrollauto
position	요소가 위치할 방식을 지정한다.요소가 자연스럽게 흐르게 할 것인지, 공중에둥둥 뜨게 할 것인지 등을 지정할 수 있다.	staticrelativeabsolutefixed
right	지정된 요소의 위치를 오른쪽 기준으로 지정한다.	auto%length
top	지정된 요소의 위치를 위쪽 기준으로 지정한다.
vertical-align	요소안에 들어가는 요소들에 대해서 세로정렬을지정 할 수 있다.	baselinesubsupertoptext-topmiddlebottomtext-bottomlength%
z-index	요소를 쌓아 올릴 수 있다. 이 설정을 통해서 요소끼리겹처 보일 경우 어떤 요소가 더 위에 보이게 할 것인지설정 할 수 있다.	autonumber

 

Table (표)

속 성	설 명	값
border-collapse	이웃하는 셀의 테두리를 겹쳐서 보이게 하거나,떨어져 보이게 할 수 있다.	collapseseparate
border-spacing	인접한 테두리의 간격을 조성할 수 있다.	length
caption-side	테이블의 제목의 위치를 테이블의 상하좌우어디에 위치시킬 것인지 지정할 수 있다.	topbottomleftright
empty-cells	내용이 없는 셀을 보이게 할 것인지 감출 것인지여부를 설정 할 수 있다.	showhide
table-layout	테이블과 셀 등의 요소의 크기를 고정하여 문장이길어도 늘어나거나 줄어들지 않게 한다.	autofixed

 

TEXT (문자)

속 성	설 명	값
color	텍스트의 색상을 설정할 수 있다.	color
direction	텍스트가 위치할 가로 방향을 지정할 수 있다,왼쪽→오른쪽, 혹은 오른쪽→왼쪽	ltrrtl
line-height	문장과 문장 사이의 간격을 지정 할 수 있다.	normalnumberlength%
letter-spacing	글자 하나하나의 간격을 줄이거나 늘릴 수 있다.	normallength
text-align	요소 안의 텍스트 정렬을 지정 할 수 있다.	lefttightcenterjustify
text-decoration	텍스트를 꾸밀 수 있다.	noneunderlineoverlineline-through
text-indent	문장의 첫행을 들여쓰기 할 수 있다.	length%
text-shadow	텍스트에 그림자 효과를 줄 수 있다.	nonecolorlength
text-transform	소문자를 대문자로, 대문자를 소문자로설정 할 수 있다.	nonecapitalizeuppercaselowercase
unicode-bidi	글자 하나하나의 방향을 뒤집거나 되돌릴 수 있다.	normalembedbidi-override
white-space	스페이스바(공백)을 자유롭게 지정할 수 있다.	normalprenowrap
word-spacing	단어와 단어 사이의 간격을 줄이거나 늘릴 수 있다.	normalnowrap

 

Pseudo-Classes (유사클래스, 가상클래스)

속 성	설 명
: active	활동적인 요소의 특별한 스타일을 적용한다.
: focus	요소가 포커스에가 있을때 특별한 스타일을 적용한다.
: hover	마우스가 가리킬때 요소에 특별한 스타일을 적용한다.
: link	방문하지 않은 링크에 특별한 스타일을 적용한다.
: visited	방문한 링크에 특별한 스타일을 적용한다.
: first-child	다른 요소의 first-child에 특별한 스타일을 적용한다.
: lang	구체적인 요소에 원하는 언어를 적용한다.