Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

현우의 개발상자

멋쟁이사자 FE7 15일차 본문

멋쟁이사자 FE7

멋쟁이사자 FE7 15일차

FrontEnd 개발자 준비생 최현우 2023. 7. 21. 17:30
728x90

Apply & Feeling (적용 및 느낀 점)

 

<!DOCTYPE html>
<html lang="ko-KR">
  <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>
    <link rel="stylesheet" href="./hyunwoo.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="hyunwoo">
        <div class="face"></div>
        <div class="eye1">
          <div class="e1"></div>
          <div class="e2"></div>
        </div>
        <div class="eye2">
          <div class="e1"></div>
          <div class="e2"></div>
        </div>
        <div class="mouse">
          <div class="m a"></div>
          <div class="m b"></div>
          <div class="m c"></div>
          <div class="m d"></div>
          <div class="m e"></div>
          <div class="m f"></div>
          <div class="m g"></div>
        </div>
        <div class="pink1"></div>
        <div class="pink2"></div>
        <div class="ear1"></div>
        <div class="ear2"></div>
        <div class="skin1"></div>
        <div class="skin2"></div>
      </div>
    </div>
  </body>
</html>
*,
*:after,
*:before {
  position: relative;
  box-sizing: border-box;
}

body {
  background: white;
}

.wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hyunwoo {
  position: absolute;
  width: 500px;
  height: 380px;
  border-radius: 200px;
  animation: zoomIn 7s infinite reverse;
}

@keyframes zoomIn {
  0% {
    transform: scale3d(2.5, 2.5, 2.5);
  }

  50% {
    transform: scale3d(1, 1, 1);
  }

  100% {
    transform: scale3d(5, 5, 5) rotate(360deg);
  }
}

.face {
  z-index: 1;
  position: absolute;
  width: 470px;
  height: 270px;
  background-color: rgb(253, 247, 229);
  border-radius: 170px 170px 100px 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid black;
  box-shadow: 0px 10px 100px 1px pink;
}

.eye1 {
  width: 37px;
  height: 30px;
  position: absolute;
  top: 36%;
  left: 34%;
  z-index: 1;
}

.eye2 {
  width: 37px;
  height: 30px;
  position: absolute;
  top: 36.11%;
  left: 56%;
  z-index: 1;
}

.e1 {
  position: absolute;
  width: 37px;
  height: 5px;
  background: black;
}

.e2 {
  position: absolute;
  top: 16%;
  left: 24%;
  width: 20px;
  height: 10px;
  border-radius: 0 0 10px 10px;
  background: black;
}

.mouse {
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  top: 52%;
  left: 29%;
  width: 200px;
  height: 100px;
  border: 5px solid black;
  border-radius: 0 0 100px 100px;
  border: 5px solid black;
  background-color: white;
  z-index: 1;
}

.m {
  width: 5px;
  height: 90px;
  background: black;
}

.m.a {
  height: 58px;
}

.m.b {
  height: 78px;
}

.m.d {
  height: 92px;
}

.m.f {
  height: 78px;
}

.m.g {
  height: 58px;
}

.pink1 {
  position: absolute;
  width: 100px;
  height: 40px;
  top: 45.11%;
  left: 72%;
  border-radius: 100%;
  background-color: pink;
  z-index: 1;
}

.pink2 {
  position: absolute;
  width: 100px;
  height: 40px;
  top: 44%;
  left: 7%;
  border-radius: 100%;
  background-color: pink;
  z-index: 1;
}

.ear1 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 8%;
  left: 69%;
  border-radius: 100%;
  border: 5px solid black;
  background-color: rgb(253, 247, 229);
}

.ear2 {
  z-index: 0;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 8%;
  left: 10%;
  border-radius: 100%;
  border: 5px solid black;
  background-color: rgb(253, 247, 229);
}

.skin1 {
  z-index: 2;
  position: absolute;
  width: 92px;
  height: 92px;
  top: 10%;
  left: 69.5%;
  border-radius: 100%;
  background-color: rgb(253, 247, 229);
}

.skin2 {
  z-index: 2;
  position: absolute;
  width: 92px;
  height: 92px;
  top: 10%;
  left: 11.2%;
  border-radius: 100%;
  background-color: rgb(253, 247, 229);
}

 

 

https://kyokyoya.github.io/hyunwoo_picture/

 

최현우

 

kyokyoya.github.io

지금까지 배운 css를 통해 캐릭터&애니메이션 효과를 실습해 봤다.

캐릭터는 box에 border-radius를 줘서 선들을 만들고 z-index를 사용해서 앞에 보여야 할 것을 보여주고 숨겨야 할 부분 들을 뒤로 보내주었다. 애니메이션은 scale3 d 통해 확대 축소 기능을 주었다.

실습을 통해 여러 가지 효과들에 대해 다시 한번 공부할 수 있어서 좋았고, 특히 postion을 전보다 더 유용하게 사용할 수 있는 능력을 한층 높아진것같다.

'멋쟁이사자 FE7' 카테고리의 다른 글

멋쟁이사자 FE7 17일차  (0) 2023.07.25
멋쟁이사자 FE7 16일차  (0) 2023.07.24
멋쟁이사자 FE7 14일차  (0) 2023.07.20
멋쟁이사자 FE7 13일차  (0) 2023.07.19
멋쟁이사자 FE7 12일차  (0) 2023.07.18
'멋쟁이사자 FE7' Related Articles more