본문 바로가기

Webstoryboy

Category

Explanation

CSS/Alphabet

 (24)
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 속성은 배..
background-size background-size background-size 속성은 백그라운드 이미지 사이즈를 설정합니다. background-size background-size 속성은 백그라운드 이미지 사이즈를 설정합니다. 특징 설명 기본 값 background-size : auto 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-size 속성은 백그라운드 이미지 사이즈를 설정합니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. background-blend-mode 속성은 배경..
background-repeat background-repeat background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다. background-repeat background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다. 특징 설명 기본 값 background-repeat : repeat 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-repeat 속성은 백그라운드 이미지 반복 여부를 설정합니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. backgrou..
background-position background-position background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다. background-position background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다. 특징 설명 기본 값 background-position : 0% 0% 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-position 속성은 백그라운드 이미지의 위치 영역을 설정합니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background-attachment 속성은 배경 이미지의 고정 여부를 설..
background-origin background-origin background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. background-origin background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. 특징 설명 기본 값 background-origin : padding-box 적용 background 버전 CSS1 사용성 ★☆☆☆☆ 정의(Definition) background-origin 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. background-origin 기준점은 보더(border), 패딩(padding), 컨텐츠(content)에 설정할 수 있습니다. 비교(Compare) background-origin ..
background-image background-image background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다. background-image background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다. 특징 설명 기본 값 background-image : transparent 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-image 속성은 백그라운드 이미지 및 배경 속성을 설정합니다. background-image 속성은 다중 이미지를 익스플로러9 이상부터 지원됩니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. bac..
background-clip background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. 특징 설명 기본 값 background-clip : border-box 적용 background 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. clip은 걸다, 끼우다의 뜻으로 background-clip 배경 이미지를 어디에 설정하지를 설정합니다. background-clip 기준점은 보더(border), 패딩(padding), 컨텐츠, 텍스트(te..
background-blend-mode background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. 백그라운드 색상과 백그라운드 이미지를 혼합 했을 때 효과를 만들어 주기 때문에, 두가지 요소가 없다면, 적용이 안 될 수 있습니다. 포토샵의 브랜드 효과와 동일하다고 보시면 됩니다. background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. 특징 설명 기본 값 background-blend-mode : normal; 적용 background 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. blend-mode는 크게 ..
background-attachment background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 백그라운드를 배경에 고정하여 효과를 주는 기법입니다. 패럴랙스 스크롤링 사이트에서 자주 사용하는 방법 중에 하나입니다. background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 특징 설명 기본 값 background-attachment: scroll; 적용 background 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. background-attachment 속성의 multiple backgrounds는 익스플로러9..
background background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background 속성은 CSS를 통해 이미지를 표현하는 방법으로 HTML에 태그와 비교가 됩니다. 이미지의 의미가 있다면 태그를 사용하고, 의미가 없고 장식용에 가깝다면 background 속성을 이용합니다. background 속성은 고정, 위치, 컬러, 기준점, 반복, 사이트를 통해 컨트롤 할 수 있습니다. background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: non..
backface-visibility backface-visibility backface-visibility 속성은 요소의 뒷면을 설정합니다. 요소가 3D인 경우에서 설정 할 수 있습니다. backface-visibility backface-visibility 속성은 요소의 뒷면을 설정합니다. 특징 설명 기본 값 backface-visibility : visible; 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) backface-visibility 속성은 요소의 뒷면을 설정합니다. 2D 상태에서는 뒷면을 확인할 수 없지만 3D 공간에서는 뒷면을 확인 할 수 있습니다. 문법(Syntax) backface-visibility : visible | hidden; /* 기본 속성 */ backface-visibility : visibl..
animation-timing-function animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 특징 설명 기본 값 animation-timing-function : linear; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-timing-function 속성..
animation-play-state animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 특징 설명 기본 값 animation-play-state : running; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 애니메이션과 관련된 속성(..
animation-name animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 특징 설명 기본 값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성(Animation Related ..
animation-iteration-count animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 특징 설명 기본 값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count 속성은 애니메이션 ..
animation-fill-mode animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 특징 설명 기본 값 animation-fill-mode : none 적용 animation 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션과 관련..
animation-duration animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 특징 설명 기본 값 animation-duration : 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. animation-duration 속성에는 시..
animation-direction animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 특징 설명 기본 값 animation-direction : normal; 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. animation-direc..
animation-delay animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 특징 설명 기본 값 animation-delay: 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션과 관련된 속성(Animation Related Properties) ani..
animation animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; ani..
all all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. 특징 설명 기본 값 all : auto 적용 모든 속성 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. all 속성은 모든 요소에 설정 가능합니다. 문법(Syntax) all : initial | inherit | unset | revert /* 기본 속성 */ all : initial; all : inherit; all : unset; all : revert; 속성(Property) 속성값 설명 initial 요소의 모든 속성을 초기화합니다. inherit 요소의 속성을 상속받어 적용합니다. uns..
align-self align-self align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. align-self align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. 특징 설명 기본 값 align-self : auto 적용 flexbox 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) align-self 속성은 개별적인 플렉스 아이템의 정렬 상태를 설정합니다. align-self 속성은 플렉스 아이템에 설정하고, align-item와 align-content는 플렉스 컨테이너에 설정합니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다. flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식..
align-items align-items align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-items align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. 특징 설명 기본 값 align-items : stretch 적용 flexbox 버전 CSS3 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-content 속성은 컨테이너의 높이 값을 기준으로 정렬하고 align-items 속성은 아이템의 높이 값을 기준으로 정렬합니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다...
align-content align-content align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-content align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. 특징 설명 기본 값 align-content : stretch 적용 flexbox 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-content 속성은 한 줄(flex-wrap: nowrap)에서는 의미가 없습니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다. flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자..
1
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바