본문 바로가기

Webstoryboy

Category

Explanation

CSS

 (238)
[CSS] quotes quotes quotes 속성은 인용 부호를 정의합니다. quotes quotes 속성은 인용 부호를 정의합니다. 특징 설명 기본 값 - 버전 CSS2 정의(Definition) quotes 속성은 인용 부호를 정의합니다. content : open-quote, content: close-quote;가 설정 되어 있을 때 적용되는 속성입니다. 문법(Syntax) quotes : none | string 속성(Property) 속성값 설명 none 인용부호를 적용하지 않습니다. string 인용부호를 설정해줍니다. 호환성(Compatibility) 6 7 8 9 10 11 quotes 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] position position position 속성은 요소의 위치를 설정합니다. position position 속성은 요소의 위치를 설정합니다. 특징 설명 기본 값 position : static 버전 CSS2 정의(Definition) position 속성은 요소의 위치를 설정합니다. 문법(Syntax) position : static | absolute | fixed | relative 속성(Property) 속성값 설명 static 요소의 정상적인 위치(기본값)를 설정합니다. absolute 요소의 위치를 절대적 값으로 설정합니다. relative 요소의 위치를 상대적인 위치 및 기준점으로 설정합니다. fixed 요소의 위치를 고정으로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 po..
[CSS] pointer-events pointer-events pointer-events 속성은 포인터 이벤트 반응을 정의합니다. pointer-events pointer-events 속성은 포인터 이벤트 반응을 정의합니다. 특징 설명 기본 값 pointer-events : auto 버전 CSS3 정의(Definition) pointer-events 속성은 포인터 이벤트 반응을 정의합니다. 문법(Syntax) pointer-events : auto | none 속성(Property) 속성값 설명 auto 마우스 포인터를 자동으로 설정합니다. none 마우스 포인터를 설정하지 않습니다. 호환성(Compatibility) 6 7 8 9 10 11 pointer-events 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨..
[CSS] perspective-origin perspective-origin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다. perspective-origin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다. 특징 설명 기본 값 perspective-origin : 50% 50% 버전 CSS3 정의(Definition) perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다. 문법(Syntax) perspective-origin : x-axis | y-axis 속성(Property) 속성값 설명 x-axis z축의 방향을 설정합니다. - left - center - right - length - % y-axis y축의 방향을 설정합니다. -..
[CSS] perspective perspective perspective 속성은 3D를 표현할 때 원근점을 정의합니다. perspective perspective 속성은 3D를 표현할 때 원근점을 정의합니다. 특징 설명 기본 값 perspective : none 버전 CSS3 정의(Definition) perspective 속성은 3D를 표현할 때 원근점을 정의합니다. 문법(Syntax) perspective : length 속성(Property) 속성값 설명 length perspective의 값을 CSS 단위로 설정합니다. none perspective의 값을 적용하지 않습니다. 호환성(Compatibility) 6 7 8 9 10 11 perspective 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 ..
[CSS] page-break-inside page-break-inside page-break-inside 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. page-break-inside page-break-inside 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. 특징 설명 기본 값 page-break-inside : auto 버전 CSS2 정의(Definition) page-break-inside 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. 문법(Syntax) page-break-inside : auto | avoid 속성(Property) 속성값 설명 auto 페이지를 분리하는 경우 자동으로 계산하여 설정합니다. avoid 페이지를 분리를 앞에서 하지 않습니다. 호환성(Compatibility) 6 7 8 9 10 11..
[CSS] page-break-before page-break-before page-break-before 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. page-break-before page-break-before 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. 특징 설명 기본 값 page-break-before : auto 버전 CSS2 정의(Definition) page-break-before 속성은 인쇄시 페이지 분리에 관한 설정을 정의합니다. 문법(Syntax) page-break-before : auto | always | avoid | left | right 속성(Property) 속성값 설명 auto 페이지를 분리하는 경우 자동으로 계산하여 설정합니다. always 페이지를 분리를 항상 앞에서 설정합니다. avoid ..
[CSS] page-break-after page-break-after page-break-after 속성은 페이지 인쇄시 분리에 관한 설정을 정의합니다. page-break-after page-break-after 속성은 페이지 인쇄시 분리에 관한 설정을 정의합니다. 특징 설명 기본 값 page-break-after : auto 버전 CSS2 정의(Definition) page-break-after 속성은 페이지 인쇄시 분리에 관한 설정을 정의합니다. 문법(Syntax) page-break-after : auto | always | avoid | left | right 속성(Property) 속성값 설명 auto 페이지를 분리하는 경우 자동으로 계산하여 설정합니다. always 페이지를 분리를 항상 앞에서 설정합니다. avoid 페이지를 분리..
[CSS] padding-top padding-top padding-top 속성은 요소의 위쪽 여백을 설정합니다. padding-top padding-top 속성은 요소의 위쪽 여백을 설정합니다. 특징 설명 기본 값 padding-top : 0 버전 CSS1 정의(Definition) padding-top 속성은 요소의 위쪽 여백을 설정합니다. 문법(Syntax) padding-top : length 속성(Property) 속성값 설명 length 요소의 아래부분 안쪽 여백을 CSS 단위로 설정합니다. % 요소의 아래부분 안쪽 여백을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 padding-top 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] padding-right padding-right padding-right 속성은 요소의 오른쪽 여백을 설정합니다. padding-right padding-right 속성은 요소의 오른쪽 여백을 설정합니다. 특징 설명 기본 값 padding-right : 0 버전 CSS1 정의(Definition) padding-right 속성은 요소의 오른쪽 여백을 설정합니다. 문법(Syntax) padding-right : length 속성(Property) 속성값 설명 length 요소의 아래부분 안쪽 여백을 CSS 단위로 설정합니다. % 요소의 아래부분 안쪽 여백을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 padding-right 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 ..
[CSS] padding-left padding-left padding-left 속성은 요소의 왼쪽 여백을 설정합니다. padding-left padding-left 속성은 요소의 왼쪽 여백을 설정합니다. 특징 설명 기본 값 padding-left : 0 버전 CSS1 정의(Definition) padding-left 속성은 요소의 왼쪽 여백을 설정합니다. 문법(Syntax) padding-left : length 속성(Property) 속성값 설명 length 요소의 아래부분 안쪽 여백을 CSS 단위로 설정합니다. % 요소의 아래부분 안쪽 여백을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 padding-left 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사..
[CSS] padding-bottom padding-bottom padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다. padding-bottom padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다. 특징 설명 기본 값 padding-bottom : 0 버전 CSS1 정의(Definition) padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다. 문법(Syntax) padding-bottom : length 속성(Property) 속성값 설명 length 요소의 아래부분 안쪽 여백을 CSS 단위로 설정합니다. % 요소의 아래부분 안쪽 여백을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 padding-bottom 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용..
[CSS] padding padding padding 속성은 요소의 안쪽 여백을 설정합니다. padding padding 속성은 요소의 안쪽 여백을 설정합니다. 특징 설명 기본 값 padding-top : 0 padding-right : 0 padding-bottom : 0 padding-left : 0 버전 CSS1 정의(Definition) padding 속성은 요소의 안쪽 여백을 설정합니다. padding-left 속성은 요소의 왼쪽 여백을 설정합니다. padding-right 속성은 요소의 오른쪽 여백을 설정합니다. padding-top 속성은 요소의 위쪽 여백을 설정합니다. padding-bottom 속성은 요소의 아래쪽 여백을 설정합니다. 문법(Syntax) padding : padding-top | padding-r..
[CSS] overflow-y overflow-y overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. overflow-y overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. 특징 설명 기본 값 overflow-y : visible 버전 CSS2 정의(Definition) overflow-y 속성은 Y축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. 문법(Syntax) overflow-y : visible | hidden | scroll | auto 속성(Property) 속성값 설명 visible 지정한 영역에 요소들을 보이게 합니다. hidden 지정한 영역에 넘쳐난 요소들을 안보이게 합니다. scroll 지정한 영역에 ..
[CSS] overflow-x overflow-x overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. overflow-x overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. 특징 설명 기본 값 overflow-x : visible 버전 CSS2 정의(Definition) overflow-x 속성은 X축을 기준으로 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. 문법(Syntax) overflow-x : visible | hidden | scroll | auto 속성(Property) 속성값 설명 visible 지정한 영역에 요소들을 보이게 합니다. hidden 지정한 영역에 넘쳐난 요소들을 안보이게 합니다. scroll 지정한 영역에 ..
[CSS] overflow overflow overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. overflow overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. 특징 설명 기본 값 overflow : visible 버전 CSS2 정의(Definition) overflow 속성은 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. overflow:hidden는 float을 사용시 영역 깨짐 방지를 위한 방법으로도 사용합니다. overflow:scroll; 사용시 스크롤바 모양과 크기 및 위치가 브라우저마다 다양하므로 확인해야 합니다. 문법(Syntax) overflow : visible | hidden | scroll | auto 속성(Property) 속성값 설명 visi..
[CSS] outline-width outline-width outline-width 속성은 아웃라인의 두께를 정의합니다. outline-width outline-width 속성은 아웃라인의 두께를 정의합니다. 특징 설명 기본 값 outline-width : medium 버전 CSS3 정의(Definition) outline-width 속성은 아웃라인의 두께를 정의합니다. 문법(Syntax) outline-width : medium | thin | thick | length 속성(Property) 속성값 설명 medium outline의 가로 값을 medium(기본값)으로 설정합니다. thin outline의 가로 값을 thin으로 설정합니다. thick outline의 가로 값을 thick으로 설정합니다. length outline의 가..
[CSS] outline-style outline-style outline-style 속성은 아웃라인 스타일을 정의합니다. outline-style outline-style 속성은 아웃라인 스타일을 정의합니다. 특징 설명 기본 값 outline-style : none 버전 CSS3 정의(Definition) outline-style 속성은 아웃라인 스타일을 정의합니다. 문법(Syntax) outline-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 속성(Property) 속성값 설명 none outline 스타일을 설정하지 않습니다. hidden outline 스타일을 숨김으로 설정합니다. dotted outline 스타일을..
[CSS] outline-offset outline-offset outline-offset 속성은 아웃라인의 간격을 정의합니다. outline-offset outline-offset 속성은 아웃라인의 간격을 정의합니다. 특징 설명 기본 값 outline-offset : 0 버전 CSS3 정의(Definition) outline-offset 속성은 아웃라인의 간격을 정의합니다. 문법(Syntax) outline-offset : length 속성(Property) 속성값 설명 length 아웃라인의 간격을 CSS 단위로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 outline-offset 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨
[CSS] outline-color outline-color outline-color 속성은 아웃라인의 색을 정의합니다. outline-color outline-color 속성은 아웃라인의 색을 정의합니다. 특징 설명 기본 값 outline-color : invert 버전 CSS2 정의(Definition) outline-color 속성은 아웃라인의 색, 스타일, 두께를 정의합니다. 블록 요소를 기준으로 안쪽으로는 border, 바깥쪽으로는 outline으로 표현합니다. 문법(Syntax) outline-color : invert | color 속성(Property) 속성값 설명 invert outline 기본 값입니다. color outline의 색을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 outline-..
[CSS] outline border border 속성은 테두리 속성을 일괄적으로 설정합니다. border border 속성은 테두리 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 border-width : medium border-style : none border-color : currentColor border-image : none border-radius :0 적용 border 버전 CSS1 정의(Definition) border 속성은 테두리 속성을 일괄적으로 설정합니다. 테두리와 관련된 속성(Border Related Properties) border-width는 테두리 두께 속성을 설정합니다. border-style는 테두리 스타일 속성을 설정합니다. border-color는 테두리 색 속성을 설정합니다. bo..
[CSS] order order order 속성은 flex 콘텐츠의 순서를 정의합니다. order order 속성은 flex 콘텐츠의 순서를 정의합니다. 특징 설명 기본 값 order : 0 적용 flex 버전 CSS3 정의(Definition) order 속성은 flex 콘텐츠의 순서를 정의합니다. 문법(Syntax) order : number 속성(Property) 속성값 설명 number 콘텐츠의 순서를 숫자를 통해 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 order 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능
[CSS] opacity opacity opacity 속성은 요소의 투명도를 설정합니다. opacity opacity 속성은 요소의 투명도를 설정합니다. 특징 설명 기본 값 opacity : 1 버전 CSS3 정의(Definition) opacity 속성은 요소의 투명도를 설정합니다. opacity는 0~1 사이의 숫자로 표현 할 수 있으며, 0.5이면 투명도 50%와 동일합니다. 인터넷 익스플로러 7, 8 버전에서는 "filter:alpha(opacity=70)"를 사용합니다. 문법(Syntax) opacity : number 속성(Property) 속성값 설명 number 요소의 투명도를 0~1 사이로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 opacity 사용가능 사용가능 사용가능 사용가능 사..
[CSS] object-position object-position object-position 속성은 , 태그의 위치를 정의합니다. object-position object-position 속성은 , 태그의 위치를 정의합니다. 특징 설명 기본 값 object-position : 50% 50% 버전 CSS3 정의(Definition) object-position 속성은 , 태그의 위치를 정의합니다. 문법(Syntax) object-fit: position 속성(Property) 속성값 설명 position 컨텐츠 사이즈 위치를 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 object-position 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사..
[CSS] object-fit object-fit object-fit 속성은 , 태그의 크기를 정의합니다. object-fit object-fit 속성은 , 태그의 크기를 정의합니다. 특징 설명 기본 값 object-fit : 개별적 속성 버전 CSS3 정의(Definition) object-fit 속성은 , 태그의 크기를 정의합니다. 문법(Syntax) object-fit: fill | contain | cover | scale-down | none 속성(Property) 속성값 설명 fill 컨텐츠 사이즈 크기에 맞게 설정합니다. contain 컨텐츠의 가로 값을 기준으로 맞게 설정합니다. cover 컨텐츠 화면 사이즈에 맞게 설정합니다. scale-down 컨텐츠 크기 보다 작게 설정합니다. 호환성(Compatibility) 6..
backdrop-filter backdrop-filter backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. backdrop-filter backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. 특징 설명 기본 값 backdrop-filter : none 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. 요소의 배경을 반투명 설정하여야 효과를 확인할 수 있습니다. 그래픽 효과와 관련된 속성(Graphic Related Properties) filter 속성은 그래픽 효과를 설정합니다. backdrop-filter 속성은 배경에 그래픽 효과를 설정합니다. background-blend-mode 속성은 배..
-
-
-
[CSS] grid-template-areas grid-template-areas grid-template-areas 속성은 아이템의 위치를 설정합니다. grid-template-areas grid-template-areas 속성은 아이템의 위치를 설정합니다. 특징 설명 기본 값 grid-template-areas : none 상속 안됨 애니메이션 가능 적용 Grid 버전 CSS3 정의(Definition) grid-template-areas 속성은 아이템의 위치를 설정합니다. 문법(Syntax) grid-template-areas: length; Sample1 콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다. 결과 box1 box2 box3 reset grid-template-areas: "box1 box1 box1" "box2 box3 box..
1 2 3 4 5 6 ··· 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바