코드랩 레퍼런스
box-shadow 속성은 콘텐츠의 그림자를 설정합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 가능 버전 CSS3 Definition box-shadow 속성은 콘텐츠의 그림자를 설정합니다. Syntax box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset | inherit; /* h-shadow | v-shadow | color를 설정한 경우 */ box-shadow: 10px 20px #ccc; /* h-shadow | v-shadow | blur | color를 설정한 경우 */ box-shadow: 10px 20px 10px #ccc; /* h-shadow | v-shadow | blur | sp..
bottom 속성은 블럭요소의 아래쪽 속성을 설정합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS2 Definition bottom 속성은 블럭요소의 아래쪽 속성을 설정합니다. Syntax bottom : auto | length | inherit; Property 속성 값 설명 auto 요소의 아래쪽 값을 자동(기본)으로 설정합니다. length 요소의 아래쪽 값을 CSS 단위를 통해 설정합니다. percentage 요소의 아래쪽 값을 %로 설정합니다. inherit bottom의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 bottom Sample top position : absolute; bottom : auto;..
border-width 속성은 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 border-top-width : medium border-right-width : medium border-bottom-width : medium border-left-width : medium 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-width는 테두리 두께 속성을 설정합니다. border-top-width는 테두리 위쪽 두께 속성을 설정합니다. border-right-width는 테두리 오른쪽 두께 속성을 설정합니다. border-bottom-width는 테두리 아래쪽 두께 속성을 설정합니다. border-left-width는 테두리 왼쪽 두께 속성을 설정합니다. Syntax borde..
border-top-width는 위쪽 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 medium 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-top-width는 위쪽 테두리 두께 속성을 설정합니다. Syntax border-top-width : medium | thin | thick | length | inherit; Property 속성 값 설명 medium 테두리의 두께를 medium(3px)으로 설정합니다. thin 테두리의 두께를 thin(1px)으로 설정합니다. thick 테두리의 두께를 thick(5px)으로 설정합니다. length 테두리의 두께를 CSS 단위로 설정합니다. inherit 테두리의 두께를 부모 요소로부터 상속받습니다. Compatibility..
border-top-style는 위쪽 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-top-style는 위쪽 테두리 스타일 속성을 설정합니다. Syntax border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ; Property 속성 값 설명 none 테두리 스타일을 설정하지 않습니다. hidden 테두리 스타일을 숨김으로 설정합니다. dotted 테두리 스타일을 dotted(점선)으로 설정합니다. dashed 테두리 스타일을 dashed(긴 점선)으로 설정합니다. sol..
border-top-right-radius 속성은 위부분 오른쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition border-top-right-radius 속성은 위부분 오른쪽 모서리 굴곡을 설정합니다. Syntax border-top-right-radius : length | % | inherit; Property 속성 값 설명 length 테두리 굴곡을 CSS 단위로 설정합니다. % 테두리 굴곡을 %로 설정합니다. inherit 테두리 굴곡을 부모 요소로부터 상속받습니다. Compatibility 6 7 8 9 10 11 border-top-right-radius Sample border-top-right-radius border-top-..
border-top-left-radius 속성은 위부분 왼쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition border-top-left-radius 속성은 위부분 왼쪽 모서리 굴곡을 설정합니다. Syntax border-top-left-radius : length | % | inherit; Property 속성 값 설명 length 테두리 굴곡을 CSS 단위로 설정합니다. % 테두리 굴곡을 %로 설정합니다. inherit 테두리 굴곡을 부모 요소로부터 상속받습니다. Compatibility 6 7 8 9 10 11 border-top-left-radius Sample border-top-left-radius border-top-left-ra..
border-top-color는 테두리 위쪽 색 속성을 설정합니다. 특징 설명 기본 값 current color 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-top-color는 테두리 위쪽 색 속성을 설정합니다. Syntax border-top-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-top-color: #ff0000; /* 기본 색상값(키워드)을 설정한 경우 */ border-top-color: blue; /* 기본 색상값(RGB)을 설정한 경우 */ border-top-color: rgb(255, 255, 255); /* 기본 색상값(RGBA)을 설정한 경우 */ border-top-color:..
border-top 속성은 위쪽 테두리 속성을 설정합니다. 특징 설명 기본 값 border-top-width : medium border-top-style : none border-top-color : currentColor 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-top 속성은 위쪽 테두리 속성을 설정합니다. Syntax border-top : border-top-color | border-top-style | border-top-width | inherit; /* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */ border-top : 1px; /* 두 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 실선으로 설정 */ bor..
border-style 속성은 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 border-top-style : none border-right-style : none border-bottom-style : none border-left-style : none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-style는 테두리 스타일 속성을 설정합니다. border-top-style는 위쪽 테두리 스타일 속성을 설정합니다. border-right-style는 오른쪽 테두리 스타일 속성을 설정합니다. border-bottom-style는 아래쪽 테두리 스타일 속성을 설정합니다. border-left-style는 왼쪽 테두리 스타일 속성을 설정합니다. Syntax border-..
border-spacing 속성은 테이블의 테두리 간격을 설정합니다. 특징 설명 기본 값 0 상속 가능 애니메이션 가능 버전 CSS2 Definition border-spacing 속성은 테이블의 테두리 간격을 설정합니다. Property 속성 값 설명 length 테이블 테두리 간격을 CSS 단위로 설정합니다. inherit 테이블 테두리 간격을 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 border-spacing Sample 테이블1 1 2 테이블2 1 2 테이블3 1 2 border-spacing : 0px; border-spacing : 2px; border-spacing : 4px; border-spacing : 8px; border-spacing : 10px..
border-right-width는 오른쪽 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 medium 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-right-width는 오른쪽 테두리 두께 속성을 설정합니다. Syntax border-top-width : medium | thin | thick | length | inherit; Property 속성 값 설명 medium 테두리의 두께를 medium(3px)으로 설정합니다. thin 테두리의 두께를 thin(1px)으로 설정합니다. thick 테두리의 두께를 thick(5px)으로 설정합니다. length 테두리의 두께를 CSS 단위로 설정합니다. inherit 테두리의 두께를 부모 요소로부터 상속받습니다. Compati..
border-right-style는 오른쪽 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-right-style는 오른쪽 테두리 스타일 속성을 설정합니다. Syntax border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ; Property 속성 값 설명 none 테두리 스타일을 설정하지 않습니다. hidden 테두리 스타일을 숨김으로 설정합니다. dotted 테두리 스타일을 dotted(점선)으로 설정합니다. dashed 테두리 스타일을 dashed(긴 점선)으로 설정..
border-right-color는 테두리 오른쪽 색 속성을 설정합니다. 특징 설명 기본 값 current color 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-right-color는 테두리 오른쪽 색 속성을 설정합니다. Syntax border-right-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-right-color: #ff0000; /* 기본 색상값(키워드)을 설정한 경우 */ border-right-color: blue; /* 기본 색상값(RGB)을 설정한 경우 */ border-right-color: rgb(255, 255, 255); /* 기본 색상값(RGBA)을 설정한 경우 */ bor..
border-right 속성은 오른쪽 테두리 속성을 설정합니다. 특징 설명 기본 값 border-right-width : medium border-right-style : none border-right-color : currentColor 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-right 속성은 오른쪽 테두리 속성을 설정합니다. Syntax border-right : border-right-color | border-right-style | border-right-width | inherit; /* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */ border-right : 1px; /* 두 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테..
border-radius 속성은 모서리 굴곡을 설정합니다. 특징 설명 기본 값 border-top-left-radius : 0 border-top-right-radius : 0 border-bottom-right-radius : 0 border-bottom-left-radius : 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition border-radius 속성은 모서리 굴곡을 설정합니다. Syntax border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius | inherit; /* 테두리 굴곡을 위쪽, 오른쪽, 아래쪽, 왼쪽으로 설..
border-left-width는 왼쪽 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 medium 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-left-width는 왼쪽 테두리 두께 속성을 설정합니다. Syntax border-top-width : medium | thin | thick | length | inherit; Property 속성 값 설명 medium 테두리의 두께를 medium(3px)으로 설정합니다. thin 테두리의 두께를 thin(1px)으로 설정합니다. thick 테두리의 두께를 thick(5px)으로 설정합니다. length 테두리의 두께를 CSS 단위로 설정합니다. inherit 테두리의 두께를 부모 요소로부터 상속받습니다. Compatibili..
border-left-style는 왼쪽 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-left-style는 왼쪽 테두리 스타일 속성을 설정합니다. Syntax border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ; Property 속성 값 설명 none 테두리 스타일을 설정하지 않습니다. hidden 테두리 스타일을 숨김으로 설정합니다. dotted 테두리 스타일을 dotted(점선)으로 설정합니다. dashed 테두리 스타일을 dashed(긴 점선)으로 설정합니다. ..
border-left-color 속성은 왼쪽 테두리 색 속성을 설정합니다. 특징 설명 기본 값 현재 요소의 색 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-left-color는 테두리 왼쪽 색 속성을 설정합니다. Syntax border-left-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-left-color: #ff0000; /* 기본 색상값(키워드)을 설정한 경우 */ border-left-color: blue; /* 기본 색상값(RGB)을 설정한 경우 */ border-left-color: rgb(255, 255, 255); /* 기본 색상값(RGBA)을 설정한 경우 */ border-left-c..
border-left 속성은 왼쪽 테두리 속성을 설정합니다. 특징 설명 기본 값 border-left-width : medium border-left-style : none border-left-color : currentColor 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-left 속성은 왼쪽 테두리 속성을 설정합니다. Syntax border-left : border-left-color | border-left-style | border-left-width | inherit; /* 한 가지 속성만 설정한 경우 : 테두리 두께를 1px로 설정 */ border-left : 1px; /* 두 가지 속성을 설정한 경우 : 테두리 두께를 5px로 설정, 테두리 스타일을 실선으로..
border-image-width는 테두리 이미지 두께 속성을 설정합니다. 특징 설명 기본 값 1 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image-width는 테두리 이미지 두께 속성을 설정합니다. Syntax border-image-width : length | percentage | number | auto | inherit ; /* 표현 방법(위,오른쪽,아래,왼쪽:10px)을 설정한 경우 */ border-image-width : 10px; /* 표현 방법(위,아래:5px | 왼쪽,오른쪽:2px) */ border-image-width : 5px 2px; /* 표현 방법(위:10px | 왼쪽,오른쪽:30px | 아래:50px) */ border-image-widt..
border-image-source는 테두리 이미지 경로 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image-source는 테두리 이미지 경로 속성을 설정합니다. Syntax border-image-source : none | image | inherit; Property 속성 값 설명 none 테두리 이미지를 설정하지 않습니다. image 테두리 이미지 경로를 설정합니다. inherit 테두리 이미지를 부모 요소로부터 상속받습니다. Compatibility 6 7 8 9 10 11 border-image-source Sample border-image-source border-image-source : url(./image..
border-image-slice는 테두리 이미지 크기 속성을 설정합니다. 특징 설명 기본 값 100% 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image-slice는 테두리 이미지 크기 속성을 설정합니다. Syntax border-image-slice : number | percentage | fill | inherit ; /* 표현 방법(위,오른쪽,아래,왼쪽:10)을 설정한 경우 */ border-image-slice : 10; /* 표현 방법(위,아래:10 | 왼쪽,오른쪽:20) */ border-image-slice : 10 20; /* 표현 방법(위:10 | 왼쪽,오른쪽:20% | 아래:30) */ border-image-slice : 10 20% 30; /* 표..
border-image-repeat는 테두리 이미지 반복 속성을 설정합니다. 특징 설명 기본 값 stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image-repeat는 테두리 이미지 반복 속성을 설정합니다. Syntax border-image-repeat : stretch | repeat | round | space | inherit; Property 속성 값 설명 stretch 테두리 이미지는 반복하지 않고 전체 길이에 맞게 한번만 설정합니다. repeat 테두리 이미지는 반복하여 설정됩니다. round 테두리 이미지는 반복하여 설정됩니다. 단 전체 길이에 맞게 설정됩니다. space 테두리 이미지는 반복하여 설정됩니다. 단 전체 길이에 맞게 설정되지 않습니다...
border-image-outset는 테두리 이미지 간격 속성을 설정합니다. 특징 설명 기본 값 0 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image-outset는 테두리 이미지 간격 속성을 설정합니다. Syntax border-image-outset : length | number | inherit ; /* 표현 방법(위,오른쪽,아래,왼쪽:10px)을 설정한 경우 */ border-image-outset : 10px; /* 표현 방법(위,아래:5px | 왼쪽,오른쪽:2px) */ border-image-outset : 5px 2px; /* 표현 방법(위:10px | 왼쪽,오른쪽:30px | 아래:50px) */ border-image-outset : 10px 30px ..
border-image는 테두리 이미지 속성을 설정합니다. 특징 설명 기본 값 border-image-source : none border-image-slice : 100% border-image-width : 1 border-image-outset : 0s border-image-repeat : stretch 상속 안됨 애니메이션 안됨 버전 CSS3 Definition border-image는 테두리 이미지 속성을 설정합니다. Syntax border-image : border-image-source | border-image-slice | border-image-width | border-image-outset | border-image-repeat | inherit; /* source을 설정한 경우..
border-color는 테두리 색 속성을 설정합니다. 특징 설명 기본 값 current color 상속 안됨 애니메이션 가능 버전 CSS1 Definition border-color는 테두리 색 속성을 설정합니다. border-top-color는 위쪽 테두리 색 속성을 설정합니다. border-right-color는 오른쪽 테두리 색 속성을 설정합니다. border-bottom-color는 아래쪽 테두리 색 속성을 설정합니다. border-left-color는 왼쪽 테두리 색 속성을 설정합니다. Syntax border-color : color | transparent | inherit; /* 기본 색상값을 설정한 경우 */ border-color: #ff0000; /* 기본 색상값(키워드)을 설정한 ..
border-collapse는 테이블의 테두리 분리여부를 정의합니다. 특징 설명 기본 값 separate 상속 가능 애니메이션 안됨 버전 CSS1 Definition border-collapse는 테이블의 테두리 분리여부를 정의합니다. Property 속성 값 설명 separate 테이블 테두리를 분리(기본)합니다. collapse 테이블 테두리 합칩니다. inherit 테이블 테두리 분리여부를 상위 요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 border-collapse Sample 테이블1 1 2 테이블2 1 2 테이블3 1 2 border-collapse : separate; border-collapse : collapse;
border-bottom-width는 아래쪽 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 medium 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-bottom-width는 아래쪽 테두리 두께 속성을 설정합니다. Syntax border-top-width : medium | thin | thick | length | inherit; Property 속성 값 설명 medium 테두리의 두께를 medium(3px)으로 설정합니다. thin 테두리의 두께를 thin(1px)으로 설정합니다. thick 테두리의 두께를 thick(5px)으로 설정합니다. length 테두리의 두께를 CSS 단위로 설정합니다. inherit 테두리의 두께를 부모 요소로부터 상속받습니다. Compa..
border-bottom-style는 아래쪽 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition border-bottom-style는 아래쪽 테두리 스타일 속성을 설정합니다. Syntax border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit ; Property 속성 값 설명 none 테두리 스타일을 설정하지 않습니다. hidden 테두리 스타일을 숨김으로 설정합니다. dotted 테두리 스타일을 dotted(점선)으로 설정합니다. dashed 테두리 스타일을 dashed(긴 점선)으로..