코드랩 레퍼런스

CSS Properites 본문

BASIC

CSS Properites

webstoryboy 2016. 12. 18. 15:31
HTML 요소를 속성별로 정리한 태그입니다.

Font

속성 설명
font font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다.
font-family font-family 속성은 폰트 종류를 설정합니다.
font-size font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch font-stretch 속성은 텍스트의 크기를 정의합니다.
font-style font-style 속성은 폰트의 스타일을 정의합니다.
font-variant font-variant 속성은 글꼴을 변형을 정의합니다.
font-weight font-weight 속성은 글꼴 두께를 정의합니다.
color color 속성은 요소의 글씨 색을 설정합니다.

Text

속성 설명
word-break word-break 속성은 줄바꿈 속성을 설정합니다.
word-spacing word-spacing 속성은 단어 사이의 간격을 정의합니다.
word-wrap word-wrap 속성은 줄바꿈을 설정합니다.
white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다.
letter-spacing letter-spacing 속성은 글자 사이의 간격을 설정합니다.
line-height line-height 속성은 문장과 문장 사이의 간격을 설정합니다.
text-decoration-style text-decoration-style 속성은 글자 스타일을 정의합니다.
text-indent text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify text-justify 속성은 텍스트의 간격을 정의합니다.
text-overflow text-overflow 속성은 문자열 영역 속성을 설정합니다.
text-shadow text-shadow 속성은 텍스트에 그림자를 설정합니다.
text-transform text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다.
text-align text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration text-decoration-color 속성은 글자 라인 색을 설정합니다.
text-decoration-color text-decoration-color 속성은 글자 라인 색을 설정합니다.
text-decoration-line text-decoration-line 속성은 글자 라인 스타일을 설정합니다.
tab-size tab-size 속성은 글씨의 간격을 정의합니다.
unicode-bidi unicode-bidi 속성은 글자의 방향 속성을 설정합니다.
vertical-align vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다.
quotes quotes 속성은 인용 부호를 정의합니다.
hanging-punctuation hanging-punctuation 속성은 글시의 시작 및 끝의 위치 정의합니다.
cursor cursor 속성은 마우스 오버시 이미지를 정의합니다.
direction direction 속성은 문장의 방향을 설정합니다.

Background

속성 설명
background background 속성은 배경 속성 값을 정의합니다.
background-attachment background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다.
background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다.
background-clip background-clip 속성은 백그라운드 색의 영역을 설정합니다.
background-color background-color 속성은 백그라운 색을 설정합니다.
background-image background-image 속성은 백그라운 이미지 속성을 설정합니다.
background-origin background-origin 속성은 백그라운드 이미지의 영역 속성을 설정합니다.
background-position background-position은 백그라운 이미지의 위치 영역을 설정합니다.
background-repeat background-repeat은 백그라운 이미지 반복여부를 설정합니다.
background-size background-size은 백그라운드 이미지 사이즈를 설정합니다.

Border

