KDT 포스코X코딩온 웹 과정 14기 7일~8일

KDT 코딩온 개발 14기 수강일기

KDT 포스코X코딩온 웹 과정 14기 7일~8일 - CSS 특수효과

worldstroy 2024. 9. 12. 21:35

요소의 변환효과를 주는 함수

#. transform

2차원 변환함수

1. translate(x,y) : 이동(x축, y축), translateX(x), translateY(y) : 한 축으로만 이동
2. scale(x,y) : 크기를 늘리는 함수, scaleX(x), scaleY(y) : 한 축으로만 키움(배수)
3. relate(degree) : 특정 각도로 테그를 회전시킴 예) 30deg
4. skew(x,y): x,y 축으로 값만큼 기울임, skewX(x),skewY(y) : 특정 축으로만 기울임
5. matrix(n,n,n,n,n,n) : 2차원 변환 효과

3차원 변환 함수.

transform 함수를 보충하는 속성

1. backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부
visible(뒷면보임, 기본값), hidden(뒷면숨김)
2. transitiion : 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
속성명 지속시간 타이밍함수 대기시간 순으로 작성해야 함.

3. transition-property : 전환 효과를 사용할 속성 이름을 지정
all, 속성이름(전환효과를 넣을 대상)
4. transition-duration : 전환 효과의 지속시간을 지정
기본값은 없음, s 단위의 값으로 표기.
5. transition-timing-function : 전환효과의 타이밍 함수를 지정
ease(느리게, 빠르게, 느리게)
linear(일정하게)
ease-in(느리게-빠르게)
ease-out(빠르게-느리게)
ease-in-out(느리게-빠르게-느리게)
6. transition-delay : 전환 효과가 몇 초 뒤에 시작할 지 대기시간을 지정

Animation이란?

@keyframes키 1. CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능
2. 중간지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션을 조절함.
3. 키프레임을 변수에 선언하고 해당 변수를 CSS에서 불러와서 사용할 수 있다.
(to/from, 0%~100%)

Animation 속성

이름: keyframes로 지정한 애니메이션 이름
지속시간: 애니메이션 지속시간
진행형태: ease/linear 등 애니메이션이 진행되는 형태(시간 함수)
반복횟수: 반복되는 횟수를 지정, 소수점 가능, infinite

Animation의 주요 속성

animation-name : @keyframes로 만든 이름
animation-duration: 지속시간(s)
animation-delay : 지연시간
animation-iteration-count : 반복횟수
animation-timing-function : 반복형태(ease, ease-in, ease-out,ease-in-out, linear)
animation-direction : 애니메이션 방향

######실습3#########

느낀점 : 생각해보니 굳이 translate 함수로 변화를 줄 필요는 없었을 것 같다. 단순히 위치만 다르게 주는 거니 left 값을 다르게 줘소 옮기기만 해도, 됐을 것 같다.

#####실습문제2#####

######실습문제3######

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: aqua;
      /* animation: name duration timing-function(생략가능) delay(생략가능) iteration-count direction(생략가능) fill-mode(생략가능); */
      position: relative;
      border-radius: 50%;
      animation-name: myanim;
      animation-duration: 3s;
      animation-iteration-count: 6;
      /* 숫자 지정 or 무한 반복 */
    }
    @keyframes myanim {
      0% {
        left: 0px;
        top: 0px;
      }
      25% {
        left: 400px;
        top: 0px;
      }
      50% {
        left: 400px;
        top: 400px;
      }
      75% {
        left: 0;
        top: 400px;
      }
      100% {
        top: 0px;
        left: 0px;
      }
    }
  </style>
  <body>
    <div class="box"></div>
  </body>
</html>

########실습 문제4#######

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    p {
      animation: 3s slidein;
    }
    /* p {
      animation-name: myain;
      position: relative;
      animation-duration: 3s;
    }
    @keyframes myain {
      0% {
        left: 140vw;
        width: 0%;
      }

      100% {
        left: 0vw;
        width: 100%;
      }
      너무 어렵게 생각했다!!!! 
    } */

    @keyframes slidein {
      from {
        margin-left: 100%;
        width: 300%;
      }
      to {
        margin-left: 0%;
        width: 100%;
      }
    }
  </style>
  <body>
    <p>
      "As I relax on the sofa and gaze around a room a thought hits me: this is
      exactly the place I've been looking for all my life. A little hideaway in
      some sinkhole somewhere. I'd always thought of it as a secret, imaginary
      place, and can barely believe that it actually exists. I close my eyes and
      take a breath, and wonder of it all settles over me like a gentle cloud."
    </p>
  </body>
</html>

##########마지막 문제#####

CSS파일

/* 
  TODO: HTML 요소들의 크기는 미리 설정해 두었습니다.
  position, animation 등을 활용하여 과제를 완성해주세요!
*/
body {
  width: 100%;
  animation: sky 10s linear infinite;
}

