본문 바로가기

Webstoryboy

Category

Explanation

CSS

 (238)
[CSS] mix-blend-mode mix-blend-mode mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다. mix-blend-mode mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다. 특징 설명 기본 값 mix-blend-mode : normal 버전 CSS3 사용성 정의(Definition) mix-blend-mode 속성은 배경의 혼합 상태를 정의합니다. blend-mode는 크게 background-blend-mode와 mix-blend-mode로 설정됩니다. 포토샵의 브렌드 모드와 동일한 효과입니다. 비교(Compare) background-blend 속성은 background 속성을 통한 이미지의 혼합 상태를 설정합니다. mix-blend-mode 속성은 태그를 통한 이미지의 혼합 상태를 설정..
[CSS] min-width min-width min-width 속성은 요소의 최소 가로 값을 설정합니다. min-width min-width 속성은 요소의 최소 가로 값을 설정합니다. 특징 설명 기본 값 min-width : 0 버전 CSS2 정의(Definition) min-width 속성은 요소의 최소 가로 값을 설정합니다. 문법(Syntax) min-width : length | % 속성(Property) 속성값 설명 length 최소 width 값을 CSS 단위를 통해 설정합니다. % 최소 width 값을 %를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 min-width 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] min-height min-height min-height 속성은 요소의 최소 세로 값을 설정합니다. min-height min-height 속성은 요소의 최소 세로 값을 설정합니다. 특징 설명 기본 값 min-height : 0 버전 CSS2 정의(Definition) min-height 속성은 요소의 최소 세로 값을 설정합니다. 문법(Syntax) min-height : length | % 속성(Property) 속성값 설명 length 최소 width 값을 CSS 단위를 통해 설정합니다. % 최소 width 값을 %를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 min-height 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] max-width max-width max-width 속성은 요소의 최대 가로 값을 설정합니다. max-width max-width 속성은 요소의 최대 가로 값을 설정합니다. 특징 설명 기본 값 max-width : auto; 버전 CSS2 정의(Definition) max-width 속성은 요소의 최대 가로 값을 설정합니다. 문법(Syntax) max-width : none | length | % 속성(Property) 속성값 설명 none max-width 값을 적용하지 않습니다. length max-width 값을 CSS 단위를 통해 설정합니다. % max-width 값을 %를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 max-width 사용가능 사용가능 사용가능 사용가능 사용가능 ..
[CSS] max-height max-height max-height 속성은 요소의 최대 세로값을 설정합니다. max-height max-height 속성은 요소의 최대 세로값을 설정합니다. 특징 설명 기본 값 max-height : auto; 버전 CSS2 정의(Definition) max-height 속성은 요소의 최대 세로값을 설정합니다. 문법(Syntax) max-height : none | length | % 속성(Property) 속성값 설명 none max-height 값을 적용하지 않습니다. length max-height 값을 CSS 단위를 통해 설정합니다. % max-height 값을 %를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 max-height 사용가능 사용가능 사용가능 사용..
[CSS] margin-top margin-top margin-top 속성은 요소의 위부분 바같쪽 여백을 설정합니다. margin-top margin-top 속성은 요소의 위부분 바같쪽 여백을 설정합니다. 특징 설명 기본 값 margin-top : 0; 버전 CSS1 정의(Definition) margin-top 속성은 요소의 위부분 바같쪽 여백을 설정합니다. 문법(Syntax) margin-top : length | % | auto 속성(Property) 속성값 설명 length 요소의 바같쪽 여백을 CSS단위를 통해 설정합니다. % 요소의 바같쪽 여백을 %를 통해 설정합니다. auto 요소의 바같쪽 여백을 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 margin-top 사용가능 사용가능 사용가능..
[CSS] margin-right margin-right margin-right 속성은 요소의 오른쪽 바같쪽 여백을 설정합니다. margin-right margin-right 속성은 요소의 오른쪽 바같쪽 여백을 설정합니다. 특징 설명 기본 값 margin-right : 0; 버전 CSS1 정의(Definition) margin-right 속성은 요소의 오른쪽 바같쪽 여백을 설정합니다. 문법(Syntax) margin-right : length | % | auto 속성(Property) 속성값 설명 length 요소의 바같쪽 여백을 CSS단위를 통해 설정합니다. % 요소의 바같쪽 여백을 %를 통해 설정합니다. auto 요소의 바같쪽 여백을 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 margin-righ..
[CSS] margin-left margin-left margin-left 속성은 요소의 왼쪽 바같쪽 여백을 설정합니다. margin-left margin-left 속성은 요소의 왼쪽 바같쪽 여백을 설정합니다. 특징 설명 기본 값 margin-left : 0; 버전 CSS1 정의(Definition) margin-left 속성은 요소의 왼쪽 바같쪽 여백을 설정합니다. 문법(Syntax) margin-left : length | % | auto 속성(Property) 속성값 설명 length 요소의 바같쪽 여백을 CSS단위를 통해 설정합니다. % 요소의 바같쪽 여백을 %를 통해 설정합니다. auto 요소의 바같쪽 여백을 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 margin-left 사용가능 사용가능..
[CSS] margin-bottom margin-bottom margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다. margin-bottom margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다. 특징 설명 기본 값 margin-bottom : 0; 버전 CSS1 정의(Definition) margin-bottom 속성은 요소의 아래 바같쪽 여백을 설정합니다. 문법(Syntax) margin-bottom : length | % | auto 속성(Property) 속성값 설명 length 요소의 바같쪽 여백을 CSS단위를 통해 설정합니다. % 요소의 바같쪽 여백을 %를 통해 설정합니다. auto 요소의 바같쪽 여백을 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 margin-..
[CSS] margin margin margin 속성은 요소의 바같쪽 여백을 설정합니다. margin margin 속성은 요소의 바같쪽 여백을 설정합니다. 특징 설명 기본 값 margin-top : 0; margin-right : 0; margin-bottom : 0; margin-left : 0; 버전 CSS1 정의(Definition) margin 속성은 요소의 바같쪽 여백을 설정합니다. margin-top 속성은 요소의 위쪽 바깥쪽 여백을 설정합니다. margin-right 속성은 요소의 오른쪽 바깥쪽을 설정합니다. margin-bottom 속성은 요소의 아래쪽 바깥 여백을 설정합니다. margin-left 속성은 요소의 왼쪽 바깥 여백을 설정합니다. 문법(Syntax) margin : length | % | auto 속..
[CSS] list-style-type list-style-type list-style-type 속성은 목록 마커의 유형을 설정합니다. list-style-type list-style-type 속성은 목록 마커의 유형을 설정합니다. 특징 설명 기본 값 list-style-type : outside 버전 CSS1 정의(Definition) list-style-type 속성은 목록 마커의 유형을 설정합니다. 문법(Syntax) list-style-type : inside | outside 속성(Property) 속성값 설명 inside 목록 마커의 위치를 안쪽으로 설정합니다. outside 목록 마커의 위치를 바깥쪽으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 list-style-type 사용가능 사용가능 사용가능 ..
[CSS] list-style-position list-style-position list-style-position 속성은 목록 마커의 위치 속성을 설정합니다. list-style-position list-style-position 속성은 목록 마커의 위치 속성을 설정합니다. 특징 설명 기본 값 list-style-position : outside 버전 CSS1 정의(Definition) list-style-position 속성은 목록 마커의 위치 속성을 설정합니다. 문법(Syntax) list-style-position : inside | outside 속성(Property) 속성값 설명 inside 목록 마커의 위치를 안쪽으로 설정합니다. outside 목록 마커의 위치를 바깥쪽으로 설정합니다. 호환성(Compatibility) 6 7 8 9 ..
[CSS] list-style-image list-style-image list-style-image 속성은 목록 마커의 이미지를 설정합니다. list-style-image list-style-image 속성은 목록 마커의 이미지를 설정합니다. 특징 설명 기본 값 list-style-image-image : none 버전 CSS1 정의(Definition) list-style-image 속성은 목록 마커의 이미지를 설정합니다. 문법(Syntax) list-style-image : none | url 속성(Property) 속성값 설명 none 목록 마커 이미지를 표현하지 않습니다. url 목록 마커 이미지 경로를 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 list-style-image 사용가능 사용가능 사용가능 사용..
[CSS] list-style list-style list-style 속성은 목록 스타일 속성을 설정합니다. list-style list-style 속성은 목록 스타일 속성을 설정합니다. 특징 설명 기본 값 list-style-image : none list-style-position : outside list-style-type : disc 적용 font 버전 CSS1 정의(Definition) list-style 속성은 목록 스타일 속성을 설정합니다. 문법(Syntax) list-style : list-style-type | list-style-position | list-style-image 속성(Property) 속성값 설명 list-style-type 목록 마커의 유형을 설정합니다. list-style-position 목록 ..
[CSS] line-height line-height line-height 속성은 문장과 문장 사이의 간격을 설정합니다. line-height line-height 속성은 문장과 문장 사이의 간격을 설정합니다. 특징 설명 기본 값 line-height : normal 적용 font 버전 CSS1 정의(Definition) line-height 속성은 문장과 문장 사이의 간격을 설정합니다. 문법(Syntax) line-height : normal | number | length | percentage 속성(Property) 속성값 설명 normal 문장과 문장사이의 기본 간격입니다. number 문장과 문장사이의 간격을 숫자 배수만큼 설정합니다. length 문장과 문장사이의 간격을 CSS 단위로 설정합니다. percentage 문장과 ..
[CSS] letter-spacing letter-spacing letter-spacing 속성은 글자 사이의 간격을 설정합니다. letter-spacing letter-spacing 속성은 글자 사이의 간격을 설정합니다. 특징 설명 기본 값 letter-spacing : normal 버전 CSS1 정의(Definition) letter-spacing 속성은 글자 사이의 간격을 설정합니다. 문법(Syntax) letter-spacing : normal | length 속성(Property) 속성값 설명 normal letter-spacing의 기본적인 간격입니다. length 글자와 글자 사이의 간격을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 letter-spacing 사용가능 사용가능 사용가능 사용가능 사용가..
[CSS] left left left 속성은 위치 요소의 왼쪽 속성을 설정합니다. left left 속성은 위치 요소의 왼쪽 속성을 설정합니다. 특징 설명 기본 값 left : auto 버전 CSS2 정의(Definition) left 속성은 요소의 왼쪽 속성을 설정합니다. 문법(Syntax) left : auto | length | percentage 속성(Property) 속성값 설명 auto 요소의 왼쪽 값을 자동(기본)으로 설정합니다. length 요소의 왼쪽 값을 CSS 단위를 통해 설정합니다. percentage 요소의 왼쪽 값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 left 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 ..
[CSS] justify-content justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. justify-content justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. 특징 설명 기본 값 justify-content : flex-start 적용 flex 버전 CSS3 정의(Definition) justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의합니다. justify-content 속성은 콘텐츠의 좌우 관계 정렬 상태를 정의하고 align-content 속성은 콘텐츠의 상하 관계 정렬 상태를 정의합니다. justify-content 속성은 display:flex; 상태에서 적용됩니다. 문법(Syntax) justify-content :..
[CSS] isolation isolation isolation 속성은 stacking context을 설정합니다. isolation isolation 속성은 stacking context을 설정합니다. 특징 설명 기본 값 isolation : auto 버전 CSS3 정의(Definition) isolation 속성은 stacking context을 설정합니다. 문법(Syntax) isolation: auto | isolate 속성(Property) 속성값 설명 auto 새로운 stacking context를 자동으로 설정합니다. isolate 새로운 stacking context을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 isolation 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨..
[CSS] hyphens hyphens hyphens 속성은 텍스트의 하이픈 영역을 설정합니다. hyphens hyphens 속성은 텍스트의 하이픈 영역을 설정합니다. 특징 설명 기본 값 hyphens : auto 버전 CSS1 정의(Definition) hyphens 속성은 텍스트의 하이픈 영역을 설정합니다. 문법(Syntax) hyphens : none | manual | auto 속성(Property) 속성값 설명 none 하이픈 영역을 설정하지 않습니다. manual 단어를 하이픈으로 연결합니다. auto 단어의 하이픈으로 자동으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 hyphens 사용안됨 사용가능 사용가능 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] height height height 속성은 콘텐츠 요소의 세로값을 설정합니다. height height 속성은 콘텐츠 요소의 세로값을 설정합니다. 특징 설명 기본 값 height : auto 버전 CSS1 정의(Definition) height 속성은 콘텐츠 요소의 세로값을 설정합니다. 문법(Syntax) height : auto | length 속성(Property) 속성값 설명 auto 요소의 세로값을 자동(기본)으로 설정합니다. length 요소의 세로값을 CSS 단위를 통해 설정합니다. percentage 요소의 세로값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 height 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 ..
[CSS] hanging-punctuation hanging-punctuation hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다. hanging-punctuation hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다. 특징 설명 기본 값 hanging-punctuation : none 버전 CSS3 정의(Definition) hanging-punctuation 속성은 글씨의 시작 및 끝의 위치 정의합니다. 문법(Syntax) hanging-punctuation : none | first | last | allow-end | force-end 속성(Property) 속성값 설명 none 글자의 간격을 적용(기본 값)하지 않습니다. first 글자의 간격을 처음을 기준으로 설정합니다. la..
[CSS] grid-template-rows grid-template-rows grid-template-rows 속성은 그리드 행의 크기 조정 기능을 설정합니다. grid-template-rows grid-template-rows 속성은 그리드 행의 크기 조정 기능을 설정합니다. 특징 설명 기본 값 grid-template-rows : none 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-template-rows 속성은 아이템의 위치를 설정합니다. 문법(Syntax) grid-template-rows: length; Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 item1 item2 item3 item4 item5 item6 reset grid-template-rows: 10..
[CSS] grid-template-columns 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] grid-template grid-template grid-template 속성은 grid-template grid-template 특징 설명 기본 값 grid-template : none 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-template 속성은 문법(Syntax) grid-template Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 reset grid-template: "box1 box1 box1" 100px "box2 box3 box3" 100px "box2 box3 box3" 100px / 200px 200px 200px; grid-template: "box1 box1 box1" 200px "box2 box2 b..
[CSS] grid-row-start grid-row-start grid-row-start 속성은 grid-row-start grid-row-start 특징 설명 기본 값 grid-row-start : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-row-start 속성은 문법(Syntax) grid-row-start /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 reset grid-row-start: 1; grid-row-start: 2; grid-row-start: 3; grid-row-start: 4; HTML box1 box2 box3 box4 box5 box6 CSS .gri..
[CSS] grid-row-gap grid-row-gap(row-gap) grid-row-gap 속성은 grid-row-gap grid-row-gap 특징 설명 기본 값 grid-row-gap : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-row-gap 속성은 문법(Syntax) grid-row-gap /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 reset grid-row-gap: 0; grid-row-gap: 10px; grid-row-gap: 2em; grid-row-gap: 1%; HTML box1 box2 box3 box4 box5 box6 CSS .grid { bac..
[CSS] grid-row-end grid-row-end grid-row-end 속성은 grid-row-end grid-row-end 특징 설명 기본 값 grid-row-end : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-row-end 속성은 문법(Syntax) grid-row-end /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-row-end: 4; grid-row-end: 3; grid-row-end: 2; grid-row-end: 1; HTML box1 box2 box3 box4 box5 box6 box7 CSS .grid { backgrou..
[CSS] grid-row grid-row grid-row 속성은 grid-row-start와 grid-row-end 속성을 같이 사용합니다. grid-row grid-row 특징 설명 기본 값 grid-row : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-row 속성은 문법(Syntax) grid-row /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 box7 reset grid-row: 1; grid-row: 2; grid-row: 3; grid-row: 1 / 3; grid-row: 1 / 4; grid-row: 2 / 3; grid-row: 2 / 4; grid-r..
[CSS] grid-gap grid-gap grid-gap 속성은 grid-row-gap와 grid-column-gap 속성을 같이 사용합니다. grid-gap grid-gap 특징 설명 기본 값 grid-gap : normal 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-gap 속성은 문법(Syntax) grid-gap /* 단위 속성 */ Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 box4 box5 box6 reset grid-gap: 10px; grid-gap: 20px; grid-gap: 0 grid-gap: 10%; grid-gap: 10px 20px; grid-gap: calc(20px + 10%); HTML box1..
1 2 3 4 5 6 7 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바