코드랩 레퍼런스

Background-gradient는 백그라운드 그라디언트 설정을 할 수 있습니다. 속성 설명 linear-gradient 선형 그라데이션 백그라운를 설정합니다. radial-gradient 원형 그라데이션 백그라운를 설정합니다. repeating-linear-gradient 반복 선형 그라데이션 백그라운를 설정합니다. repeating-radial-gradient 반복 원형 그라데이션 백그라운를 설정합니다. Share

animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-duration 속성은 애니메이션이 끝난 후의 상태를 설정합니다 Syntax animation-fill-mode: none | forwards | backwards | both | inherit; Property 속성 값 설명 none 애니메이션이 끝난 후 상태를 설정하지 않습니다. forwards 애니메이션이 끝난 후 그 지점에 그대로 있습니다. backwards 애니메이션이 끝난 후 시작점으로 돌아옵니다. both 애니메이션이의 앞 뒤 결과를 조합하여 설정합니다. inherit 애니메이션의 상태를 상위 요소한테 상..

z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS2 Definition z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. z-index는 음수(-)도 설정 할 수 있습니다. z-index는 숫자가 높을수록 위로 올라옵니다. 99999까지만 설정할 수 있지만, 그 이상도 작동은 합니다. z-index를 적용하지 않은 경우는 CSS 우선순위에 따라 나중에 설정한 속성이 위로 올라옵니다. z-index는 요소의 위치가 겹쳤을 때 적용하기 때문에 position 값을 설정해야합니다. Syntax z-index : auto | number | inherit; Property 속성 값 설명 auto z..

word-wrap 속성은 줄바꿈을 설정합니다. Summary 특징 설명 기본 값 normal 상속 가능 애니메이션 안됨 버전 CSS3 Definition word-wrap 속성은 줄바꿈을 설정합니다. 문장이 길어지면 줄바꿈은 자동으로 이루어집니다. 하지만 그렇지 않은 경우가 있습니다. 한글은 해당되지 않으며, 의미가 없는 단어나, 의미가 없는 주소 같은 경우는 줄바꿈이 일어나지 않습니다. 이럴 때 word-wrap을 사용합니다. 문장이 길어지면 줄바꿈을 어떻게 할지 선택하는 word-break와 비교합니다. Syntax word-wrap : normal | break-word | inherit; Property 속성 값 설명 normal word-wrap 속성의 기본 값입니다. break-word 줄바꿈..

word-spacing 속성은 단어 사이의 간격을 정의합니다. Summary 특징 설명 기본 값 normal 상속 가능 애니메이션 가능 버전 CSS1 Definition word-spacing 속성은 단어 사이의 간격을 정의합니다. 단어와 단어 사이의 간격은 word-spacing으로 설정하고, 글자와 글자 사이의 간격은 letter-spacing으로 설정합니다. Syntax word-spacing : normal | length | inherit; Property 속성 값 설명 normal 기본값입니다. length 단어와 단어 사이의 간격을 설정합니다. inherit word-spacing의 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 word-spacing Sa..

word-break 속성은 줄바꿈 속성을 설정합니다. Summary 특징 설명 기본 값 normal 상속 가능 애니메이션 안됨 버전 CSS3 Definition word-break 속성은 줄바꿈 속성을 설정합니다. 문장이 길어지면 줄바꿈(normal)이 일어납니다. 이때 단어(keep-all)를 기준으로 줄바꿈을 할지, 글자(break-all)를 기준으로 줄바꿈을 할지 결정하는 속성입니다. Syntax word-break: normal | break-all | keep-all | inherit; Property 속성 값 설명 normal word-break 속성의 기본 값입니다. break-all 글자를 기준으로 줄바꿈을 합니다. keep-all 단어를 기준으로 줄바꿈을 합니다. inherit word-..

