CSS / 속성 - 배경
background - 요소의 배경을 설정
background-color 배경 색상 transparent
background-image 하나 이상의 배경 이미지 none
background-repeat 배경 이미지의 반복 repeat
background-position 배경 이미지의 위치 0 0
background-attachment 배경 이미지의 스크롤 여부(특성) scroll
background: 색상 이미지경로 반복 위치 스크롤특성;
.box1{ background: red url("../img/image.jpg") no-repeat left top scroll; }
background-color - 요소의 배경 색상을 지정
transparent 투명 transparent
background-image - 요소의 배경에 하나 이상의 이미지를 삽입
none 이미지 없음 none
url("경로") 이미지 경로(URL)
background-image: url("경로");
.box{ background-image: url("../img/image.jpg"); }
.box1{ /* 개별속성 */ background-image: url("../img/image1.jpg"), url("../img/image2.jpg"), url("../img/image3.jpg"); } .box2{ /* 단축속성 */ background: url("../img/image1.jpg") no-repeat, url("../img/image2.jpg") no-repeat 100px 50px, url("../img/image3.jpg") repeat-x; }
background-repeat - 배경 이미지의 반복을 설정
repeat 배경 이미지를 수직, 수평으로 반복 repeat
repeat-x 배경 이미지를 수평으로 반복
repeat-y 배경 이미지를 수직으로 반복
no-repeat 반복없음
background-position - 배경 이미지의 위치를 설정
% 왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100% 0% 0%
방향 방향을 입력하여 위치 설정 top, bottom, left, right, center
단위 px, em, cm등 단위로 지정
background-position : 방향1(X축) 방향2(Y축)
background-attachment - 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정
scroll 배경 이미지가 요소를 따라서 같이 스크롤 됨 scroll
fixed 배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음
local 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨
background-size - 배경 이미지의 크기를 지정
auto 배경 이미지가 원래의 크기로 표시됨 auto
단위 -px, em, %등 단위로 지정
-width height 형태로 입력 가능(E.g. 120px 370px)
-width만 입력하면 비율에 맞게 지정됨(E.g. 120px)
cover -배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐
-이미지가 잘릴 수 있음
contain -배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐
-이미지가 잘리지 않음
CSS / 속성 - 전환 & 변환
Transitions - CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 매니메이션
transition-property 전환 효과를 사용할 속성 이름 all
transition-duration 전환 효과의 지속시간 설정 0s
transition-timing-function 타이밍 함수 지정 ease
transition-delay 전환 효과의 대기시간 설정 0s
transition-timing-function : 타이밍 함수(애니메이션 전환 효과를 계산하는 방법)지정
값 의미 기본값 Cubic Bezier값
ease 빠르게-느리게 ease cubic-bezier(.25, .1, .25, 1)
linear 일정하게 cubic-bezier(0, 0, 1, 1)
ease-in 느리게-빠르게 cubic-bezier(.42, 0, 1, 1)
ease-out 빠르게-느리게 cubic-bezier(0, 0, .58, 1)
ease-in-out 느리게-빠르게-느리게 cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n,n,n,n) 자신만의 값을 정의(0~1)
steps(n) n번 분할된 애니메이션
transform - 요소의 변환 효과(변형)를 지정
transform: 변환함수1 변환함수2 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;
.box{ transform: rotate(20deg) translate(10px, 0); }
2D 변환 함수
translate(x, y) 이동(X축, Y축) 단위
translateX(x) 이동(X축) 단위
translateY(y) 이동(Y축) 단위
scale(x, y) 크기(X축, Y축) 없음
scaleX(x) 크기(X축) 없음
scaleY(y) 크기(Y축) 없음
rotate(degree) 회전(각도) deg
skew(x-deg, y-deg) 기울임(X축, Y축) deg
skewX(x-deg) 기울임(X축) degskewY(y-deg) 기울임(Y축) deg
matrix(n, n, n, n, n, n) 2차원 변환 효과 없음
3D 변환 함수
translate3d(x, y, z) 이동(X축, Y축, Z축) 단위
translateZ(z) 이동(Z축) 단위
scale3d(x, y, z) 크기(X축, Y축, Z축) 없음
scaleZ(z) 크기(Z축) 없음
rotate3d(x, y, z, a) 회전(X벡터, Y벡터, Z벡터, 각도) deg
rotateX(x) 회전(X축) deg
rotateY(y) 회전(Y축) deg
rotateZ(z) 회전(Z축) deg
perspective(n) 원근법(거리) 단위
matrix(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) 2차원 변환 효과 없음
transform 변환 속성
transform-origin 요소 변환의 기준점을 설정
transform-style 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
perspective 하위 요소를 관찰하는 원근 거리를 설정
perspective-origin 원근 거리의 기준점을 설정
backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김을 설정
transform-origin : 요소 변환의 기준점을 설정
X축 left, right, center, %, 단위 50%
Y축 top, bottom, center, %, 단위 50%
Z축 단위 0
transform-style : 3D 변환 요소의 자식 요소도 3D 변환을 사용할지 설정
flat 자식 요소의 3D 변환을 사용하지 않음 flat
preserve-3d 자식 요소의 3D 변환을 사용함
perspective - 하위 요소를 관찰하는 원근 거리를 설정
단위 px, em, cm등 단위로 지정
perspective속성과 함수의 차이점
perspective 관찰 대상의 부모요소 perspective-origin
transform: perspective() 관찰 대상 transform-origin
perspective-origin - 원근 거리의 기준점을 설정
X축 left, right, center, %, 단위 50%
Y축 top, bottom, center, %, 단위 50%
backface-visibility - 3D 변환으로 회전된 요소의 뒷면 숨김을 설정
visible 뒷면 숨기지 않음 visible
hidden 뒷면 숨김
matrix(a, b, c, d, e, f) - 요소의 2차원 변환(transforms)효과를 지정 slace(), skew(), translate()그리고 rotate()를 지정
animation - 요소에 애니메이션을 설정/제어
animation-name @keyframes규칙의 이름을 지정 none
animation-duration 애니메이션의 지속 시간 설정 0s
animation-timing-function 타이밍 함수 지정 ease
animation-delay 애니메이션의 대기 시간 설정 0s
animation-iteration-count 애니메이션의 반복 횟수 설정 1
animation-direction 애니메이션의 반복 방향 설정 normal
animation-fill-mode 애니메이션의 전후 상태(위치) 설정 none
animation-play-state 애니메이션의 재생과 정지 설정 running
animation : 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복상향 전후상태 재생/정지];
.box{ width: 100px; height: 100px; background: tomato; animation: hello 2s linear infinite both; } @keyframes hello{ 0% {width: 200px; } 100% {width: 50px; } }
@keyframes - 2개 이상의 애니메이션 중간 상태(프레임)을 지정
@keyframes 애니메이션이름{
0% { 속성: 값; }
50% { 속성: 값; }
100% { 속성: 값; }
}
@keyframes move-box{ 0% { width: 100px; } 100% { top: 200px; } }
CSS / 속성 - 애니메이션 & 다단
animation-name : @keyframes규칙(애니메이션 프레임)의 이름을 지정
none 애니메이션을 지정하지 않음
@keyframes이름 이름이 일치하는 @keyframes규칙의 애니메이션을 적용
animation-duration : 애니메이션의 지속 시간 설정
시간 지속 시간을 설정 0s
animation-timing-function - 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정
값 의미 기본값 Cubic Bezier값
ease 빠르게-느리게 ease cubic-bezier(.25, .1, .25, 1)
linear 일정하게 cubic-bezier(0, 0, 1, 1)
ease-in 느리게-빠르게 cubic-bezier(.42, 0, 1, 1)
ease-out 빠르게-느리게 cubic-bezier(0, 0, .58, 1)
ease-in-out 느리게-빠르게-느리게 cubic-bezier(.42, 0, .58, 1)
cubic-bezier(n,n,n,n) 자신만의 값을 정의(0~1)
steps(n) n번 분할된 애니메이션
animation-delay - 애니메이션의 대기 시간 설정
시간 대기 시간을 설정 0s
animation-iteration-count - 애니메이션의 반복 횟수를 설정
숫자 반복 횟수를 설정 1
infinite 무한 반복
animation-direction - 애니메이션의 반복 방향을 설정
normal 정방향만 반복 normal
reverse 역방향만 반복
alternate 정방향에서 역방향으로 반복(왕복)
alternate-reverse 역방향에서 정방향으로 반복(왕복)
animation-fill-mode - 애니메이션의 전후 상태(위치)를 설정
none 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝 none
forwards 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards 애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝
both 애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝
CSS / 속성 - 플랙스
stretch Container의 교차 축을 채우기 위해 Items를 늘림
stretch Container의 교차 축을 채우기 위해 Items를 늘림
/*이렇게 하면 item1은 가변적으로 작동 item2는 100px고정으로 됨*/ .item1{ flex-grow: 1; } .item2{ width : 100px; }
댓글
댓글 쓰기