코드랩 레퍼런스
flex-wrap 속성은 요소의 줄 속성을 설정합니다. Summary 특징 설명 기본 값 nowrap 상속 안됨 애니메이션 안됨 버전 CSS3 Definition flex-wrap 속성은 요소의 줄 속성을 설정합니다. Syntax flex-wrap : nowrap | wrap | wrap-reverse | inherit; Property 속성 값 설명 nowrap 요소 크기에 상관없이 한 줄에 설정합니다. wrap 요소 크기에 맞게 설정합니다. wrap-reverse 요소 크기에 맞게 반대로 설정합니다. inherit flex-wrap의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 flex-wrap Sample flex-wrap : nowrap; flex-wra..
flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. Summary 특징 설명 기본 값 1 상속 안됨 애니메이션 가능 버전 CSS3 Definition flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. Syntax flex-shrink : number | inherit; Property 속성 값 설명 number 요소의 크기를 숫자를 통해 줄여줍니다. inherit flex-shrink의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 flex-shrink Sample flex-shrink : 0; flex-shrink : 1; flex-shrink : 2; flex-shrink : 3; flex-shrink : 4;
flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. Summary 특징 설명 기본 값 0 상속 안됨 애니메이션 가능 버전 CSS3 Definition flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. Syntax flex-grow : number | inherit; Property 속성 값 설명 number 요소의 크기를 숫자를 통해 설정합니다. inherit flex-grow의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 flex-grow Sample flex-grow: 1; flex-grow : 2; flex-grow : 3; flex-grow : 4; flex-grow : 5; flex-grow : 6; flex-grow : 7;..
flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. Summary 특징 설명 기본 값 flex-direction : row flex-wrap : nowrap 상속 안됨 애니메이션 안됨 버전 CSS3 Definition flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. Syntax flex-flow : flex-direction | flex-wrap | inherit; Property 속성 값 설명 flex-direction 요소의 정렬 방향을 설정합니다. flex-wrap 요소의 줄 속성을 설정합니다. inherit flex-flow의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 flex-flow Sample flex-flow ..
flex-direction 속성은 요소의 정렬 방향을 정의합니다. Summary 특징 설명 기본 값 row 상속 안됨 애니메이션 안됨 버전 CSS3 Definition flex-direction 속성은 요소의 정렬 방향을 정의합니다. Syntax flex-direction : row | row-reverse | column | column-reverse | inherit; Property 속성 값 설명 row 요소의 정렬을 가로(기본)로 설정합니다. row-reverse 요소의 정렬을 가로 반대로 설정합니다. column 요소의 정렬을 세로로 설정합니다. column-reverse 요소의 정렬을 세로 반대로 설정합니다. inherit flex-direction의 속성 값을 상위요소한테 상속받습니다. Co..
flex-basis 속성은 요소의 기본 단위를 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition flex-basis 속성은 요소의 기본 단위를 정의합니다. Syntax flex-basis : number | auto | inherit; Property 속성 값 설명 number 플렉스 요소의 기본 크기를 설정합니다. auto 플렉스 요소의 크기를 자동으로 설정합니다. inherit 플렉스 요소의 기본 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 flex-grow Sample flex-basis: auto; flex-basis : 10px; flex-basis : 20px; flex-basis : 30p..
flex 속성은 콘텐츠의 성질을 flex로 정의합니다. Summary 특징 설명 기본 값 flex-grow : 0 flex-shrink : 1 flex-basis : auto 상속 안됨 애니메이션 안됨 버전 CSS3 Definition flex 속성은 콘텐츠의 성질을 flex로 정의합니다. Syntax flex : flex-grow | flex-shrink | flex-basis | auto | inherit; Property 속성 값 설명 flex-grow 플렉스 요소의 크기를 늘려줍니다. flex-shrink 플렉스 요소의 크기를 수축시킵니다. flex-basis 플렉스 요소의 기본 단위를 정의합니다. auto 플렉스 요소의 크기를 자동으로 설정합니다. inherit 플렉스 속성 값을 상위요소한테 상..
filter 속성은 이미지의 비쥬얼 효과를 정의합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 가능 버전 CSS3 Definition filter 속성은 이미지의 비쥬얼 효과를 정의합니다. hue-rotate()는 0deg~360deg까지 표현합니다. Syntax filter : none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); Property 속성 값 설명 none 이미지의 아무런 효과를 주지 않습니다. blur(px) 이미지의 블러 효과를 설정합니다. brightness(%)..
empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다. Summary 특징 설명 기본 값 show 상속 가능 애니메이션 안됨 버전 CSS2 Definition empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다. Syntax empty-cells : show | hide | inherit; Property 속성 값 설명 show 빈 셀에 테두리를 표시합니다 hide 빈 셀에 태두리를 표시하지 않습니다. inherit empty-cells의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 empty-cells Sample 테이블1 1 2 테이블2 1 테이블3 1 2 empty-cells : show; empty-cells : hide;
display 속성은 요소의 성질을 정의합니다. Summary 특징 설명 기본 값 inline 상속 안됨 애니메이션 안됨 버전 CSS1 Definition display 속성은 요소의 성질을 정의합니다. Syntax display : inline | block | flex | inline-block | inline-flex | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | inherit; Property 속성 값 설명 ..
direction 속성은 문장의 방향을 설정합니다. Summary 특징 설명 기본 값 ltr 상속 가능 애니메이션 안됨 버전 CSS2 Definition direction 속성은 문장의 방향을 설정합니다. Syntax direction : ltr | rtl | inherit ; Property 속성 값 설명 ltr 문장의 방향을 왼쪽에서 오른쪽으로 설정합니다. rtl 문장의 방향을 오른쪽에서 왼쪽으로 설정합니다. inherit direction의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 direction Sample "The grid system is an aid, not a guarantee. It permits a number of possible use..
cursor 속성은 마우스 오버시 이미지를 정의합니다. Summary 특징 설명 기본 값 auto 상속 가능 애니메이션 안됨 버전 CSS2 Definition cursor 속성은 마우스 오버시 이미지를 정의합니다. Syntax cursor : alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer |..
counter-reset 속성은 콘텐츠의 숫자를 초기화합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS2 Definition counter-reset 속성은 콘텐츠의 숫자를 초기화합니다. Syntax counter-reset : none | name | number | inherit; Property 속성 값 설명 none 콘텐츠의 숫자를 적용하지 않습니다. name 콘텐츠의 이름을 설정합니다. number 콘텐츠의 숫자를 설정합니다. inherit counter-reset의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 counter-reset
counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS2 Definition counter-increment 속성은 콘텐츠의 순서 상태를 정의합니다. Syntax counter-increment : none | id | inherit; Property 속성 값 설명 none 콘텐츠의 순서 상태를 적용하지 않습니다. id 콘텐츠의 순서 상태를 id를 통해 설정합니다. inherit counter-increment의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 counter-increment
content 속성은 콘텐츠 내용을 설정합니다. 특징 설명 기본 값 normal 상속 안됨 애니메이션 안됨 버전 CSS2 Definition content 속성은 콘텐츠 내용을 설정합니다. Syntax content : normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | inherit; Property 속성 값 설명 normal 콘텐츠 내용(기본)을 설정하지 않습니다. none 콘텐츠 내용을 적용하지 않습니다. counter 콘텐츠 내용에 번호를 설정합니다. attr 콘텐츠 내용에 CSS 속성을 설정합니다. string 콘텐츠 내용을 문자열을 설정합니다. open-..
columns 속성은 열의 폭과 열의 수를 정의합니다. Summary 특징 설명 기본 값 column-width : auto; column-count : auto; 상속 안됨 애니메이션 안됨 버전 CSS3 Definition columns 속성은 열의 폭과 열의 수를 정의합니다. Syntax columns : auto | column-width column-count | inherit; Property 속성 값 설명 auto 컬럼을 자동으로 설정합니다. column-width 컬럼의 가로 값을 설정합니다. column-count 컬럼의 갯수를 설정합니다. inherit 컬럼의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column column-width col..
column-width 속성은 컬럼의 가로 값을 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-width 속성은 컬럼의 가로 값을 정의합니다. Syntax column-width : auto | length | inherit; Property 속성 값 설명 auto 컬럼의 크기를 자동(기본값)으로 설정합니다. length 컬럼의 크기를 CSS 단위로 설정합니다. inherit 컬럼의 크기를 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-width Sample "The grid system is an aid, not a guarantee. It permits a number of p..
column-span 속성은 열의 속성을 정의합니다. Summary 특징 설명 기본 값 1 상속 안됨 애니메이션 안됨 버전 CSS3 Definition column-span 속성은 열의 속성을 정의합니다. Syntax column-span : 1 | all | inherit; Property 속성 값 설명 1 기본 컬럼의 위치를 설정합니다. all 컬럼을 하나의 영역으로 설정합니다. inherit column-span의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-rule-width Sample 그리드 시스템이란? "The grid system is an aid, not a guarantee. It permits a number of possible..
column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다. Summary 특징 설명 기본 값 medium 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다. Syntax column-rule-width : medium | thin | thick | length | inherit; Property 속성 값 설명 medium 컬럼의 가로값을 medium(기본값)으로 설정합니다. thin 컬럼의 가로값을 thin으로 설정합니다. thick 컬럼의 가로값을 thick으로 설정합니다. length 컬럼의 가로값을 CSS 단위로 설정합니다. inherit 컬럼의 가로 속성 값을 상위요소한테 상속받습니다. Compatib..
column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS3 Definition column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다. Syntax column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit; Property 속성 값 설명 none 컬럼 테두리 스타일을 설정하지 않습니다. hidden 컬럼 테두리 스타일을 숨김으로 설정합니다. dotted 컬럼 테두리 스타일을 dotted(점선)로 설정합니다. dashed 컬럼 테두리 스타일을 dash..
column-rule-color 속성은 컬럼의 라인 색을 정의합니다. Summary 특징 설명 기본 값 현재 색 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-rule-color 속성은 컬럼의 라인 색을 정의합니다. Syntax column-rule-color : color | inherit; Property 속성 값 설명 color 컬럼의 색을 설정합니다. inherit column-rule-color의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-rule-color Sample "The grid system is an aid, not a guarantee. It permits a number of possible use..
column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다. Summary 특징 설명 기본 값 column-rule-width : medium; column-rule-style : none; column-rule-color : color; 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다. Syntax column-rule : column-rule-width | column-rule-style | column-rule-color | inherit; Property 속성 값 설명 column-rule-width 컬럼 라인의 가로 값을 설정합니다. column-rule-style 컬럼 라인의 스타일을 설..
column-gap 속성은 열의 간격을 정의합니다. Summary 특징 설명 기본 값 normal 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-gap 속성은 열의 간격을 정의합니다. Syntax column-gap : length | normal | inherit; Property 속성 값 설명 length 컬럼의 간격을 CSS 단위로 설정합니다. normal 컬럼의 간격을 기본 값으로 설정합니다. inherit 컬럼의 간격을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-gap Sample "The grid system is an aid, not a guarantee. It permits a number of possible use..
column-fill 속성은 열의 지정방법을 정의합니다. Summary 특징 설명 기본 값 balance 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-fill 속성은 열의 지정방법을 정의합니다. Syntax column-fill : balance | auto | inherit; Property 속성 값 설명 balance 컬럼의 영역을 균형있게 설정합니다. number 컬럼의 영역을 숫자로 설정합니다. inherit column-fill의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-fill Sample "The grid system is an aid, not a guarantee. It permits a number o..
column-count 속성은 컬럼의 수를 정의합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS3 Definition column-count 속성은 컬럼의 수를 정의합니다. Syntax column-count : number | auto | inherit; Property 속성 값 설명 number 컬럼의 갯수를 숫자로 설정합니다. auto 컬럼의 갯수를 열 크기(기본 값)에 따라 설정합니다. inherit column-count의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 column-count Sample "The grid system is an aid, not a guarantee. It permits a numb..
color 속성은 요소의 글씨 색을 설정합니다. Summary 특징 설명 기본 값 없음 상속 가능 애니메이션 가능 버전 CSS1 Definition color 속성은 요소의 글씨 색을 설정합니다. Syntax color : color | inherit; Property 속성 값 설명 color 폰트 컬러 값을 설정합니다. inherit color의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 color Sample "The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to h..
clip 속성은 절대 요소의 위치 값을 지정합니다. Summary 특징 설명 기본 값 auto 상속 안됨 애니메이션 가능 버전 CSS2 Definition clip 속성은 절대 요소의 위치 값을 지정합니다. clip 속성은 position 요소와 같이 사용합니다. Syntax clip : auto | shape | inherit; Property 속성 값 설명 auto clip의 기본값(auto)으로 설정합니다. shape clip을 설정을 shape를 통해 설정합니다. inherit clip의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 clip Sample top clip : auto; clip : rect(0px, 25px, 25px ,0px); clip ..
clear 속성은 float 요소의 성질을 차단합니다. Summary 특징 설명 기본 값 none 상속 안됨 애니메이션 안됨 버전 CSS1 Definition clear 속성은 float 요소의 성질을 차단합니다. Syntax clear: none | left | right | both | inherit; Property 속성 값 설명 none clear를 적용하지 않습니다. left 왼쪽 요소에 성질을 차단합니다. right 오른쪽 요소에 성질을 차단합니다. both 양쪽 요소에 성질을 차단합니다. inherit clear의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 clear
caption-side 속성은 caption의 위치를 설정합니다. Summary 특징 설명 기본 값 top 상속 가능 애니메이션 안됨 버전 CSS2 Definition caption-side 속성은 caption의 위치를 설정합니다. Syntax caption-side : top | bottom | inherit; Property 속성 값 설명 top 테이블 caption의 위치를 위쪽(기본값)으로 설정합니다. bottom 테이블 caption의 위치를 아래쪽으로 설정합니다. inherit z-index의 속성 값을 상위요소한테 상속받습니다. Compatibility 6 7 8 9 10 11 caption-side Sample 테이블 제목 테이블1 1 2 테이블2 1 2 테이블3 1 2 caption-s..
box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다. Summary 특징 설명 기본 값 content-box 상속 안됨 애니메이션 안됨 버전 CSS3 Definition box-sizing 속성은 크기 및 높이 여부의 포함을 설정합니다. 블록요소에 width 값은 padding, border, margin이 포함된 값입니다. 즉 width 값은 100% 값을 초과 할 수 있지만 border-box을 설정하면 width 값은 100%를 초과 할 수 없습니다. Syntax box-sizing : content-box | border-box | inherit; Property 속성 값 설명 content-box 요소에 border, padding 값이 포함되어 있지 않습니다. border-box..