width 속성은 요소의 가로 값을 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS1 Definition width 속성은 요소의 가로 값을 정의합니다. Syntax width : auto | value | inherit; Property 속성 값 설명 auto width 속성의 기본 값입니다. length width 속성 값을 단위로 설정합니다. % width 속성 값을 %로 설정합니다. inherit width의 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 width Sample width width : auto; width : 200px; width : 200px; width : 50%; width : 100%;

white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. Summary 특징 설명 기본 값 normal 상속 가능 애니메이션 안됨 버전 CSS1 Definition white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다. 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 속성이 pre, pre-wrap, pre-line 속성입니다. 공백과 줄을 인식한다는 것은 마크업에서 ..

visibility 속성은 요소를 보이지 않게 정의합니다. Summary 특징 설명 기본 값 visible 상속 가능 애니메이션 가능 버전 CSS2 Definition visibility 속성은 요소를 보이지 않게 정의합니다. visibility : hidden;는 요소를 보이지 않게 하지만, 요소 영역은 그대로 유지됩니다. display : none;는 요소를 보이지 않게 하고, 영역도 사라지는 점이 비교됩니다. Syntax visibility : visible | hidden | collapse | inherit; Property 속성 값 설명 visible visibility 속성의 기본 값입니다. hidden 요소를 보이지 않게 합니다. 영역은 유지됩니다. collapse 테이블 요소를 보이지 않..

vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다. Summary 특징 설명 기본 값 baseline 상속 안됨 애니메이션 가능 버전 CSS1 Definition vertical-align 속성은 텍스트의 상하 정렬 방식을 설정합니다. vertical-align은 인라인 요소에만 적용되기 때문에 블럭 구조에서 정렬은 적용되지 않습니다. 글씨와 이미지 및 글씨와 input의 정렬상태가 맞지 않는다면, 이미지 요소 및 input에게 vertical-align을 주어야합니다. Syntax vertical-align : baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | inherit; Prop..

unicode-bidi 속성은 글자의 방향 속성을 설정합니다. 특징 설명 기본 값 normal 상속 가능 애니메이션 안됨 버전 CSS2 Definition unicode-bidi 속성은 글자의 방향 속성을 설정합니다. unicode-bidi는 문장의 방향 속성을 설정하는 diretion과 비교됩니다. Syntax unicode-bidi : normal | embed | bidi-override | inherit; Property 속성 값 설명 normal 글자의 방향을 기본값으로 설정합니다. embed 글자의 방향을 embed으로 설정합니다. bidi-override 글자의 방향을 반대방향으로 설정합니다. inherit unicode-bidi의 속성 값을 상위요소한테 상속받습니다. Compatibilit..

transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. 특징 설명 기본 값 ease 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transition-timing-function 속성은 요소의 움직임 기능을 정의합니다. Syntax transition-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | inherit; Property 속성 값 설명 linear 처음 속도와 마지막 속도가 일정합니다. ease 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니..

transition-property 속성은 transition의 적용 여부를 정의합니다. 특징 설명 기본 값 all 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transition-property 속성은 transition의 적용 여부를 정의합니다. Syntax transition-property : none | all | property | inherit; Property 속성 값 설명 none transition의 효과를 적용하지 않습니다. all 모든 영역에 transition의 효과를 적용합니다. property 적용하고 싶은 속성만 적용합니다. inherit transition-property의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 1..

transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transition-duration 속성은 요소의 움직임 지속시간을 정의합니다. Syntax transition-duration : time | inherit; Property 속성 값 설명 time transition 움직임 시간을 설정합니다. inherit transition-duration의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 transition-duration Sample duration:1s duration:2s duration:3s 마우스 오버시 transition-duratio..

transition-delay 속성은 요소의 움직임 시간을 지연합니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transition-delay 속성은 요소의 움직임 시간을 지연합니다. Syntax transition-delay : time | inherit; Property 속성 값 설명 time transition의 지연 시간을 설정합니다. inherit transition-delay의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 transition-delay Sample delay:0s delay:1s delay:2s 마우스 오버시 transition-delay가 작동됩니다.

