전환이란?
CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것.
1) transition-property 속성
transition-property: <속성값> ;
속성값에 들어갈 수 있는 값
none : 전환효과 속성 지정X
all : 모든 속성을 전환 효과 대상으로 봄
transition-property : background-color, color, width; 처럼 속성을 지정
2) trasition-duration 속성
초단위의 속성값을 사용해 전환효과의 지속 시간을 설정
초단위로 s, ms등을 사용.
++ 어떤 요소에 전환효과를 넣으려면 반드시 transition-property와 transition-duration 속성을 함께 사용해야 함.
3) transition-delay 속성
: 전환 효과의 발생을 지연할 수 있다.
속성으로 지연하고 싶은 시간을 s, ms 단위로 지정할 수 있다.
4) transition-timing-function 속성
: 전환 효과의 진행속도를 지정
: 속성값으로는 정해진 키워드와 cubic-bezier()함수 사용 사능
| 속성값 | 설명 |
| linear | 처음 속도와 마지막 속도가 일정 |
| ease | 처음엔 속도가 점점 빨라지다가 중간부터 점점 느려짐 |
| ease-in | 처음에는 속도가 느리지만 완료될 때까지 점점 빨라짐 |
| ease-out | 처음에는 속도가 빠르지만, 완료될때까지 점점 느려짐 |
| ease-in-out | 처음에는 속도가 느리지만, 점점 빨라지다가 다시 점점 느려짐 |
| cubic-bezier(p1,p2,p3,p4) | 사용자가 정의한 속도로 진행 |
아래 코드는
container라는 클래스를 가진 요소에 마우스 커서가 올라가면 그 하위에 있는 .bar 클래스를 가진 요소에 스타일을 적용한다는 코드이다. 마우스를 올리면 200px로 바뀐다는 것으로, 완료시점은 1초로 같지만 전환효과의 속도는 다르다.
(배경색 : #F7F7F8)
** 크롬 개발자 도구에서 속도 조절하기
전환효과가 완료될 때까지의 속도를 정할 수 있다. 곡선의 두 점을 움직일 때마다 화면 위에 결과가 미리 보인다. 이 cubic-bezier값을 적용하면 원하는 속도로 조절 가능하다.
** 외부 사이트 이용하기
https://cubic-bezier.com/#.17,.67,.83,.67
cubic-bezier.com
cubic-bezier.com
여기서 곡선을 조정해서 해당 함수의 매개변수 값을 구할 수 있다.
<transition 속성으로 한 번에 지정하기>
transition : <property>, <duration>, <timing-function>, <delay>;transition- (속성) 이 모인 것들을 위와 같은 형태로 쓸 수 있다.
하지만 모든 CSS 속성이 전환효과를 사용할 수는 없다.
아래 속성들만 전환 효과가 가능하다.
애니메이션 속성으로 전환 효과 제어하기
주요 문법 구성은 애니메이션을 적용할 스타일 속성과 키 프레임(@keyframes).
애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 해야해서 키 프레임을 정의해서 실행해야!
키 프레임 : 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야하는 여러 작업을 정의하는 문법
최소 시작과 종료에 해당하는 2개 시점에 대한 스타일이 정의되어야 함!!
@keyframes <키 프레임명> {
0%{ /* CSS 코드 */ }
n%{ /* CSS 코드 */ }
100%{ /* CSS 코드 */ }
}
@keyframes <키 프레임명> {
from{ /* CSS 코드 */ }
to{ /* CSS 코드 */ }
}0%가 시작코드, 100%가 종료 코드이다. 시점을 n%로 지정한다.
0%를 from으로, 100%를 to 키워드로 대체해서 작성할 수 있다.
<style>
div{
width:100px;
height:100px;
border-color:red;
animation-name:bgchange;
animation-duration:5s;
}
@keyframes bgchange{
0%{background-color:red;}
25%{background-color:orange;}
50%{background-color:yellow;}
100%{background-color:green;}
}
</style>애니메이션을 적용하면 빨간색에서 초록색까지 바뀌고 사라지는 효과를 볼 수 있다.
<속성 분석>
1. animation-name
: 특정 요소에서 적용할 키 프레임명을 지정
ex) animation-name : bgchange;
2. animation-duration
: 애니메이션 지속할 시간을 설정. 속성값으로는 ms나 s 단위의 시간을 넣으면 됨.
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: bgchange;
animation-duration: 5s;
}
@keyframes bgchange {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}
</style>div의 스타일 속성에 초기값으로 background-color를 지정해주면, 초록색으로 변하는것까지 끝나고 나면 다시 빨간색으로 돌아온다.
!! 애니메이션 속성 적용 조건 !!
1. 키 프레임
2. animation-name 속성
3. animation-duration 속성
3가지 중 한 가지라도 빠지면, 애니메이션 전환효과는 일어나지 않는다!
3. animation-delay 속성
: 애니메이션 실행을 지연할 수 있다.
animation-delay : <지연 시간> ; // ms, s단위의 시간
4. animation-fill-mode 속성
: 애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지하길 원할 때 사용
: 애니메이션 실행 전과 후 스타일을 지정
대부분 이 속성을 사용하는 이유는 애니메이션 종료 후 상태 유지가 목적이므로 forwards 속성을 많이 쓴다.
5. animation-iteration-count 속성
: 애니메이션 실행 횟수를 조절할 수 있다.
animation-iteration-count : <횟수> ;
ex) animation-iteration-count : 3 ; // 3번 반복하고 싶을 때
6. animation-play-state 속성
: 애니메이션의 재생 상태를 지정.
: 속성값으로 다음 키워드를 사용할 수 있다.
: 자바스크립트 코드를 사용해야 한다!!
| 속성값 | 설명 |
| paused | 애니메이션의 실행을 일시정지 |
| running | 애니메이션을 실행 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation-play-state</title>
<style>
div{
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:move;
animation-duration:10s;
animation-fill-mode:forwards;
animation-play-state:paused;
}
@keyframes move{
from{
left:0;
}
to{
left:300px;
}
}
</style>
</head>
<body>
<div></div>
<button id="start">start</button>
<button id="paused">paused</button>
<script>
const box = document.querySelector("div");
document.getElementById("start").addEventListener("click", function(){
box.style.animationPlayState = "running";
});
document.getElementById("paused").addEventListener("click", function(){
box.style.animationPlayState = "paused";
})
</script>
</body>
</html>start와 paused 버튼을 눌렀을 때 각 id를 가져오고 여기에 click을 하면 animationPlayState값을 running과 paused로 바꿔주는 자바스크립트인가보다.
7. animation-direction 속성
: 애니메이션의 진행방향을 지정한다.
| 속성값 | 설명 |
| normal | 애니메이션의 진행방향을 키 프레임에 정의된 시간 순서대로 진행 (from -> to) |
| reverse | 애니메이션의 진행방향을 키 프레임에 정의된 시간 순서의 역으로 진행 (to -> from) |
| alternate | 애니메이션이 1회 이상 실행될 경우 홀수번째는 normal로, 짝수번째는 reverse로 진행 |
| alternate-reverse | 애니메이션이 1회 이상 실행될 경우 홀수번째는 reverse로, 짝수번째는 normal로 진행 |
8. animation-timing-function
: transition-timing-function 속성과 같다.
9. animation 속성으로 한 번에 지정하기
1~8 속성을 다 적을 필요는 없지만, 원하는 것만 적어서 적용가능하다.
변형효과 적용하기
변형 효과 : 요소의 크기변경, 위치 이동, 회전 (= 요소 자체를 변하게 하는 것)
2D뿐만 아니라 3D에서의 변형도 가능함.
* transform 속성
: 요소에 특정 변형 효과를 지정할 수 있다. 속성값에는 변형효과가 정의된 다양한 함수를 목적에 맞게 넣으면 됨
| 험수 | 설명 |
| translate(x,y) | 요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동한다 |
| translateX(n) | 요소를 현재 위치에서 n만큼 x축으로 이동한다. |
| translateY(n) | 요소를 현재 위치에서 n만큼 y축으로 이동한다. |
| scale(x, y) | 요소를 x(x축)와 y(y축)만큼 확대 또는 축소한다. |
| scaleX(n) | 요소를 n만큼 x축으로 확대 또는 축소한다. |
| scaleY(n) | 요소를 n만큼 y축으로 확대 또는 축소한다. |
| skew(xdeg, ydeg) | 요소를 x축과 y축으로 xdeg와 ydeg만큼 기울이낟. |
| skewX(deg) | 요소를 deg만큼 x축 방향으로 기울임 |
| skewY(deg) | 요소를 deg만큼 y축 방향으로 기울임 |
| rotate(deg) | 요소를 deg만큼 회전한다. |
적용시 transform : 함수(매개변수)를 써주면 된다.
transform : scale(2,2)처럼.
translate를 사용할 때
인자를 양수로 주면, x축은 오른쪽으로 y축은 아래쪽으로 이동
인자를 음수로 주면, x축은 왼쪽으로 y축은 위쪽으로 이동
skew를 사용할 때
음수와 양수는 반대방향
rotate를 사용할 때
양수값 -> 오른쪽으로 회전
음수값 -> 왼쪽으로 회전
* transform-origin 속성
rotate 함수처럼 회전의 중심을 기준으로 회전할 때, 기준점을 변형해주는 함수 (기본값은 중심값)
transform-origin : <x축 위치> <y축 위치>;
// 위치에는 % 단위나, 정해진 키워드 사용 가능
웹 폰트와 아이콘 폰트 사용하기
시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용함.
웹 폰트란?
인증된 기관이나 회사에서 웹 서버에 올려놓은 폰트
대표적으로 구글폰트가 있다.
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
@import 문을 선택하면 아래 style 코드를 복사해서 style 태그의 최상단에 넣어준다.
그러고 나면 font-family에서 쓸 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 속성 선택자(attribute selector)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,900&display=swap');
a[target="_blank"]{
color:red;
display:block; /* a 태그를 block-level 요소로 지정 */
text-decoration: none;
}
.Poppins{
font-family: "Poppins";
}
</style>
</head>
<body>
<a href="#" target="_blank">새 창으로 열리는 a 태그</a>
<div class="Poppins">새 창으로 열리는 a 태그</div>
</body>
</html>
실제 원래 폰트와 달라짐을 알 수 있다.
아이콘 폰트란?
이미지 파일이 아니라 CSS를 적용하는 방식으로 간단하게 사용할 수 있어서 활용도가 높다. 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용할 수 있다.
대표적인 아이콘 폰트 : Font Awesome, Material Icon
적용 방법
1. 해당 사이트에서 아이콘 폰트 라이브러리를 내려받아 추가하는 방법
2. CDN(Content Delivery Network)를 사용해 서버에 올려진 파일을 참조하는 방법
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and easier to load library fil
cdnjs.com
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] 레이아웃 ** (0) | 2023.07.16 |
|---|---|
| [CSS] 배경, 위치 ** (0) | 2023.07.16 |
| [CSS] 박스 모델 속성 (0) | 2023.07.16 |
| [CSS] 필수 속성 다루기(색상, 텍스트, 단위, 적용순서) ** (0) | 2023.07.16 |
| [CSS] 선택자 다루기 (0) | 2023.07.16 |
