[CSS] CSS 속성 3 - 에이블런 프론트엔드부트캠프 3일차

1. filter 

filter를 이용해 화면의 명도, 채도, 밝기 등을 변경할 수 있다.

속성명	속성값	설명
filter	blur	요소의 흐림 효과를 조절
	brightness	요소의 밝기를 조절
	contrast	요소의 명도 대비 조절
	grayscale	요소의 흑백 조절
	hue-rotate	요소의 색상 단계 조절
	invert	요소의 색상 반전 단계를 조절
	saturate	요소의 채도를 조절
	sepia	요소의 갈색 톤 단계 조절

filter 속성값을 적용한 화면

/*  값이 커질수록 효과 커짐 */
section article:nth-of-type(1) {
    filter: blur(10px);
}
/*  1보다 작아지면 어두워짐 */
section article:nth-of-type(2) {
    filter: brightness(2);
}
/*  100보다 작아지면 명암대비효과 감소 */
section article:nth-of-type(3) {
    filter: contrast(10);
}
/*  100%에 가까울수록 흑백으로 변화 */
section article:nth-of-type(4) {
    filter: grayscale(100%);
}
/* 0~360도 사이 색상 변화  */
section article:nth-of-type(5) {
    filter: hue-rotate(10deg);
}
/* 100%에 가까울 수록 색이 반대로 변화 */
section article:nth-of-type(6) {
    filter: invert(100);
}
/* 0에 가까울 수록 채도 감소 */
section article:nth-of-type(7) {
    filter: saturate(1);
}
/* 100%에 가까울 수록 갈색톤으로 변화ㅣ  */
section article:nth-of-type(8) {
    filter: sepia(50%);
}

 

2. transform

transform을 사용해 도형을 다양하게 변형할 수 있다.

속성명	속성값	설명
transform (2D)	scale	선택한 요소의 크기를 확대, 축소
	skew	선택한 요소를 X축 또는 Y축으로 비틀어서 변형
	translate	선택한 요소를 현재 위치 기준에서 X축 또는 Y축으로 이동
	rotate	선택한 요소를 회전
transform (3D)	rotateX, rotateY	선택한 요소를 X축 또는 Y축으로 입체감 있게 회전
	translateZ	선택한 요소를 Z축으로 입체감 있게 보이면서 이동
perspective	px	3D 효과가 적용된 요소가 입체감 있게 보이도록 부모 요소에 속성을 적용해 원근감을 부여
transform-style	preserve-3d	3D 효과가 적용된 요소에 모션 처리를 하면 해당 3D 효과가 풀리는데, 속성을 적용해 3D 효과를 유지
transform-origin	가로축, 세로축	요소의 변형이 일어나는 중심축을 가로축, 세로축을 기준으로 이동

/* 1보다 크면 확대, 작으면 축소 */
.box1 div {
    transform: scale(1.2);
}
/* X, Y축을 각도를 지정해 비틀어서 변형 */
.box2 div {
    transform: skew(45deg, 20deg);
}
/* X축 각도 지정 */
.box3 div {
    transform: skewX(45deg);
}
/* Y축 각도 지정 */
.box4 div {
    transform: skewY(-45deg);
}
/* X,Y축 이동 */
.box5 div {
    transform: translate(50%, 50%);
}

.box6 div {
    transform: translateX(50%);
}

.box7 div {
    transform: translateY(50%);
}

.box8 div {
    transform: rotate(45deg);
}

.box9 div {
    transform: translateX(100px) rotate(130deg);
}

.box10 div {
    transform: rotate(130deg) translateX(100px);
}

.box11 div {
    transition: 1s;
}
.box11 div:hover {
    transform: rotateX(45deg);
    transition: 1s;
}

.box12 div {
    transition: all 1s;
}
.box12 div:hover {
    transform: rotateY(45deg);
}

.box13 div {
    transition: all 1s;
}
.box13 div:hover{
    transform: translateZ(100px);
}

.box14 div {
    transition: all 1s;
    transform-origin: top left;
}
.box14 div:hover {
    transform: rotateY(160deg);
}

.box15 div {
    transform-origin: right center;
    transform: all 1s;
}
.box15 div:hover {
    transform-origin: right center;
    transform: rotateX(160deg);
    transition: all 1s;
}

 

3. transition

속성명	속성값	설명
transition-property	속성명	전환효과를 줄 CSS 속성명을 지정. 속성명은 여러 개 지정 가능하며 all을 입력하면 전체 속성 사용 가능
transition-duration	지속시간 (초 단위)	전환 효과가 발생할 때 지속할 시간을 나타냄. 지속시간은 초(s) 단위로 지정
transition-delay	지연 시간 (초 단위)	전환 효과가 발생할 때 지연 시간을 나타냄
transition-timing-function	가속도	전환 효과의 가속도를 나타냄. 키워드를 입력해 적용. - linear : 등속 - ease: 가속  - ease-in: 모션 시작 시 가속 - ease-out: 모션 종료 시 가속 - ease-in-out: 모션 시작, 종료 시 모두 가속 - cubic-bezier: 사용자가 지정한 효과 적용
transition	속성명 / 전환 시간 / 가속도 / 지연 시간	모든 전환 효과 관련 속성값을 한 번에 축약해서 사용

section {
    width: 1100px;
    margin: 100px auto;
}

section::after {
    content: "";
    display: block;
    clear: both;
}

section article {
    width: 200px;
    height: 100px;
    margin-right: 20px;
    background-color: pink;
    float: left;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 1s linear 0s, background-color 0.5s linear 1.5s;
}

section article:nth-of-type(4) {
    margin-right: 0px;
}

section:hover article {
    transform: translateY(0);
    opacity: 1;
    background-color: orange;
}

article:nth-of-type(1) {
    transition-delay: 0s;
}
article:nth-of-type(2) {
    transition-delay: 0.2s;
}
article:nth-of-type(3) {
    transition-delay: 0.4s;
}
article:nth-of-type(4) {
    transition-delay: 0.6s;
}