transition 속성은 요소의 움직임을 정의합니다. 특징 설명 기본 값 transition-property : all transition-duration : 0s transition-timing-function : ease transition-delay : 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transition 속성은 요소의 움직임을 정의합니다. Syntax transition : transition-property | transition-duration | transition-timing-function | transition-delay | inherit; /* property | duration을 설정한 경우 */ transition: left 4s; /* prope..

transform-style 속성은 요소의 움직임 스타일을 정의합니다. 특징 설명 기본 값 flat 상속 안됨 애니메이션 안됨 버전 CSS3 Definition transform-style 속성은 요소의 움직임 스타일을 정의합니다. Syntax transform-style : flat | preserve-3d | inherit; Property 속성 값 설명 flat transform-style의 기본값입니다. preserve-3d transform-style를 3d로 설정합니다. inherit transform-style의 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 transform-style

transform-origin 속성은 요소의 움직임 방향을 정의합니다. 특징 설명 기본 값 50% 50% 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition transform-origin 속성은 요소의 움직임 방향을 정의합니다. Syntax transform-origin : x-axis | y-axis | z-axis | inherit; Property 속성 값 설명 x-axis transform X축 방향을 설정합니다. - left - center - right - length - % y-axis transform Y축 방향을 설정합니다. - left - center - right - length - % z-axis transform Z축 방향을 설정합니다. - left - center -..

transform 속성은 요소의 움직임을 표현합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 가능 버전 CSS3 Definition transform 속성은 요소의 움직임을 표현합니다. Syntax transform : none | transform-functions | inherit; Property 속성 값 설명 none transform을 적용하지 않습니다. matrix(n,n,n,n,n,n) 지정한 위치로 이동을 나타냅니다. matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 지정한 3D 위치로 이동을 나타냅니다. translate(x,y) X좌표, Y좌표 이동을 나태냅니다. translate3d(x,y,z) X좌표, Y좌표, Z좌표 이동을 나태냅니다. trans..

top 속성은 요소의 위쪽 속성을 설정합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS2 Definition top 속성은 요소의 위쪽 속성을 설정합니다. top 속성은 position과 같이 사용합니다. Syntax top : auto | length | inherit; Property 속성 값 설명 auto top의 값을 자동으로 설정합니다. length top의 값을 CSS단위를 통해 설정합니다. % top의 값을 %로 설정합니다. inherit top의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 top Sample top position : absolute; top : auto; position : absolut..

text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다. Summary 특징 설명 기본 값 none 상속 가능 애니메이션 안됨 버전 CSS1 Definition text-transform 속성은 텍스트를 대문자나 소문자로 변경합니다. text-transform은 영어에만 해당되는 속성입니다. Syntax text-transform : none | capitalize | uppercase | lowercase | inherit; Property 속성 값 설명 none text-transform을 속성을 적용하지 않습니다. capitalize 각 단어의 첫 글자만 대문자로 변경합니다. uppercase 텍스트를 모두 대문자로 변경합니다. lowercase 텍스트를 모두 소문자로 변경합니다. ..

text-shadow 속성은 텍스트에 그림자를 설정합니다. 특징 설명 기본 값 none 상속 가능 애니메이션 가능 버전 CSS3 Definition text-shadow 속성은 텍스트에 그림자를 설정합니다. Syntax text-shadow : h-shadow | v-shadow | blur-radius | color | none | inherit; /* h-shadow | v-shadow | color를 설정한 경우 */ text-shadow: 1px 1px #ccc; /* h-shadow | v-shadow | blur-radius | color를 설정한 경우 */ text-shadow: 1px 1px 2px #ccc; Property 속성 값 설명 h-shadow 가로(X)축의 그림자를 설정합니다...

text-overflow 속성은 문자열 영역 속성을 설정합니다. 특징 설명 기본 값 clip 상속 안됨 애니메이션 안됨 버전 CSS3 Definition text-overflow 속성은 문자열 영역 속성을 설정합니다. Syntax text-overflow : clip | ellipsis | string | inherit; Property 속성 값 설명 clip 문자열를 그대로 보여주는 기본값입니다. ellipsis 문자열 끝부분을 "..."으로 설정합니다. string 짤린 텍스트 영역을 string으로 설정합니다. inherit z-index의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 text-overflow Sample "The grid system is..

