목록CSS (178)
코드랩 레퍼런스
border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다. Syntax border-bottom-right-radius : length | % | inherit; Property 속성 값 설명 length 테두리 굴곡을 CSS 단위로 설정합니다. % 테두리 굴곡을 %로 설정합니다. inherit 테두리 굴곡을 부모 요소로부터 상속받습니다. Compatibility 6 7 8 9 10 11 border-bottom-right-radius Sample border-bottom-right-r..
border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다. Syntax border-bottom-left-radius : length | % | inherit; Property 속성 값 설명 length 테두리 굴곡을 CSS 단위로 설정합니다. % 테두리 굴곡을 %로 설정합니다. inherit 테두리 굴곡을 부모 요소로부터 상속받습니다. Compatibility 6 7 8 9 10 11 border-bottom-left-radius Sample border-bottom-left-radius b..
border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다. 특징 설명 기본 값 current color 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-bottom-color는 테두리 아래쪽 색 속성을 설정합니다. Syntax border-bottom-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-bottom-color: #ff0000; /* 기본 색상값(키워드)을 설정한 경우 */ border-bottom-color: blue; /* 기본 색상값(RGB)을 설정한 경우 */ border-bottom-color: rgb(255, 255, 255); /* 기본 색상값(RGBA)을 설정한 경우 ..
border-bottom 속성은 아래쪽 테두리 속성을 설정합니다. 특징 설명 기본 값 border-bottom-width : medium border-bottom-style : none border-bottom-color : currentColor 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-bottom 속성은 아래쪽 테두리 속성을 설정합니다. Syntax border-bottom : border-bottom-color | border-bottom-style | border-bottom-width | inherit; /* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */ border-bottom : 1px; /* 두 가지 속성을 설정한 경우 : 테두리 두께를 ..
border는 테두리 속성을 설정합니다. 특징 설명 기본 값 border-width : medium border-style : none border-color : currentColor border-image : none border-radius :0 상속 안됨 애니메이션 border-width : 가능 border-style : 안됨 border-color : 가능 border-image : 안됨 border-radius : 가능 버전 CSS1 Definition border는 테두리 속성을 설정합니다. border-width는 테두리 두께 속성을 설정합니다. border-style는 테두리 스타일 속성을 설정합니다. border-color는 테두리 색 속성을 설정합니다. border-image는 테두..
background-size은 백그라운드 이미지 사이즈를 설정합니다. 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition background-size은 백그라운드 이미지 사이즈를 설정합니다. Syntax background-size : length | percentage | auto | cover | contain | inherit; background-size : auto auto; (기본값) background-size : 120px 100px; (length) background-size : 100% 50%; (percentage) background-size : contain; background-size : cover; Property 속성 값 설명 auto..
background-repeat은 백그라운 이미지 반복여부를 설정합니다. 특징 설명 기본 값 repeat 상속 안됨 애니메이션 안됨 버전 CSS1 Definition background-repeat은 백그라운 이미지 반복여부를 설정합니다. Syntax background-repeat : repeat | repeat-x | repeat-y | no-repeat | inherit ; background-repeat : repeat; (기본값) background-repeat : repeat-x; background-repeat : repeat-y; background-repeat : no-repeat; Property 속성 값 설명 repeat 배경 이미지의 x축과 y축으로 반복설정합니다. repeat-x ..
background-position은 백그라운 이미지의 위치 영역을 설정합니다. 특징 설명 기본 값 0% 0% 상속 안됨 애니메이션 가능 버전 CSS1 Definition background-position은 백그라운 이미지의 위치 영역을 설정합니다. Syntax background-position : left | center | right | bottom | top | percentage | length | inherit; /* left, center, right, bottom, top을 설정한 경우 */ background-position: left top; background-position: left center; background-position: left bottom; background-p..
background-origin 속성은 백그라운드 이미지의 영역 속성을 설정합니다. 특징 설명 기본 값 padding-box 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-origin 속성은 백그라운드 이미지의 영역 속성을 설정합니다. background-origin은 백그라운드 이미지의 영역 속성을 설정하는 방면, background-clip은 백그라운드 색 속성을 설정하는 방법이 유사합니다. Syntax background-origin : padding-box | border-box | content-box | inherit; background-origin: padding-box; (기본값) background-origin: border-box; background..
background-image 속성은 백그라운 이미지 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 + CSS3 Definition background-image 속성은 백그라운 이미지 속성을 설정합니다. 멀티 이미지는 CSS3에서 추가되었으며, 익스플로러9 이상부터 지원됩니다. Syntax background-image : url | none | inherit; background-image : none; (기본값) background-image: url(../img/img.jpg); (이미지 경로) background-image: linear-gradient(color, color); background-image: linear-gradient(degrees..
background-color 속성은 백그라운 색을 설정합니다. 특징 설명 기본 값 transparent 상속 안됨 애니메이션 가능 버전 CSS1 Definition background-color 속성은 백그라운 색을 설정합니다. Syntax background-color : color | transparent | inherit; Property 속성 값 설명 color background-color를 설정합니다. transparent background-color를 투명하게 설정합니다. inherit background-color를 부모 요소로부터 속성을 상속받습니다. Compatibility 6 7 8 9 10 11 Sample background-color background-color : #b3e..
background-clip 속성은 백그라운드 색의 영역을 설정합니다. 특징 설명 기본 값 border-box 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-clip 속성은 백그라운드 색의 영역을 설정합니다. background-clip은 백그라운드 색 속성을 설정하는 방면, background-origin은 백그라운 이미지의 영역 속성을 설정하는 방법이 유사합니다. Syntax background-clip : border-box | padding-box | content-box | inherit; Property 속성 값 설명 border-box 백그라운드 속성이 테두리 영역까지 포함하여 표현됩니다. padding-box 백그라운드 속성이 테두리 영역을 제외하여 표현됩..
background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다. 특징 설명 기본 값 normal 상속 안됨 애니메이션 안됨 버전 CSS3 Definition background-blend-mode 속성은 배경을 혼합했을 때의 상태를 정의합니다. 포토샵의 브렌드 모드와 동일합니다. Syntax background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity; Property 속성 값 설명 normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. ov..
background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다. 특징 설명 기본 값 scroll 상속 안됨 애니메이션 안됨 버전 CSS1 Definition background-attachment 속성은 배경이미지의 고정여부를 설정하기 위한 속성입니다. multiple backgrounds 속성은 익스플로러9 버전 이상부터 지원됩니다. Syntax background-attachment : scroll | fixed | local | inherit; Property 속성 값 설명 scroll 배경이미지와 콘텐츠를 표현하는 기본값입니다. fixed 배경이미지를 고정하고, 콘텐츠만 움직입니다. local 배경이미지와 콘텐츠가 같이 움직입니다. inherit background..
background 속성은 배경 속성 값을 정의합니다. 특징 설명 기본 값 background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: none; background-origin: padding-box; background-position: 0% 0%; background-repeat: repeat; background-size: auto auto; 상속 안됨 애니메이션 background-attachment: 안됨 background-clip: 안됨 background-color: 가능 background-image: 안됨 background-origin: 안됨 back..
backface-visibility 속성은 요소의 뒷면을 정의합니다. 특징 설명 기본 값 visible 상속 안됨 애니메이션 안됨 버전 CSS3 Definition backface-visibility 속성은 요소의 뒷면을 정의합니다. Property 속성 값 설명 visible 요소의 뒷면을 보이도록 설정합니다. hidden 요소의 뒷면을 보이지 않도록 설정합니다. inherit backface-visibility의 상태를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 backface-visibility Sample animation backface-visibility : visible; backface-visibility : hidden;
animation-timing-function 속성은 움직임의 속도를 정의합니다. 특징 설명 기본 값 ease 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-timing-function 속성은 움직임의 속도를 정의합니다. Syntax animation-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 처음엔 천천히 시작하여 빨라지고 마지막에 다시 느려집니다. ease-i..
animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 특징 설명 기본 값 running 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-play-state 속성은 애니메이션 진행상태를 설정합니다. Syntax animation-play-state : paused | running | inherit; Property 속성 값 설명 paused 애니메이션의 움직임을 정지시킵니다. running 애니메이션을 움직이게 합니다. inherit 애니메이션 움직임을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-direction Sample1 클릭하면 이미지가 움직이는 횟수를 확인하는 예제입니다. 애니메이션(an..
animation-name 속성은 keyframe 이름을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-name keyframe 이름을 설정합니다. Syntax animation-name: keyframename | none | inherit; Property 속성 값 설명 keyframe name 움직임을 표현한 Keyframes의 이름을 설정합니다.. none 애니메이션 움직임을 적용하지 않습니다. inherit 애니메이션 이름을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-direction Sample animation animation-name : my1; animation..
animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 특징 설명 기본 값 1 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. Syntax animation-iteration-count : number | infinite | inherit; Property 속성 값 설명 number 애니메이션 반복 횟수를 숫자를 통해 설정합니다. infinite 애니메이션 반복 횟수를 무한으로 설정합니다. inherit 애니메이션반복 횟수를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-iteration-count Sample1 클릭하면 이..
animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. Syntax animation-duration: time | inherit; Property 속성 값 설명 time 애니메이션의 작동 시간을 설정합니다. inherit 애니메이션 작동 시간을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-duration Sample1 클릭하면 이미지 지속 시간을 설정하는 예제입니다. 애니메이션(Animation-duration) duration duration duration dur..
animation-direction 애니메이션 움직임 방향을 설정합니다. 특징 설명 기본 값 normal 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-direction 애니메이션 움직임 방향을 설정합니다. Syntax animation-direction : normal | reverse | alternate | alternate-reverse | inherit; Property 속성 값 설명 normal 애니메이션의 방향을 정상적(기본값)으로 설정합니다. reverse 애니메이션 움직임의 방향을 역방향으로 설정합니다. alternate 애니메이션 움직임의 방향을 순방향을 진행 후 역방향으로 설정합니다. alternate-reverse 애니메이션 움직임의 방향을 역방향을 ..
animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. 특징 설명 기본 값 0s 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. Syntax animation-delay: time | inherit; Property 속성 값 설명 time 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 설정합니다. inherit animation-delay를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 animation-delay Sample1 클릭하면 지정한 횟수만큼 움직이는 예제입니다. Animation-delay..
animation 속성은 움직임을 표현합니다. 특징 설명 기본 값 animation-name: none animation-duration: 0s animation-timing-function: ease animation-delay: 0s animation-iteration-count: 1 animation-direction: normal animation-fill-mode: none animation-play-state: running 상속 안됨 애니메이션 안됨 버전 CSS3 Definition animation 속성은 움직임을 표현합니다. Syntax animation: name | duration | timing-function | delay | iteration-count | direction | ..
all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. Syntax all : initial | inherit | unset; Property 속성 값 설명 initial 요소의 모든 속성을 초기화합니다. inherit 상위 요소의 속성을 상속받어 적용합니다. unset 요소의 원래 속성으로 설정합니다. Compatibility 6 7 8 9 10 11 all Sample all all : unset; all : inherit; all : initial;
align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. 특징 설명 기본 값 auto 상속 안됨 애니메이션 안됨 버전 CSS3 Definition align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. Syntax align-self: auto | stretch | center | flex-start | flex-end | baseline | inherit; Property 속성 값 설명 auto 요소의 정렬 상태를 기본으로 설정합니다. stretch 요소의 가로 영역 값을 최대로 설정합니다. center 요소의 정렬을 가운데로 설정합니다. flex-start 요소의 정렬을 시작점으로 설정합니다. flex-end 요소의 정렬을 끝점으로 설정합니다. baseline 요소의 정렬을 기본 값으로 설정..
align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. 특징 설명 기본 값 stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition a lign-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. Syntax align-items : stretch | center | flex-start | flex-end | baseline | inherit; Property 속성 값 설명 stretch 요소의 정렬 상태를 기본 값으로 설정합니다. center 요소의 정렬 상태를 가운데로 설정합니다. flex-start 요소의 정렬 상태를 위쪽으로 설정합니다. flex-end 요소의 정렬 상태를 아래쪽으로 설정합니다. baseline 요소의 정렬 상태를 기본값으로 설정합니다. Comp..
align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. 특징 설명 기본 값 stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의하고 justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. align-content 속성은 display:flex; 상태에서 적용됩니다. Syntax align-content : stretch | center | flex-start | flex-end | space-between | space-around | inherit; Property 속성 값 설명 stretc..