CSS 효과
이미지 관련
CSS에서는 이미지에 관련된 여러 기능을 제공합니다
투명도(opacity)
이미지의 투명도를 지정합니다
0<=값<=1사이의 값을 지정합니다. 1은 완전한 불투명을 의미합니다
img {
opacity: 0.5;
}필터(filter)
필터를 활용하면 이미지에 다양한 효과를 다른 도구 없이도 사용할 수 있습니다
filter는 비교적 최신 기능이기 때문에 벤더 프리픽스를 사용해줘야합니다
혼합(blend)
혼합은 이미지를 혼합해 새로운 이미지를 생성하는 기능입니다
텍스트가 이미지로서 존재하면 사용자가 상호작용이 불가능하고, 검색이 되지 않는 불편함이 있었습니다
그래서 이미지와 글을 섞거나 이미지와 이미지를 섞는 혼합기능이 생겼습니다
-
background-blend-mode: 배경 그래픽간에 blend(이미지+이미지) -
mix-blend-mode: 배경과 내용 사이의 blend(이미지+내용)
shadow
css를 사용하면 요소나 텍스트에 그림자(Shadow) 효과를 부여할 수 있습니다
text-shadow
텍스트에 그림자 효과를 주는 속성입니다
작성 방식은 다음과 같습니다
선택자 { text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }
box-shadow
요소에 그림자를 부여하는 속성입니다
작성 방식은 다음과 같습니다
선택자 { box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shadow-Color; }
gradient
그레이디언트(Gradient)는 2가지 이상의 색을 혼합해 배경을 생헝하는 것입니다.
css3부터 제공되었는데 이전에는 외부 프로그램을 사용해 직접 이미지를 만들어 사용했습니다. 이런 방식은 이미지가 차치하는 비용 문제와 해상도 저하같은 문제가 있었습니다
gradient는 2종류가 있습니다
- 선형 gradient(Linear Gradient): 아래로/위쪽으로/왼쪽으로/오른쪽으로/수직 방향
- 방사형 gradient(Radial Gradient): 중심 기준으로 정의
gradient는 비교적 최신 기술이기 때문에 벤더 프리픽스를 사용해줘야하고, 브라우저별로 사용하기 문법이 약간씩 달라 사용하기 까다롭습니다
그래서 직접 작성하기보다는 여러 생성 도구를 이용해 gradient를 만들어냅니다
전환(transition)
전환은 요소의 css 속성 값이 변화할 때, 전 상태와 후 상태 사이의 변화를 d일정 시간(duration)동안 일어나도록 해주는 단축속성입니다
속성의 값들이 변환될 때(transform) 그 과정을 조금 더 부드럽게해서 사용자 편의성을 증진시킵니다
transition은 자동으로 작동하는게 아니라 :hover같은 가상 클래스 선택자나 JS의 부수적인 동작에 의해 작동합니다
transition : 속성명 지속시간(필수 요소) 타이밍함수 대기시간
transition: property duration function delaytransition은 단축속성으로 각 요소를 별도로 설정하고 싶다면 아래 세부 속성으로 설정해주면 됩니다
transition-property
전환의 대상이되는 속성 이름을 가리킵니다
all: (default 값) 모든 속성에 전환 적용
여러 개를 지정할 경우 ,로 구분합니다 - width, background-color;
다만 모든 속성에 전환이 적용될 수 있는 건 아닙니다. 예를들어 display같은 경우는 변환이 적요되지 않습니다
변환이 가능한 속성들은 다음과 같습니다
// Box model
width height max-width max-height min-width min-height
padding margin
border-color border-width border-spacing
// Background
background-color background-position
// 좌표
top left right bottom
// 텍스트
color font-size font-weight letter-spacing line-height
text-indent text-shadow vertical-align word-spacing
// 기타
opacity outline-color outline-offset outline-width
visibility z-index변환이 일어났을 때 변화된 내용이 기존 배치에 영향을 준다면, 브라우저는 영향을 받는 모든 요소를 재배치하게 됩니다
이는 성능 부분에 부담을 주게 되는데, 만약 많은 자식요소를 가진 상위요소를 변환시킬 경우 모든 자식요소가 재배치되는 불상사가 일어날 수 있습니다
그래서 배치에 영향을 주는 변환은 되도록 사용하지 않는게 좋습니다
//변환시 배치에 영향을 주는 속성들
width height padding margin border
display position float overflow
top left right bottom
font-size font-family font-weight
text-align vertical-align line-height
clear white-spacetransition-duration
전환되는 총 시간을 지정하며, s, ms 단위를 사용합니다
- 기본값 :
0s
div {
transition-property: width, opacity;
transition-duration: 2s, 4s;
/*축약 표현시*/
div {
/* shorthand syntax */
transition: width 2s, opacity 4s;
}
}transition-duration은 지정된 transition-property와 1:1로 대응하기 때문에 위 예시에서 각 속성은 다음과 같은 지속시간을 가지게됩니다
- width -> 2s
- opacity -> 4s
transition-timimg-function
변환 효과를 위한 타이밍 함수를 지정합니다. 시간에 따른 변화 속도를 함수로 지정하는데, 이는 그래프로 확인할 수 있습니다
- default값 :
easing
직접 수치를 입력해 만들 수 도 있지만, 이미 만들어진 함수를 가져와 사용할 수 도 있습니다
transition-delay
값이 변한 시점과 전환이 실제 일어나는 사이에 대기하는 시간을 지정합니다 - s, ms 단위
애니메이션(Animation)
전환은 단순히 속성값 변화에 따른 요소의 전과 후 사이의 관계를 처리합니다
만약 더 많은 단계와 복잡한 전환을 처리해야할 때에는 애니메이션을 사용합니다. 속성의 변화에 중점을 둔 전환과 다르게, 애니메이션은 하나의 흐름을 구성해 각 세부 단계를 제어할 수 있습니다
애니메이션은 애니메이션을 나타내는 css 스타일과 각 단계(sequence)를 나타내는 여러 개의 키프레임(@keyframes)으로 구성됩니다
css 애니메이션은 js 기반의 애니메이션보다 더 나은 렌더링 성능을 제공한다고는 하지만, 무조건 그런것은 아니고 상황에 따라 적절하게 사용하는게 좋습니다
- 간단한 효과나 css만 사용해도되는 경우 -
width의 변경 - 복잡하고 세밀한 제어가 필요한 경우 - 중지, 일시중지, 감속, 바운스 같은 고급 효과
어느 방법을 사용하든 애니메이션을 구현하는데 드는 비용과 화면에 부드럽게 보여지는지를 중점으로 고려해야합니다
animation
animation은 축약 속성으로 여러 속성을 한번에 지정할 수 있습니다. 값을 지정하지 않은 내용에는 기본 값이 저장됩니다
animation: name duration timing-function delay iteration-count direction fill-mode play-state@keyframes
@keyframes 규칙을 사용하면 애니메이션의 흐름(sequence) 중 여러 시점(breakpoint)에서의 css 속성값을 지정할 수 있습니다
하나 혹은 여러 개의 keyframe을 정의해 원하는 변화를 지정하게 되는 것입니다
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
//애니메이션 정의
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* @keyframes rule */
@keyframes move {
/* keyframe */
from {//애니메이션 시작 지점 키워드
left: 0;
}
/* keyframe */
to {//애니메이션 종료 지점 키워드
left: 300px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>예시처럼 from, to키워드를 사용하거나, %를 사용해 키프레임을 지정할 수 있습니다
@keyframes move {
0% { left: 0; }
50% { left: 100px; }
100% { left: 300px; }
}animation-name
@keyframes 이름 {}에서 볼 수 있는 것처럼 각 키프레임에는 애니메이션을 대표하는 임의의 이름을 부여할 수 있습니다
이 키프레임의 이름들을 animation-name의 속성 값으로 지정해 사용하고자하는 키프레임 규칙을 선택할 수 있습니다
이 때 하나 이상의 애니메이션 이름을 선택할 수 있습니다
animation-name: move, fadeOut, changeColor;
...
@keyframes move {
from { left: 0; }
to { left: 300px; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes changeColor {
from { background-color: red; }
to { background-color: blue; }
}animation-duration
한 사이클의 애니메이션에 소요되는 시간을 s, ms단위로 지정합니다
반드시 지정해야하고 만약 지정하지 않는다면 어떤 애니메이션도 보이지 않습니다
animation-duration: .5s;
animation-duration: 500ms;animation-timing-function
애니메이션 효과를 위한 타이밍 함수를 지정합니다
예시 : https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
animation-delay
요소의 로드 시점과 실제 애니메이션 수행 시점 사이의 대기시간을 s, ms단위로 지정합니다
animation-delay: 2s;animation-iteration-count
애니메이션의 재생 횟수를 지정합니다
animation-iteration-count: 3;- 1을 기본값으로 가지며,
infinite로 무한히 재생할 수 도 있습니다
animation-direction
애니메이션 종료후 반복시 진행 방향을 지정해줍니다
animation-direction: alternate;
animation-fill-mode
애니메이션 실행되고있지 않을 때(대기, 종료시) 요소의 스타일을 지정합니다
animation-play-state
애니메이션의 재생 상태를 지정합니다. 버튼과 JS를 활용해 재생, 정지 버튼으로도 활용 가능합니다
- 기본값은
running입니다
animation-play-state: paused;
animation-play-state: running;변환(transform)
변환은 요소의 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)를 변경하기위한 함수를 제공합니다
전환이나 애니메이션과 다르게 변경 내용이 즉각적으로 반영되는데, 애니메이션을 사용할때는 변환과 나머지 두 방법을 혼용해서 사용하게됩니다
-
변환은
2d 변환과3d 변환으로 구분되는데, 가장 큰 차이는원근법(perspective)이라는 특성입니다 -
transform은 요소의display 속성의 값이block-level / inline-block일 때만 동작하고,inline일 때는 동작하지 않습니다
2D 변환
2D 변환은 속성 값으로 변환 함수를 사용합니다. 그 목록은 다음과 같습니다
사용할 함수를 ,없이 차례대로 나열하면, 그 순서대로 효과가 적용됩니다
transform: func1 func2 func3 ...;
/*예시*/
transform: skew(0, 0);
transform: scale(1) rotate(0);transform-origin
요소의 기본 기준점, 즉 변화가 이루어지는 기준점을 설정할 때 사용합니다
- 기본 값은 정중앙(50%,50%)입니다
transform-origin: 0 0;
transform-origin: 50% 50%;
transform-origin: 100% 100%;3D 변환
3D 변환에서 사용하는 함수들은 다음과 같습니다
2D 변환과 가장 큰 차이점은 원근법(perspective)으로, 적용될 때 그 차이를 더 확실이 알 수 있습니다
perspective : 원근법
사용한다면 가장 앞에 작성해줘야합니다
perspective는 속성일 때와 함수일 때 적용 대상과 작동 방식이 다릅니다
persepcetive:: 관찰 대상의 부모에 적용 /persepcetive-origin기준transform: persepcetive(): 관찰대상에 적용 /transform-origin기준
backface-visibility
3d 변환으로 요소를 뒤집었을 때, 요소의 뒷면을 보여줄 것인지 결정하는 속성입니다
- visible, hidden을 값으로 가집니다
참고 및 출처
https://poiemaweb.com/
https://www.wschools.com/css/default.asp
https://opentutorials.org/course/3086
Author And Source
이 문제에 관하여(CSS 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@trollering12312/CSS-효과저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