text-justify 속성은 텍스트의 간격을 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition text-justify 속성은 텍스트의 간격을 정의합니다. text-align : justify; 경우에 텍스트의 간격을 조절하는 속성이지만 현재는 거의 모든 브라우저에서 지원되지 않습니다. Syntax text-justify : auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | trim | inherit; Property 속성 값 설명 auto 텍스트의 정렬 상태를 자동으로 설정합니다. inter-word 텍스트의 정렬을 단어를 기준으로 설정합니다. int..

text-indent 속성은 문단 들여쓰기 속성을 설정합니다. Summary 특징 설명 기본 값 0 상속 가능 애니메이션 가능 버전 CSS1 Definition text-indent 속성은 문단 들여쓰기 속성을 설정합니다. Syntax text-indent : length | percentage | inherit; Property 속성 값 설명 length 들어쓰기를 CSS 단위를 통해 설정합니다. % 들어쓰기를 % 단위를 통해 설정합니다. inherit text-indent의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 text-indent Sample "The grid system is an aid, not a guarantee. It permits a nu..

text-decoration-style 속성은 글자 스타일을 정의합니다. Summary 특징 설명 기본 값 solid 상속 안됨 애니메이션 안됨 버전 CSS3 Definition text-decoration-style 속성은 글자 스타일을 정의합니다. Syntax text-decoration-style : solid | double | dotted | dashed | wavy | inherit; Property 속성 값 설명 solid 글자에 한 줄 속성을 설정합니다. double 글자에 두개의 줄을 설정합니다. dotted 글자에 점선 줄을 설정합니다. dashed 글자에 대시 줄을 설정합니다. wavy 글자에 웨이브 줄을 설정합니다. inherit text-decoration-style의 속성 값을 ..

text-decoration-line 속성은 글자 라인 스타일을 설정합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition text-decoration-line 속성은 글자 라인 스타일을 설정합니다. Syntax text-decoration-line : none | underline | overline | line-through | inherit; Property 속성 값 설명 none 글자에 줄 속성을 주지 않습니다. underline 글자에 밑줄을 설정합니다. overline 글자에 윗줄을 설정합니다. line-through 글자에 가운데 줄을 설정합니다. inherit z-index의 속성 값을 상위요소한테 상속받습니다. Compatibili..

text-decoration-color 속성은 글자 라인 색을 설정합니다. Summary 특징 설명 기본 값 현재 색 상속 안됨 애니메이션 가능 버전 CSS3 Definition text-decoration-color 속성은 글자 라인 색을 설정합니다. Syntax text-decoration-color : color | inherit; Property 속성 값 설명 color 텍스트의 라이색을 설정합니다. inherit z-index의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 text-decoration-color Sample "The grid system is an aid, not a guarantee. It permits a number of possi..

text-decoration 속성은 글자 라인 속성을 설정합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition text-decoration 속성은 글자 라인 속성을 설정합니다. Syntax text-decoration : none | underline | overline | line-through | inherit; Property 속성 값 설명 none 글자에 줄 속성을 주지 않습니다. underline 글자에 밑줄을 설정합니다. overline 글자에 윗줄을 설정합니다. line-through 글자에 가운데 줄을 설정합니다. inherit text-decoration의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 ..

text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition text-align-last 속성은 문장의 마지막 텍스트 정렬 방식을 설정합니다. start, end 속성은 인터넷 익스플로러에서 인식하지 못합니다. Syntax text-align-last : auto | left | right | center | justify | start | end | inherit; Property 속성 값 설명 auto 문장의 마지막 텍스트 정렬 방식을 자동으로 설정합니다. left 문장의 마지막 텍스트 정렬 방식을 왼쪽으로 설정합니다. right 문장의 마지막 텍스트 정렬 방식을 오른쪽으로 설..