section {
  width: 700px;
  height: 450px;
  position: absolute;
  /* 가운데 위치 시키기: top,left 각각 50%를 주면 배치하는 것의 왼쪽 꼭짓점이 정중앙에 오게 된다 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section .sky {
  width: 100%;
  height: 100%;
  position: relative;
}

section .sky .sun {
  width: 180px;
  animation: sun 10s linear infinite;
  position: absolute;
  top: -160px;
  left: 0;
  margin-left: -90px;
}

section .sky .moon {
  width: 160px;
  animation: moon 10s linear infinite;

  position: absolute;
  top: -160px;
  left: 0;
  margin-left: -80px;
}

section .sky .cloud_1 {
  width: 160px;
  position: absolute;
  animation: cloud_1 10s linear infinite;
  left: 0%;
  top: -30px;
}

section .sky .cloud_2 {
  width: 90px;
  position: absolute;
  animation: cloud_2 10s linear infinite;
  left: 12%;
  top: 20px;
}

section .city .city_img {
  width: 100%;
  position: absolute;
  bottom: 0px;
}

/* ANIMATION */
/* 
  TODO:.5종류의 애니메이션이 필요함
  - sky: 배경색 변경 애니메이션
  - sun: sun.png가 회전하는 애니메이션
  - moon: moon.png가 회전하는 애니메이션
  - cloud_1: 큰 구름이 좌우로 이동하는 애니메이션
  - cloud_2: 작은 구름이 좌우로 이동하는 애니메이션
*/

/*
  참고: 알아야 할 속성 소개
  oapcity: 0 ~ 1 사이의 값으로 불투명도를 설정할 수 있음
  - 0: 요소가 완전히 투명해 보이지 않음
  - 0~1 사이의 값: 요소가 반투명해 뒤에 내용을 볼 수 있음
  - 1: 요소가 불투명함 
*/

/*
  참고: 배경 색상 종류
  - background-color: #636888;
  - background-color: #b1e1e2;
  - background-color: #fcd2e2;
  - background-color: #675577;
  - background-color: #636888;
*/

@keyframes sky {
  0% {
    background-color: #636888;
  }
  25% {
    background-color: #b1e1e2;
  }
  50% {
    background-color: #fcd2e2;
  }
  75% {
    background-color: #675577;
  }
  100% {
    background-color: #636888;
  }
}

@keyframes sun {
  0% {
    transform: rotate(-90deg);
    opacity: 0;
  }
  25% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(90deg);
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes moon {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  50% {
    transform: rotate(90deg);
    opacity: 0;
  }
  75% {
    transform: rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes cloud_1 {
  0% {
    left: 0%;
    opacity: 0;
  }
  25% {
    left: 50%;
    opacity: 1;
  }
  50% {
    left: 100%;
    opacity: 0;
  }
  75% {
    left: 50%;
    opacity: 1;
  }
  100% {
    left: 0%;
    opacity: 0;
  }
}

@keyframes cloud_2 {
  0% {
    left: 15%;
    opacity: 0;
  }
  25% {
    left: 65%;
    opacity: 1;
  }
  50% {
    left: 115%;
    opacity: 0;
  }
  75% {
    left: 65%;
    opacity: 1;
  }
  100% {
    left: 15%;
    opacity: 0;
  }
}

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>Animation 실습</title>
    <link rel="stylesheet" href="./style-exam.css" />
    <!-- TODO: css 파일을 연결해주세요. -->
  </head>

  <body>
    <section>
      <article class="sky">
        <!-- TODO: src 속성에 알맞은 이미지를 채워주세요. -->
        <img src="./img/sun.png" alt="태양" class="sun" />
        <img src="./img/moon.png" alt="달" class="moon" />
        <img src="./img/cloud.png" alt="큰 구름" class="cloud_1" />
        <img src="./img/cloud.png" alt="작은 구름" class="cloud_2" />
      </article>

      <article class="city">
        <!-- TODO: src 속성에 알맞은 이미지를 채워주세요. -->
        <img src="./img/city.png" alt="도시" class="city_img" />
      </article>
    </section>
  </body>
</html>

느낀점 ; position 설정할 때에 주의할 필요가 있어 보인다. 배우긴 했는데, 잘못집어넣어서 결과가 이상하게 나옴. @keyframes를 설정할 때에는 일정한 값으로 변화를 주는 게 애니메이션이 끊기는 느낌을 줄일 수 있다.

'KDT 코딩온 개발 14기 수강일기' 카테고리의 다른 글

KDT 포스코X코딩온 웹 과정 14기 10일 - JavaScript 기초 (0)	2024.09.21
KDT 포스코X코딩온 웹 과정 14기 9일 - 반응형 웹 (0)	2024.09.20
KDT 포스코X코딩온 웹 과정 14기 7일- 배경 (0)	2024.09.11
KDT 포스코X코딩온 웹 과정 14기 5~6일 : position, z-index (0)	2024.09.10
KDT 포스코X코딩온 웹 과정 14기 4,5일차- 속성 (0)	2024.09.09

현재글KDT 포스코X코딩온 웹 과정 14기 7일~8일 - CSS 특수효과

월드스토리의 코딩 나라

코딩 공부 및 개인 취미용(취업 후 시간나면???) 블로그

코딩온30일챌린지, 웹개발자, 코딩온, 과정명(웹 개발자), 포스코, 과정명(웹개발자), ㅂ, 과정명(스마트팩토리/웹개발자), 부트캠프,

Today :
Yesterday :

월드스토리의 코딩 나라