본문 바로가기
> 학습단/코딩 자율학습단 2기

[ HTML + CSS + 자바스크립트] 6.7 ~ 6.9

by 자몽주스 2023. 4. 2.
728x90

[ 코딩 자율학습 ]

HTML+CSS+자바스크립트

6.7 ) 애니메이션 속성으로 전환 효과 제어하기
<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: beChange;
        animation-duration: 2s;
      }

      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

애니메이션 속성:

전환효과 속성과 달리

키프레임을 정의해서 실행

 

< animation-name 속성 >

: 특정 요소 적용할

키 프레임 이름 지정

 

< animation-duration 속성 >

: 애니메이션을 지속할 시간을 설정

 

< animation-delay 속성 >

: 애니메이션 실행을 지연

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: beChange;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
      }

      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< animation-fill-mode 속성 >

: 애니메이션 끝나도

종료된 시점의 상태유지할 떄 사용

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: beChange;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
      }

      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< animation-iterator-count 속성 >

: 애니메이션 실행 횟수 조절

(무한반복 예시)

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation-name: beChange;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-play-state: running;
      }
      .box:hover {
        animation-play-state: paused;
      }
      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< animation-play-state 속성 >

: 애니메이션의 재생 상태 지정

: 일시정지 / 실행(기본값)

: hover을 같이 사용해서

박스에 마우스를 올리면

애니메이션 정지

 

< animation 속성 >

:  모든 전환 효과 속성은

한 번에 작성 가능

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: beChange 2s 3 ease-in;
      }

      @keyframes beChange {
        0% {
          background-color: aqua;
        }
        100% {
          background-color: beige;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

- animation 전환 효과 예제 -

6.8) 변형 효과 적용하기

< 변형효과 >

 : 요소 자체를 변하게 할 떄 사용

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transform: translate(100px, 100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< transform() 함수 >

: 현재 위치에서 x축과 y축 만큼 이동

: translate() 함수는

x축과 y축 두방향으로 동시에 이동한다

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transform: translateX(-100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

현재 있던 위치에서

x축으로 100px 이동

(음수도 가능)

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transform: translateY(100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

현재 있던 위치에서

  y축으로 100px 이동

(음수도 가능)

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .box:hover {
        transform: scaleX(2);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< scaleX() 함수 >

: x축 방향으로 확대하거나

축소할 수 있음

확대시,

현재 요소를 기준으로

좌우 균등하게 늘어남

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: scaleY(2);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< scaleY() 함수 >

: y축 방향으로 확대하거나

축소할 수 있음

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: scale(2);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< scale() 함수 >

: x축 , y을 동시에 확대하거나

축소할 수 있음

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: scale(2,5);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

- scale() 함수 예시 -

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: skewX(30deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< skew() 함수 >

: 요소 기울기

: deg를 통해 기울고 싶은

각도를 지정해 줌

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: skewX(-30deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

음수(-)를 같이 사용하면

반대로 기울어짐

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: skew(-30deg, -50deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

- skew() 함수 예시 -

: x축과 y축 동시에 비틀기

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: rotateX(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: rotate(30deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< rotate() 함수 >

: 요소 회전

양수 - 오른쪽

음수 - 왼쪽 회전

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin: 100px;
      }
      .box:hover {
        transform: rotate(30deg);
        transform-origin: bottom right;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

< transform-origin() 함수 >

: 기준점 바꿔 변형 효과 다르게 적용

(예시에서는

아래 오른쪽을 기준으로

핀 박힌 것처럼 회전

- 양수니까 오른쪽으로 회전함)

<!DOCTYPE html>
<html lang="en">
  <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>애니메이션 속성으로 전환효과 제어하기</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

- 요소를 정중앙에 위치시키기 -

: transform 속성을 사용해서

기준점도 딱 중앙에 오게할 수 있음

6.9) 웹 폰트와 아이콘 폰트 사용하기
<!DOCTYPE html>
<html lang="en">
  <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>제목</title>
    <style>
    </style>
  </head>
  <body>
    <p>
      import는 항상 최상단에 위치해서 적용시켜야 한다.<br />
      import 외의 또 다른 방법은 link를 복사해서 붙여넣기하는 방식이 있다 <br />
      Almost before we knew it, we had left the ground.
    </p>
  </body>
</html>

1. 구글 폰트 사용

2. Font Awesome

Material Icon 사용

 

728x90