속성 설명
border border는 테두리 속성을 설정합니다.
border-bottom border-bottom는 아래쪽 테두리 속성을 설정합니다.
border-bottom-color border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다.
border-bottom-left-radius border-bottom-left-radius는 아래 왼쪽 모서리 굴곡을 설정합니다.
border-bottom-right-radius border-bottom-right-radius는 아래 오른쪽 모서리 굴곡을 설정합니다.
border-bottom-style border-bottom-style는 아래쪽 테두리 스타일 속성을 설정합니다.
border-bottom-width border-bottom-width는 아래쪽 테두리 두께 속성을 설정합니다.
border-collapse border-collapse는 테이블의 테두리 분리여부를 정의합니다.
border-color border-color는 테두리 색 속성을 설정합니다.
border-image border-image는 테두리 이미지 속성을 설정합니다.
border-image-outset border-image-outset는 테두리 이미지 간격 속성을 설정합니다.
border-image-repeat border-image-repeat는 테두리 이미지 반복 속성을 설정합니다.
border-image-slice border-image-slice는 테두리 이미지 크기 속성을 설정합니다.
border-image-source border-image-source는 테두리 이미지 경로 속성을 설정합니다.
border-image-width border-image-width는 테두리 이미지 두께 속성을 설정합니다.
border-left border-left 속성은 왼쪽 테두리 속성을 설정합니다.
border-left-color border-left-color 속성은 왼쪽 테두리 색 속성을 설정합니다.
border-left-style border-left-style 속성은 왼쪽 테두리 스타일 속성을 설정합니다.
border-left-width border-left-width 속성은 왼쪽 테두리 두께 속성을 설정합니다.
border-radius border-radius 속성은 모서리 굴곡을 설정합니다.
border-right border-right 속성은 오른쪽 테두리 속성을 설정합니다.
border-right-color border-right-color 속성은 오른쪽 테두리 색 속성을 설정합니다.
border-right-style border-right-style 속성은오른쪽 테두리 스타일 속성을 설정합니다.
border-right-width border-right-width 속성은 오른쪽 테두리 두께 속성을 설정합니다.
border-spacing border-spacing 속성은 테이블의 테두리 간격을 설정합니다.
border-style border-style 속성은 테두리 스타일 속성을 설정합니다.
border-top border-top 속성은 위쪽 테두리 속성을 설정합니다.
border-top-color border-top-color 속성은 위쪽 테두리 색 속성을 설정합니다.
border-top-left-radius border-top-left-radius 속성은 위부분 왼쪽 모서리 굴곡을 설정합니다.
border-top-right-radius border-top-right-radius 속성은 위부분 오른쪽 모서리 굴곡을 설정합니다.
border-top-style border-top-style 속성은 위쪽 테두리 스타일 속성을 설정합니다.
border-top-width border-top-width 속성은 위쪽 테두리 두께 속성을 설정합니다.
border-width border-width 속성은 테두리 두께 속성을 설정합니다.

Outline

속성 설명
outline outline 속성은 아웃라인의 색, 스타일, 두께를 정의합니다.
outline-color outline-color 속성은 아웃라인의 색을 정의합니다.
outline-offset outline-offset 속성은 아웃라인의 간격을 정의합니다.
outline-style outline-style 속성은 아웃라인 스타일을 정의합니다.
outline-width outline-width 속성은 아웃라인의 두께를 정의합니다.

Animation

속성 설명
animation animation 속성은 움직임을 표현합니다.
animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다.
animation-direction animation-direction 애니메이션 움직임 방향을 설정합니다.
animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다
animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다.
animation-name animation-name 속성은 keyframe 이름을 설정합니다.
animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다.
animation-timing-function animation-timing-function 속성은 움직임의 속도를 정의합니다.

Table

속성 설명
table-layout table-layout 속성은 표의 레이아웃을 정의합니다.
caption-side caption-side 속성은 caption의 위치를 설정합니다.
empty-cells empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다.

List

속성 설명
list-style list-style 속성은 목록 스타일 속성을 설정합니다.
list-style-image list-style-image 속성은 목록 마커의 이미지를 설정합니다.
list-style-position list-style-position 속성은 목록 마커의 위치 속성을 설정합니다.
list-style-type list-style-type 속성은 목록 마커의 유형을 설정합니다.

Transform

속성 설명
transform transform 속성은 요소의 움직임을 표현합니다.
transform-origin transform-origin 속성은 요소의 움직임 방향을 정의합니다.
transform-style transform-style 속성은 요소의 움직임 스타일을 정의합니다.
perspective perspective 속성은 3D를 표현할 때 원근점을 정의합니다.
perspective-origin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다.
backface-visibility backface-visibility 속성은 요소의 뒷면을 정의합니다.

Transition

속성 설명
transition transition 속성은 요소의 움직임 시간을 정의합니다.
transition-delay transition-delay 속성은 요소의 움직임 시간을 지연합니다.
transition-duration transition-duration 속성은 요소의 움직임 지속시간을 정의합니다.
transition-property transition-property 속성은 transition의 적용 여부를 정의합니다.
transition-timing-function transition-timing-function 속성은 요소의 움직임 기능을 정의합니다.

Column

