본문 바로가기

Webstoryboy

Category

Explanation

CSS

 (238)
[CSS] grid-column-start grid-column-start grid-column-start 속성은 grid-column-start grid-column-start 특징 설명 기본 값 grid-column-start : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-column-start 속성은 문법(Syntax) grid-column-start /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 reset grid-column-start: 1; grid-column-start: 2; grid-column-start: 3; grid-column-start: span 2; grid-..
[CSS] grid-column-gap grid-column-gap grid-column-gap 속성은 grid-column-gap grid-column-gap 특징 설명 기본 값 grid-column-gap : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-column-gap 속성은 문법(Syntax) grid-column-gap /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 reset grid-column-gap: 0; grid-column-gap: 10px; grid-column-gap: 2em; grid-column-gap: 1%; HTML box1 box2 box3 box4 b..
[CSS] grid-column-end grid-column-end grid-column-end 속성은 grid-column-end grid-column-end 특징 설명 기본 값 grid-column-end : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-column-end 속성은 문법(Syntax) grid-row-end /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-column-end: 2; grid-column-end: 3; grid-column-end: 4; grid-column-end: 1; grid-column-end: span 2; grid-..
[CSS] grid-column grid-column grid-column 속성은 grid-column-start와 grid-column-end 속성을 같이 사용합니다. grid-column grid-column 특징 설명 기본 값 grid-column : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-column 속성은 문법(Syntax) grid-column /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-column: 1; grid-column: 2; grid-column: 3; grid-column: 4; grid-column: 1 / 3; gr..
[CSS] grid-auto-rows grid-auto-rows grid-auto-rows grid-auto-rows grid-auto-rows 특징 설명 기본 값 grid-auto-rows : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-auto-rows 속성은 문법(Syntax) grid-auto-rows /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-auto-rows: 100px; grid-auto-rows: 200px; grid-auto-rows: auto; grid-auto-rows: min-content; grid-auto-rows: minma..
[CSS] grid-auto-flow grid-auto-flow grid-auto-flow grid-auto-flow grid-auto-flow 특징 설명 기본 값 grid-auto-flow : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-auto-flow 속성은 문법(Syntax) grid-auto-flow /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; grid-auto-flow: row dense; grid-auto-flow: column ..
[CSS] grid-auto-columns grid-auto-columns grid-auto-columns grid-auto-columns grid-auto-columns 특징 설명 기본 값 grid-auto-columns : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-auto-columns 속성은 문법(Syntax) grid-auto-columns /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-auto-columns: 200px grid-auto-columns: 300px grid-auto-columns: 400px grid-auto-columns: 10%..
[CSS] grid-area grid-area grid-area grid-area grid-area 특징 설명 기본 값 grid-area : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-area 속성은 문법(Syntax) grid-area /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 reset grid-area: a / a / a / a; grid-area: b / b / b / b; grid-area: c / c / c / c; grid-area: a / a / b / b; grid-area: 2 / 1 / 2 / 4; HTML box1 CSS .grid { background: #f3e5f5; padding: 2..
[CSS] grid grid-template-columns grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다. grid-template-columns grid-template-columns 속성은 가로 컬럼의 크기와 위치 설정합니다. 특징 설명 기본 값 grid-template-columns : 0 적용 Grid 버전 CSS3 사용성 정의(Definition) grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다. 그리드와 관련된 속성(Grid Related Properties) grid 속성은 그리드 레이아웃 속성을 설정합니다. grid-area 속성은 grid-auto-columns 속성은 grid-auto-flow 속성은 grid-auto-rows 속성은 ..
[CSS] font-weight font-weight font-weight 속성은 폰트의 두께를 정의합니다. font-weight font-weight 속성은 폰트의 두께를 정의합니다. 특징 설명 기본 값 font-weight : normal 상속 가능 애니메이션 가능 적용 font 버전 CSS1 정의(Definition) font-weight 속성은 폰트의 두께를 정의합니다. font-weight 속성은 폰트 자체가 두께를 지원하지 않으면, 세부적인 두께는 표시되지 않을 수 있습니다. 문법(Syntax) font-weight : normal | bold | bolder | lighter | number 속성(Property) 속성값 설명 normal 폰트 두께를 normal(기본값) 설정합니다. bold 폰트 두께를 bold로 설정합..
[CSS] font-variant font-variant font-variant 속성은 글꼴의 변형을 정의합니다. font-variant font-variant 속성은 글꼴의 변형을 정의합니다. 특징 설명 기본 값 font-variant : normal 적용 font 버전 CSS1 정의(Definition) font-variant 속성은 글꼴의 변형을 정의합니다. font-variant 속성은 영어만 적용됩니다. 문법(Syntax) font-variant : normal | small-caps 속성(Property) 속성값 설명 normal 텍스트의 기본값을 설정합니다. small-caps 영문 소문자를 작은 대문자로 변경합니다. 호환성(Compatibility) 6 7 8 9 10 11 font-variant 사용가능 사용가능 사용가능..
[CSS] font-style font-style font-style 속성은 폰트의 스타일을 정의합니다. font-style font-style 속성은 폰트의 스타일을 정의합니다. 특징 설명 기본 값 font-style : normal 적용 font 버전 CSS3 정의(Definition) font-style 속성은 폰트의 스타일을 정의합니다. 문법(Syntax) font-style : normal | italic | oblique 속성(Property) 속성값 설명 normal 폰트 스타일을 기본값으로 설정합니다. italic 폰트 스타일을 italic으로 설정합니다. oblique 폰트 스타일을 oblique으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 font-style 사용가능 사용가능 사용가능 ..
[CSS] font-stretch font-stretch font-stretch 속성은 폰트의 굵기를 정의합니다. font-stretch font-stretch 속성은 폰트의 굵기를 정의합니다. 특징 설명 기본 값 font-stretch : normal 적용 font 버전 CSS3 정의(Definition) font-stretch 속성은 폰트의 굵기를 정의합니다. 문법(Syntax) font-stretch : ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded 속성(Property) 속성값 설명 ultra-condensed 글자의 굵기를 ultra-con..
[CSS] font-size-adjust font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. font-size-adjust font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. 특징 설명 기본 값 font-size-adjust : none 적용 font 버전 CSS3 정의(Definition) font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다. 폰트 크기는 대문자를 기준으로 측정이 되지만 CSS3에서 추가된 font-size-adjust 소문자를 기준으로 폰트 크기를 설정 할 수 있습니다. 문법(Syntax) font-size-adjust : number | none 속성(Property) 속성값 설명 number 소문자 크기를 기..
[CSS] font-size font-size font-size 속성은 폰트 사이즈 속성을 설정합니다. font-size font-size 속성은 폰트 사이즈 속성을 설정합니다. 특징 설명 기본 값 font-size : medium 적용 font 버전 CSS1 정의(Definition) font-size 속성은 폰트 사이즈 속성을 설정합니다. 문법(Syntax) font-size : medium | xx-small | x-small | small | large|x-large | xx-large | smaller | larger | length 속성(Property) 속성값 설명 xx-small 폰트 크기를 xx-small로 설정합니다. x-small 폰트 크기를 x-small로 설정합니다. small 폰트 크기를 small로 설정합..
[CSS] font-family font-family font-family 속성은 폰트 종류를 설정합니다. font-family font-family 속성은 폰트 종류를 설정합니다. 특징 설명 기본 값 font-family : 사용자 설정에 따름 버전 CSS1 정의(Definition) font-family 속성은 폰트 종류를 설정합니다. 사용자 컴퓨터에 서체가 설치돼 있어야 서체가 브라우저에 표현됩니다. 폰트가 없을 경우를 대비해 쉼표(,)를 통해 여러개의 폰트를 설정가능합니다. 폰트명이 한글이거나 여러 단어인 경우는 큰따옴표("")를 설정해야 합니다. 문법(Syntax) font-family : font 속성(Property) 속성값 설명 font 폰트 속성을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 ..
[CSS] font font font 속성은 폰트에 관한 설정을 정의합니다. font font 속성은 폰트에 관한 설정을 정의합니다. 특징 설명 기본 값 font-style : normal font-variant : normal font-weight : normal font-size : medium line-height : normal font-family : 사용자 설정에 따름 버전 CSS1 정의(Definition) font 속성은 폰트에 관한 설정을 정의합니다. font 속성은 폰트 스타일, 폰트 변형, 폰트 두께, 폰트 사이즈, 폰트 간격, 폰트 종류를 설정합니다. 문법(Syntax) font : font-style / font-variant / font-weight / font-stretch / font-size ..
[CSS] float float float 속성은 블록요소의 정렬 상태를 설정합니다. float float 속성은 블록요소의 정렬 상태를 설정합니다. 특징 설명 기본 값 float : none 버전 CSS1 정의(Definition) float 속성은 블록요소의 정렬 상태를 설정합니다. 문법(Syntax) float : none | left | right 속성(Property) 속성값 설명 none float의 성질을 적용하지 않습니다. left 블록요소를 왼쪽으로 정렬합니다. right 블록요소를 오른쪽으로 정렬합니다. 호환성(Compatibility) 6 7 8 9 10 11 float 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] flex-wrap flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다. flex-wrap flex-wrap 속성은 요소의 줄 속성을 설정합니다. 특징 설명 기본 값 flex-wrap : nowrap 적용 flex 버전 CSS3 정의(Definition) flex-wrap 속성은 요소의 줄 속성을 설정합니다. flex-wrap의 속성이 nowrap을 설정되어 있다면 요소의 width값과 height값은 무시가 됩니다. 문법(Syntax) flex-wrap : nowrap | wrap | wrap-reverse 속성(Property) 속성값 설명 nowrap 요소 크기에 상관없이 한 줄에 설정합니다. wrap 요소 크기에 맞게 설정합니다. wrap-reverse 요소 크기에 맞게 반대로 설정합니다. 호환성..
[CSS] flex-shrink flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. flex-shrink flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. 특징 설명 기본 값 flex-shrink : 1 적용 flex 버전 CSS3 정의(Definition) flex-shrink 속성은 요소의 크기를 숫자를 통해 줄여줍니다. flex-shrink: 0;을 사용하면 flex-basis의 속성값을 설정합니다. 문법(Syntax) flex-shrink : number 속성(Property) 속성값 설명 number 요소의 크기를 숫자를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 flex-shrink 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 ..
[CSS] flex-grow flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. flex-grow flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. 특징 설명 기본 값 flex-grow : 0 적용 flex 버전 CSS3 정의(Definition) flex-grow 속성은 요소의 크기를 숫자를 통해 정의합니다. 문법(Syntax) flex-grow : number 속성(Property) 속성값 설명 number 요소의 크기를 숫자를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 flex-grow 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능
[CSS] flex-flow flex-flow flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. flex-flow flex-flow 속성은 요소의 정렬 방향 flex-direction와 줄 속성 flex-wrap을 같이 설정합니다. 특징 설명 기본 값 flex-direction : row flex-wrap : nowrap 적용 flex 버전 CSS3 정의(Definition) flex-flow 속성은 요소의 정렬 방향과 줄 속성을 설정합니다. 문법(Syntax) flex-flow : flex-direction | flex-wrap 속성(Property) 속성값 설명 flex-direction 요소의 정렬 방향을 설정합니다. flex-wrap 요소의 줄 속성을 설정합니다. 호환성(Compatibility) 6 7 8..
[CSS] flex-direction flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다. flex-direction flex-direction 속성은 요소의 정렬 방향을 정의합니다. 특징 설명 기본 값 flex-direction : row 적용 flex 버전 CSS3 정의(Definition) flex-direction 속성은 요소의 정렬 방향을 정의합니다. 문법(Syntax) flex-direction : row | row-reverse | column | column-reverse 속성(Property) 속성값 설명 row 요소의 정렬을 가로(기본)로 설정합니다. row-reverse 요소의 정렬을 가로 반대로 설정합니다. column 요소의 정렬을 세로로 설정합니다. column-reverse ..
[CSS] flex-basis flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다. flex-basis flex-basis 속성은 요소의 기본 단위를 정의합니다. 특징 설명 기본 값 flex-basis : auto 적용 flex 버전 CSS3 정의(Definition) flex-basis 속성은 요소의 기본 단위를 정의합니다. 문법(Syntax) flex-basis : number | auto 속성(Property) 속성값 설명 number 플렉스 요소의 기본 크기를 설정합니다. auto 플렉스 요소의 크기를 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 flex-basis 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용..
[CSS] flex flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다. flex flex 속성은 콘텐츠의 성질을 flex로 정의합니다. 특징 설명 기본 값 flex-grow : 0 flex-shrink : 1 flex-basis : auto 적용 flex 버전 CSS3 정의(Definition) flex 속성은 콘텐츠의 성질을 flex로 정의합니다. 문법(Syntax) flex : flex-grow | flex-shrink | flex-basis | auto /* 단위가 없는 속성을 한 개만 사용한 경우 : flex-grow 표현 */ flex: 2; /* 단위가 있는 속성을 한 개만 사용한 경우 : flex-basis 표현 */ flex: 100px; /* 단위가 없는 속성을 두 개 사용한 경우 : flex-..
[CSS] filter filter filter 속성은 그래픽 효과를 설정합니다. filter filter 속성은 그래픽 효과를 설정합니다. 특징 설명 기본 값 filter : none 버전 CSS3 사용성 정의(Definition) filter 속성은 그래픽 효과를 설정합니다. hue-rotate()는 0deg~360deg까지 표현합니다. 문법(Syntax) filter : none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() /* 기본 속성 */ filter : none; filter : blur(); filter : brigh..
[CSS] empty-cells empty-cells empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다. empty-cells empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다. 특징 설명 기본 값 empty-cells : show 적용 table 버전 CSS2 정의(Definition) empty-cells 속성은 테이블의 빈요소의 속성을 설정합니다. 문법(Syntax) empty-cells : show | hide 속성(Property) 속성값 설명 show 빈 셀에 테두리를 표시합니다 hide 빈 셀에 테두리를 표시하지 않습니다. 호환성(Compatibility) 6 7 8 9 10 11 empty-cells 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용..
[CSS] display display display 속성은 요소의 성질을 정의합니다. display display 속성은 요소의 성질을 정의합니다. 특징 설명 기본 값 display : 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-r..
[CSS] direction direction direction 속성은 문장의 방향을 설정합니다. direction direction 속성은 문장의 방향을 설정합니다. 특징 설명 기본 값 direction : ltr 버전 CSS2 정의(Definition) direction 속성은 문장의 방향을 설정합니다. 문법(Syntax) direction : ltr | rtl 속성(Property) 속성값 설명 ltr 문장의 방향을 왼쪽에서 오른쪽으로 설정합니다. rtl 문장의 방향을 오른쪽에서 왼쪽으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 direction 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] cursor cursor cursor 속성은 마우스 오버시 마우스 포인터를 정의합니다. cursor cursor 속성은 마우스 오버시 마우스 포인터를 정의합니다. 특징 설명 기본 값 cursor : 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 | nw..
1 2 3 4 5 6 7 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바