본문 바로가기

Webstoryboy

Category

Explanation

분류 전체보기

(864)
[CSS] columns columns columns 속성은 열의 폭과 열의 수를 정의합니다. columns columns 속성은 열의 폭과 열의 수를 정의합니다. 특징 설명 기본 값 column-width : auto; column-count : auto; 적용 column 버전 CSS3 정의(Definition) columns 속성은 열의 폭과 열의 수를 정의합니다. column-width와 column-count를 같이 사용할 경우 count가 우선 적용됩니다. 문법(Syntax) columns : auto | column-width | column-count /* 단위 속성이 있는 경우 : column-width 설정 */ columns: 12em; /* 단위 속성이 없는 경우 : column-count 설정 */ col..
[CSS] column-width column-width column-width 속성은 컬럼의 가로 값을 정의합니다. column-width column-width 속성은 컬럼의 가로 값을 정의합니다. 특징 설명 기본 값 column-width : auto; 적용 column 버전 CSS3 정의(Definition) column-span 속성은 컬럼의 가로 값을 정의합니다. 문법(Syntax) column-width : auto | length /* 키워드 속성을 사용하는 경우 */ column-width : auto; /* 단위 속성을 사용하는 경우 */ column-width : 100px; column-width : 40vw; column-width : 6rem; /* 글로벌 속성을 사용하는 경우 */ column-width: in..
[CSS] column-span column-span column-span 속성은 열의 속성을 정의합니다. column-span column-span 속성은 열의 속성을 정의합니다. 특징 설명 기본 값 column-span : none; 적용 column 버전 CSS3 정의(Definition) column-span 속성은 열의 속성을 정의합니다. 문법(Syntax) column-span : none | all /* 키워드 속성을 적용한 경우 */ column-span: none; column-span: all; /* 글로벌 속성을 적용한 경우 */ column-span: inherit; column-span: initial; column-span: unset; 속성(Property) 속성값 설명 none 기본 컬럼의 위치를 설정합니다..
[CSS] column-rule-width column-rule-width column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다. column-rule-width column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다. 특징 설명 기본 값 column-rule-width : medium; 적용 column 버전 CSS3 정의(Definition) column-rule-width 속성은 컬럼 라인의 가로값을 정의합니다. 문법(Syntax) column-rule-width : medium | thin | thick | length /* 키워드 속성을 이용하는 경우 */ column-rule-width: thin; column-rule-width: medium; column-rule-width: thick; /* 단위..
[CSS] column-rule-style column-rule-style column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다. column-rule-style column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다. 특징 설명 기본 값 column-rule-style : none; 적용 column 버전 CSS3 정의(Definition) column-rule-style 속성은 컬럼 라인의 스타일을 정의합니다. 문법(Syntax) column-rule-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset /* 테두리 스타일 속성을 사용하는 경우 */ column-rule-style: none; colu..
[CSS] column-rule-color column-rule-color column-rule-color 속성은 컬럼의 라인 색을 정의합니다. column-rule-color column-rule-color 속성은 컬럼의 라인 색을 정의합니다. 특징 설명 기본 값 column-rule-color : correntColor; 적용 column 버전 CSS3 정의(Definition) column-rule-color 속성은 컬럼의 라인 색을 정의합니다. 문법(Syntax) column-rule-color : color /* 키워드 컬러 속성을 사용하는 경우 */ column-rule-color: red; /* rgba 속성을 사용하는 경우 */ column-rule-color: rgb(46, 23, 0); column-rule-color: rgba..
[CSS] column-rule column-rule column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다. column-rule column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다. 특징 설명 기본 값 column-rule-width : medium; column-rule-style : none; column-rule-color : color; 적용 column 버전 CSS3 정의(Definition) column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다. 문법(Syntax) column-rule : column-rule-width | column-rule-style | column-rule-color /* 한 가지 속성 column-rule-style을 적용한 ..
[CSS] column-gap column-gap column-gap 속성은 컬럼의 간격을 정의합니다. column-gap column-gap 속성은 컬럼의 간격을 정의합니다. 특징 설명 기본 값 column-gap : normal 적용 column 버전 CSS3 정의(Definition) column-gap 속성은 열의 간격을 정의합니다. 처음에는 grid-column-gap 속성으로 사용하였지만 현재는 grid가 생략되어 column-gap으로 사용합니다. grid 속성에서 간격을 주기 위해서는 grid-column-gap으로 사용합니다. 문법(Syntax) column-gap : length | normal /* 키워드 속성을 사용한 경우 */ column-gap: normal; /* 단위 속성을 사용한 경우 */ column-..
[CSS] column-fill column-fill column-fill 속성은 열의 지정방법을 정의합니다. column-fill column-fill 속성은 열의 지정방법을 정의합니다. 특징 설명 기본 값 column-fill : balance 적용 column 버전 CSS3 정의(Definition) column-fill 속성은 열의 지정방법을 정의합니다. 문법(Syntax) column-fill : auto | balance | balance-all /* 키워드 속성을 사용하는 경우 */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* 글로벌 속성을 사용하는 경우 */ column-fill: inherit; column-fill: initial; col..
[CSS] column-count column-count column-count 속성은 컬럼의 수를 정의합니다. column-count column-count 속성은 컬럼의 수를 정의합니다. 특징 설명 기본 값 column-count : auto 적용 column 버전 CSS3 정의(Definition) column-count 속성은 컬럼의 수를 정의합니다. 문법(Syntax) column-count : number | auto /* 키워드 속성을 적용한 경우 */ column-count: auto; /* 숫자 속성을 적용한 경우 */ column-count: 4; /* 글로벌 속성을 적용한 경우 */ column-count: inherit; column-count: initial; column-count: unset; 속성(Proper..
[CSS] color color color 속성은 글씨 색을 설정합니다. color color 속성은 글씨 색을 설정합니다. 특징 설명 기본 값 color : 브라우저마다 다양함(브라우저 기본 색) 적용 font 버전 CSS1 정의(Definition) color 속성은 글씨 색을 설정합니다. font-color 속성은 존재하지 않습니다. 문법(Syntax) color : color 속성(Property) 속성값 설명 color 폰트 컬러 값을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 color 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] clip clip clip 속성은 보이는 영역을 설정합니다. clip clip 속성은 보이는 영역을 설정합니다. 특징 설명 기본 값 clip : auto 적용 - 버전 CSS2 정의(Definition) clip 속성은 절대 요소의 위치 값을 지정합니다. clip 속성은 position 요소와 같이 사용합니다. clip 속성은 웹 표준에서 삭제되어 현재는 사용하지 않습니다. 문법(Syntax) clip : auto | shape 속성(Property) 속성값 설명 auto clip의 기본값(auto)으로 설정합니다. shape clip을 설정을 shape를 통해 설정합니다.. 호환성(Compatibility) 6 7 8 9 10 11 clip 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용가능..
[CSS] clear clear clear 속성은 float 요소의 성질을 차단합니다. clear clear 속성은 float 요소의 성질을 차단합니다. 특징 설명 기본 값 clear : none 적용 table 버전 CSS3 정의(Definition) clear 속성은 float 요소의 성질을 차단합니다. 문법(Syntax) clear: none | left | right | both 속성(Property) 속성값 설명 none clear를 적용하지 않습니다. left 왼쪽 요소에 성질을 차단합니다. right 오른쪽 요소에 성질을 차단합니다. both 양쪽 요소에 성질을 차단합니다. 호환성(Compatibility) 6 7 8 9 10 11 clear 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] caret-color caret-color caret-color 속성은 input의 커서 색을 정의합니다. caret-color caret-color 속성은 input의 커서 색을 정의합니다. 특징 설명 기본 값 caret-color : auto 적용 table 버전 CSS3 정의(Definition) caret-color 속성은 input의 커서 색을 정의합니다. 문법(Syntax) caret-color: auto | color; 속성(Property) 속성값 설명 auto 현재 커서 색을 사용합니다.(기본값) color 커서 색을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 caret-color 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사..
[CSS] caption-side caption-side caption-side 속성은 caption의 위치를 설정합니다. caption-side caption-side 속성은 caption의 위치를 설정합니다. 특징 설명 기본 값 caption-side : top 적용 table 버전 CSS3 정의(Definition) caption-side 속성은 caption의 위치를 설정합니다. 문법(Syntax) caption-side : top | bottom 속성(Property) 속성값 설명 top 테이블 caption의 위치를 위쪽(기본값)으로 설정합니다. bottom 테이블 caption의 위치를 아래쪽으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 caption-side 사용가능 사용가능 사용가능 사용가능..
[CSS] box-sizing box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. box-sizing box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. 특징 설명 기본 값 box-sizing : content-box 적용 box 버전 CSS3 사용성 정의(Definition) box-sizing 속성은 요소 크기에 패딩 포함 여부를 설정합니다. 박스 요소의 width 값은 margin, padding, border 값을 포함하여 계산합니다. box-sizing: border-box로 설정할 경우 박스 요소의 width 값은 margin, border 값을 포함하여 계산합니다. padding 값은 제외됩니다. 문법(Syntax) box-sizing: content-box | bo..
[CSS] box-shadow box-shadow box-shadow 속성은 박스 요소의 그림자를 설정합니다. box-shadow box-shadow 속성은 박스 요소의 그림자를 설정합니다. 특징 설명 기본 값 box-shadow : none 적용 - 버전 CSS3 정의(Definition) box-shadow 속성은 박스 요소의 그림자를 설정합니다. 문법(Syntax) box-shadow : none | h-shadow | v-shadow | blur | spread | color | inset /* h-shadow | v-shadow | color를 설정한 경우 */ box-shadow: 10px 20px #ccc; /* h-shadow | v-shadow | blur | color를 설정한 경우 */ box-shadow: 10p..
[CSS] box-decoration-break box-decoration-break box-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다. box-decoration-break box-decoration-break 속성은 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다. 특징 설명 기본 값 box-decoration-break : slice 적용 - 버전 CSS3 정의(Definition) box-decoration-break 속성은 위치 요소의 아래쪽 속성을 설정합니다. 문법(Syntax) box-decoration-break: slice | clone 속성(Property) 속성값 설명 slice 하나의 테두리와 패딩이 모든 박스에 적용된다. clone 각각의 테두리 및 패딩이 독립적으로 적용된다. ..
[CSS] bottom bottom bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다. bottom bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다. 특징 설명 기본 값 bottom-width : medium bottom-style : none bottom-color : currentColor 적용 border 버전 CSS3 정의(Definition) bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다. 문법(Syntax) bottom : auto | length 속성(Property) 속성값 설명 auto 요소의 아래쪽 값을 자동(기본)으로 설정합니다. length 요소의 아래쪽 값을 CSS 단위를 통해 설정합니다. percentage 요소의 아래쪽 값을 %로 설정합니다. 호환성(Compatibility..
[CSS] border-width border-width border-width 속성은 테두리 두께 속성을 설정합니다. border-width border-width 속성은 테두리 두께 속성을 설정합니다. 특징 설명 기본 값 border-width-width : medium border-width-style : none border-width-color : currentColor 적용 border 버전 CSS3 사용성 정의(Definition) border-width 속성은 테두리 두께 속성을 설정합니다. 비교(Compare) border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. border-bottom-width 속성은 테두리 아래쪽 ..
[CSS] border-top-width border-top-width border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. border-top-width border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. 특징 설명 기본 값 border-top-width : medium 적용 border 버전 CSS1 사용성 정의(Definition) border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. 비교(Compare) border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다. border-left-width 속..
[CSS] border-top-style border-top-style border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다. border-top-style border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다. 특징 설명 기본 값 border-top-style : none 적용 border 버전 CSS1 사용성 정의(Definition) border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다. 비교(Compare) border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다. border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다. border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다. border-left-sty..
[CSS] border-top-right-radius border-top-right-radius border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. border-top-right-radius border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 border-top-right-radius : 0 적용 border 버전 CSS1 사용성 정의(Definition) border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. 비교(Compare) border-radius 속성은 모서리 굴곡을 설정합니다. border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. border-top-right-radius 속성은..
[CSS] border-top-left-radius border-top-left-radius border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. border-top-left-radius border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. 특징 설명 기본 값 border-top-left-radius : 0 적용 border 버전 CSS1 사용성 정의(Definition) border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. 비교(Compare) border-radius 속성은 모서리 굴곡을 설정합니다. border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. border-top-right-radius 속성은 윗부분 오른쪽 ..
[CSS] border-top-color border-top-color border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다. border-top-color border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다. 특징 설명 기본 값 border-top-color : currentColor 상속 안됨 애니메이션 가능 적용 border 버전 CSS3 사용성 정의(Definition) border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다. 비교(Compare) border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다. border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다. border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다. bord..
[CSS] border-top border-top border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. border-top border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 border-top-width : medium border-top-style : none border-top-color : currentColor 적용 border 버전 CSS3 사용성 정의(Definition) border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. 비교(Compare) border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다. border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 ..
[CSS] border-style border-style border-style 속성은 테두리 스타일 속성을 설정합니다. border-style border-style 속성은 테두리 스타일 속성을 설정합니다. 특징 설명 기본 값 border-top-style : none border-right-style : none border-bottom-style : none border-left-style : none 적용 border 버전 CSS2 사용성 정의(Definition) border-style 속성은 테두리 스타일 속성을 설정합니다. 비교(Compare) border-top-style는 속성은 테두리 위쪽 스타일 속성을 설정합니다. border-right-style는 속성은 테두리 오른쪽 스타일 속성을 설정합니다. border-bott..
[CSS] border-spacing border-spacing border-spacing 속성은 테이블의 테두리 간격을 설정합니다. border-spacing border-spacing 속성은 테이블의 테두리 간격을 설정합니다. 특징 설명 기본 값 border-spacing : medium 적용 table 버전 CSS2 시각적 표현 테이블 테두리 간격 조정 사용성 정의(Definition) border-spacing 속성은 테이블의 테두리 간격을 설정합니다. 테이블과 관련된 태그 및 속성(Table Related Tags and Property) 태그는 표를 설정합니다. 태그는 표의 제목을 설정합니다. 태그는 표의 헤더 영역을 그룹화합니다. 태그는 표의 본문 영역을 그룹화합니다. 태그는 표의 푸터 영역을 그룹화합니다. 태그는 표의 행을 설..
[CSS] border-right-width border-right-width border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. border-right-width border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. 특징 설명 기본 값 border-right-width : medium 적용 border 버전 CSS1 사용성 정의(Definition) border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. 비교(Compare) border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다. bord..
[CSS] border-right-style border-right-style border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다. border-right-style border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다. 특징 설명 기본 값 border-right-style : none 적용 border 버전 CSS1 사용성 정의(Definition) border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다. 비교(Compare) border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다. border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다. border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다. ..