속성 설명
column-count column-count 속성은 컬럼의 수를 정의합니다.
column-fill column-fill 속성은 열의 지정방법을 정의합니다.
column-gap column-gap 속성은 열의 간격을 정의합니다.
column-rule column-rule 속성은 컬럼의 가로값, 스타일, 컬러를 정의합니다.
column-rule-color column-rule-color 속성은 컬럼의 라인 색을 정의합니다.
column-rule-style column-rule-style 속성은 컬럼의 라인 스타일을 정의합니다.
column-rule-width column-rule-width 속성은 컬럼의 라인 가로값을 정의합니다.
column-span column-span 속성은 열의 속성을 정의합니다.
column-width column-width 속성은 컬럼의 가로 값을 정의합니다.
columns columns 속성은 열의 폭과 열의 수를 정의합니다.
page-break-after page-break-after 속성은 페이지 분리에 관한 설정을 정의합니다.
page-break-before page-break-before 속성은 페이지 분리에 관한 설정을 정의합니다.
page-break-inside page-break-inside 속성은 페이지 분리에 관한 설정을 정의합니다.

Box

속성 설명
float float 속성은 블록요소의 정렬 상태를 설정합니다.
clear clear 속성은 float 요소의 성질을 차단합니다.
margin margin 속성은 요소의 바같쪽 여백을 설정합니다.
margin-bottom margin-bottom 속성은 블럭요소의 아래 바같쪽 여백을 설정합니다.
margin-left margin-left 속성은 요소의 왼쪽 바같쪽 여백을 설정합니다.
margin-right margin-right 속성은 요소의 오른쪽 바같쪽 여백을 설정합니다.
margin-top margin-top 속성은 요소의 위쪽 바같쪽 여백을 설정합니다.
padding padding 속성은 요소의 안쪽 여백을 설정합니다.
padding-bottom padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다.
padding-left padding-left 속성은 요소의 왼쪽 안쪽 여백을 설정합니다.
padding-right padding-right 속성은 요소의 오른쪽 안쪽 여백을 설정합니다.
padding-top padding-top 속성은 요소의 위쪽 안쪽 여백을 설정합니다.
right right 속성은 요소의 오른쪽 속성을 설정합니다.
bottom bottom 속성은 블럭요소의 아래쪽 속성을 설정합니다.
top top 속성은 요소의 위쪽 속성을 설정합니다.
left left 속성은 요소의 왼쪽 속성을 설정합니다.
position position 속성은 요소의 위치를 설정합니다.
box-shadow box-shadow 속성은 콘텐츠의 그림자를 설정합니다.
box-sizing box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다.
width width 속성은 요소의 가로 값을 정의합니다.
height height 속성은 콘텐츠 요소의 세로값을 설정합니다.
overflow overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
overflow-x overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
overflow-y overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다.
max-height max-height 속성은 요소의 최대 세로값을 설정합니다.
max-width max-width 속성은 요소의 최대 가로값을 설정합니다.
min-height min-height 속성은 요소의 최소 세로값을 설정합니다.
min-width min-width 속성은 요소의 최소 가로값을 설정합니다.
z-index z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다.
visibility visibility 속성은 요소를 보이지 않게 정의합니다.
display display 속성은 HTML에 사용되는 요소의 성질을 정의합니다.

Flex

속성 설명
align-content align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다.
align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다.
align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다.
flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다.
flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다.
flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다.
flex-flow flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다.
flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 늘려줍니다.
flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다.
flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다.
justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다.
order order 속성은 플렉스 콘텐츠의 순서를 정의합니다.

Nav

속성 설명
nav-down nav-down 속성은 메뉴의 아래 속성을 정의합니다.
nav-index nav-index 속성은 메뉴의 순서 상태를 정의합니다.
nav-left nav-left 속성은 메뉴의 왼쪽 속성을 정의합니다.
nav-right nav-right 속성은 메뉴의 오른쪽 속성을 정의합니다.
nav-up nav-up 속성은 메뉴의 위쪽 속성을 정의합니다.

Etc

속성 설명
all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다.
clip clip 속성은 절대 요소의 위치 값을 지정합니다.
content content 속성은 콘텐츠 내용을 설정합니다.
counter-increment counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다.
counter-reset counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.
filter filter 속성은 이미지의 비쥬얼 효과를 정의합니다.
opacity opacity 속성은 요소의 투명도를 설정합니다.
resize resize 속성은 요소의 사이즈를 정의합니다.

Ad

Comments