🦁_21.11.09(1) TIL

Bori·2021년 11월 9일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

9/60

21년 11월 09일(1)

📎 레이아웃 구현 프로젝트_1

정글 시네마 - 소스코드 보기

📝 CSS

📎 SVG

확장 가능한 벡터 그래픽(Scalable Vector Graphics)으로 HTML 기반의 2차원 그래픽
HTML 태그의 집합으로 이루어져 있어 CSS와 JavaScript로 컨트롤이 가능

SVG 장점

아무리 확대를 해도 이미지가 깨지지 않는다.
=> 벡터 그래픽이므로
이미지의 크기를 키워도 용량이 늘어나지 않는다.

SVG 단점

단순한 모양일수록 효율이 좋다.
=> 코드로 이루어진 이미지이므로 복잡한 이미지일수록 파일의 크기 커진다.
=> 복잡한 이미지를 SVG로 표현하면 오히려 용량이 커져 역효과가 날 수 있다.

HTML에 SVG를 적용하는 방법

[ 예제 이미지 - frog.svg ]

무료 SVG 변환 사이트 - Convertio

SVG 이미지 최적화
SVG 안의 코드를 최대한 압축하여 용량을 가볍게 만들 수 있다.

<img>로 사용 : src="" 속성값으로 SVG 파일 연결

    <img src="frog.svg" alt="">

CSS background로 사용 : background-img 속성값으로 SVG 파일 연결

    .cont-svg {
      width: 100vw;
      height: 100vh;
      background: url(frog.svg) no-repeat 0 0;
      background-size: contain;
    }

인라인으로 구현 : SVG 파일의 코드를 그대로 HTML 코드 안에서 사용

<svg width="624" height="465" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
        d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
        fill="#00A249" />
  <path
        d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
        stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
        fill="#89C140" />
  <path
        d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
        stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
        fill="#8FC23F" />
  <path
        d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
        stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
        fill="#FFFFFE" />
  <path
        d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
        stroke="#1A1919" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
        fill="#E88194" />
  <path
        d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
        stroke="#1A1919" stroke-width="7.425" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
        fill="#E88194" />
  <path
        d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
        fill="#C9E8F2" />
  <path
        d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
        stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
        fill="#C9E8F2" />
  <path
        d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
        stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
        fill="#C9E8F2" />
  <path
        d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
        stroke="#1A1919" stroke-width="7.074" stroke-linecap="round" stroke-linejoin="round" />
  <path d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324" stroke="#1A1919" stroke-width="5.844"
        stroke-linecap="round" stroke-linejoin="round" />
  <path d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998" stroke="#1A1919" stroke-width="6.48"
        stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
        stroke="#1A1919" stroke-width="6.309" stroke-linecap="round" stroke-linejoin="round" />
  <path d="M506.028 36v108m63.501 150.501V120v174.501Z" stroke="#1A1919" stroke-width="6.48"
        stroke-linecap="round" stroke-linejoin="round" />
  <path d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499" stroke="#1A1919" stroke-width="5.844"
        stroke-linecap="round" stroke-linejoin="round" />
  <path
        d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
        stroke="#1A1919" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
  <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
        fill="#fff" />
  <path d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
        stroke="#000" />
  <ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
  <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
        fill="#fff" />
  <path d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
        stroke="#000" />
  <ellipse class="eye-right" cx="353.5" cy="129" rx="12.5" ry="12" fill="#000" />
</svg>

CSS 적용해보기 - 윙크하는 개구리

/** 적용 순서 **/
/* 1. 오른쪽 눈을 그리는 ellipses 요소에 class="eye-right" 클래스를 추가합니다. */
/* 2. 클래스에 애니메이션 속성을 작성해줍니다. */
/* 이때 transform-origin 으로 중심축을 설정해야합니다. 좌표는 ellipses 요소안의 cx="353.5" cy="129" 입니다. */

.eye-right {
    animation-duration: 0.5s;
    animation-name: blink;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    transform-origin: 353.5px 129px;
}

@keyframes blink {
    to {
        transform: scaleY(0.1);
    }
}

각 나라별 지도
Free SVG Maps - amCharts
=> 아래처럼 사용할 수 있다.
코로나19 바이러스 현황판

실습

<!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>New Colored Frog</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1000px;
      }

      .container {
        position: relative;
      }

      .umbrella {
        position: absolute;
        top: -135px;
        left: 60px;
        z-index: -1;
        transform: rotate(-10deg);
      }

      .umbrella-top {
        overflow: hidden;
        position: relative;
        width: 400px;
        height: 180px;
        border-radius: 400px 400px 0 0;
        border: 10px solid #000;
        background-color: #998ceb;
      }

      .umbrella-bottom {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .umbrella-bottom__ver {
        width: 10px;
        height: 150px;
        background-color: #000;
      }

      .umbrella-bottom__round {
        position: absolute;
        bottom: -35px;
        left: -60px;
        width: 50px;
        height: 25px;
        border: 10px solid #000;
        border-radius: 50px 50px 0 0;
        background-color: #fff;
        transform: rotate(180deg);
      }

      .umbrella-bottom__round::after {
        content: "";
        display: block;
        position: absolute;
        bottom: -10px;
        width: 50px;
        height: 10px;
        /* border-radius: 50px 50px 0 0; */
        background-color: #fff;
      }

      .wink-right {
        position: absolute;
        top: 130px;
        right: 290px;
      }

      .wink-line {
        position: absolute;
        left: 0;
        width: 40px;
        height: 5px;
        border-radius: 10px;
        background-color: #000;
      }

      .wink-line:nth-child(1) {
        top: -10px;
        transform: rotate(-30deg);
      }

      .wink-line:nth-child(3) {
        top: 10px;
        transform: rotate(30deg);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="umbrella">
        <div class="umbrella-top"></div>
        <div class="umbrella-bottom">
          <div class="umbrella-bottom__ver"></div>
          <div class="umbrella-bottom__round"></div>
        </div>
      </div>
      <svg
        width="624"
        height="465"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
          fill="#00A249"
        />
        <path
          d="m446.529 308.502 79.386-37.479c-37.824-34.863-111.48-58.521-196.146-58.521-123.264 0-223.191 50.142-223.191 112.002 0 61.857 99.927 112.002 223.191 112.002 94.674 0 175.575-29.586 208.011-71.334l-91.251-56.67Z"
          stroke="#1A1919"
          stroke-width="9"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5"
          fill="#B4FE98"
        />
        <path
          d="M427.656 312.627c1.5-16.5-15.081-29.259-34.239-28.641-3.018-7.002-16.917-33.714-20.511-40.359l-57.876-1.365-57.876 1.365c-3.594 6.645-17.493 33.357-20.511 40.359-19.155-.618-35.739 12.141-34.239 28.641 2.091 22.977 11.352 19.851 29.001 28.5-10.416 4.188-26.001 11.499-26.001 11.499l23.499 1.5-3.6 10.917s48.228-24.042 69.6-24.417c6.678-.12 14.595-.759 20.127-1.287 5.535.528 13.452 1.167 20.127 1.287 21.372.375 69.6 24.417 69.6 24.417l-3.6-10.917 23.499-1.5s-15.582-7.311-26.001-11.499c17.652-8.649 26.913-5.523 29.001-28.5v0Z"
          stroke="#1A1919"
          stroke-width="9"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
          fill="#B4FE98"
        />
        <path
          d="M178.524 135.165c-1.785-20.466 10.644-46.113 54.507-48.666 29.568-1.722 41.121 15.627 47.496 31.002l20.502-1.002c3.669-19.797 19.497-38.874 60.372-36.624 29.592 1.629 39.051 26.535 42.123 39.126 3.591 14.7 2.502 20.499 6.252 28.749 4.725 10.398 30.009 13.749 25.755 55.749-7.821 77.217-249.189 72.888-270.255 23.001-14.25-33.75 6.753-49.5 14.253-59.25l-1.005-32.085Z"
          stroke="#1A1919"
          stroke-width="9"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
          fill="#FFFFFE"
        />
        <path
          d="M270.528 291c10.404-10.239 30.216-15.207 44.25-15 19.386.279 42.096 6.012 53.394 22.404 9.006 13.071-12.129 39.6-24.057 40.347-18.759 1.167-37.395 2.637-56.139 3.582-11.889.597-27.174-41.76-17.448-51.333Z"
          stroke="#1A1919"
          stroke-width="9"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179"
          fill="#E88194"
        />
        <path
          d="M373.41 179.388c.219 7.863-32.733 25.458-73.881 26.613-41.139 1.155-74.886-14.568-75.108-22.434-.219-7.863 148.767-12.042 148.989-4.179v0Z"
          stroke="#1A1919"
          stroke-width="7.425"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M213.528 195.375c0 8.49-7.218 15.375-16.125 15.375s-16.125-6.885-16.125-15.375c0-8.493 7.218-15.375 16.125-15.375s16.125 6.882 16.125 15.375Zm205.5-7.5c0 8.49-7.218 15.375-16.125 15.375-8.904 0-16.125-6.885-16.125-15.375 0-8.493 7.221-15.375 16.125-15.375 8.907 0 16.125 6.882 16.125 15.375Z"
          fill="#E88194"
        />
        <path
          d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086"
          fill="#C9E8F2"
        />
        <path
          d="M428.892 37.503c0 8.88-5.76 16.077-12.861 16.077-7.104 0-12.864-7.197-12.864-16.077 0-8.88 13.398-31.086 13.398-31.086s12.327 22.206 12.327 31.086v0Z"
          stroke="#1A1919"
          stroke-width="7.074"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
          fill="#C9E8F2"
        />
        <path
          d="M518.526 189.084c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
          stroke="#1A1919"
          stroke-width="7.074"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083"
          fill="#C9E8F2"
        />
        <path
          d="M116.526 167.085c0 8.88-5.76 16.08-12.861 16.08-7.104 0-12.864-7.2-12.864-16.08 0-8.88 13.398-31.083 13.398-31.083s12.327 22.203 12.327 31.083v0Z"
          stroke="#1A1919"
          stroke-width="7.074"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M529.278 289.875C515.403 306 530.529 324.501 552.528 324"
          stroke="#1A1919"
          stroke-width="5.844"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M609.528 283.002c16.125 6.498 9.999 20.964 3.999 25.998"
          stroke="#1A1919"
          stroke-width="6.48"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M581.421 283.671c7.503 1.605 12.891 5.862 13.089 11.058.171 4.5-2.232 10.146-9.381 11.025m-22.098 4.245c-9.375.375-15.096-5.766-15.378-11.124-.375-7.125 4.284-12.237 11.406-14.463l3.972 25.587Z"
          stroke="#1A1919"
          stroke-width="6.309"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M506.028 36v108m63.501 150.501V120v174.501Z"
          stroke="#1A1919"
          stroke-width="6.48"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M573.03 324.999c9.378-.018 16.419-.681 24.501-5.499"
          stroke="#1A1919"
          stroke-width="5.844"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="m442.77 254.502-28.002 18.999m-233.997-3.999L208.77 280.5l-27.999-10.998Zm-38.001 48h39.999-39.999Zm99.999 60.999-25.998 23.001 25.998-23.001Zm81 3 6.999 39-6.999-39Zm77.001 0 33.999 24-33.999-24Z"
          stroke="#1A1919"
          stroke-width="6"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <!-- 왼쪽 눈 -->
        <path
          d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
          fill="#fff"
        />
        <path
          d="M254 136c0 16.016-13.208 29-29.5 29S195 152.016 195 136s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
          stroke="#000"
          stroke-width="5.844"
        />
        <ellipse cx="224.5" cy="136" rx="12.5" ry="12" fill="#000" />
        <!-- 오른쪽 눈 -->
        <!-- <path
          d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
          fill="#fff"
        />
        <path
          d="M383 129c0 16.016-13.208 29-29.5 29S324 145.016 324 129s13.208-29 29.5-29 29.5 12.984 29.5 29Z"
          stroke="#000"
          stroke-width="5.844"
        />
        <ellipse
          class="eye-right"
          cx="353.5"
          cy="129"
          rx="12.5"
          ry="12"
          fill="#000"
        /> -->
        <div class="wink-right">
          <div class="wink-line"></div>
          <div class="wink-line"></div>
          <div class="wink-line"></div>
        </div>
      </svg>
    </div>
  </body>
</html>

📎 상호 작용을 위한 가상클래스

`:hover`

사용자가 마우스를 요소 위에 올렸을 떄 적용
스마트폰, 태블릿 류의 터치스크린 기기에서는 사용자의 손가락이 hover되는 시점을 알 수 없기 때문에 현재는 사용빈도가 줄어들고 있다.

`:active`

사용자가 요소를 실행할 때 적용
=> 버튼을 누르거나 링크를 클릭할 때

`:focus`

요소에 포커스가 있을 때 적용
=> 클릭할 수 있는 요소나 폼 컨트롤(input, select 등)과 같이 상호작용 할 수 있는 모든 요소에서 focus 가능

📎 CSS transition

transition : CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것

[출처: Webanimation 1부 css Animation]

property : 어떤 속성에 transition효과를 줄 지 설정

속성값	설명
`all`	기본값, 모든 속성에 `transition` 효과가 나타남
`none`	`transition` 효과를 받지 못함
`property`	`transition` 효과를 적용하고 싶은 CSS 속성을 설정하여 지정된 속성에만 `transition`이 나타남
`initial`	속성의 기본값으로 설정
`inherit`	부모 요소의 속성값을 상속 받음

duration : transition이 일어나는 지속시간 설정
- 단위 : s, ms
- 미지정 시, 0s를 의미
  지연없이 바로transition이 일어남
delay : transition이 일어날 때 얼마만큼 기다렸다가 실행할 지 결정
- 단위 : s, ms
- 미지정 시, 0s를 의미
  transition의 효과가 나타나지 않음

timing - function : transition의 진행 속도 설정

속성값	설명
`linear`	처음부터 끝까지 일정한 속도 = `cubic-bezier(0, 0, 1, 1)`
`ease`	기본값, 천천히 시작 / 빠르게 진행 / 천천히 끝 = `cubic-bezier(0.25, 0.1, 0.25, 0.1)`
`ease-in`	천천히 시작 = `cubic-bezier(0.42, 0, 1, 1)`
`ease-out`	천천히 끝 = `cubic-bezier(0, 0, 0.58, 1)`
`ease-in-out`	천천히 시작, 천천히 끝 = `cubic-bezier(0.42, 0, 0.58, 1)`
`step-start`	시작하는 시점에 스텝을 끊어줌 = `steps(1, start)`
`step-end`	끝나는 시점에 스텝을 끊어줌 =`steps(1, end)`
`steps(int, start/end)`	`int` = 정수, `start`/`end` `int`만큼 시작이나 끝나는 시점에 스텝을 끊어줌
`cubic-bezier(n, n, n, n)`	베지어 곡선에 원하는 컨트롤 포인트 직접 설정
`initial`	속성의 기본값으로 적용
`inherit`	부모의 영향을 받아 적용

📎 CSS transform

transform : Object를 여러 형태로 변형할 때 사용하는 속성, transition과 함께 사용하면 더 큰 효과를 낼 수 있다.

CSS Transform Playround

`scale(sx)` / `scale(sx ,sy)`

한 개 또는 두 개의 값으로 지정, 각 방향에 적용할 크기를 나타냄
= Resizing

sx : x축 방향으로 크기 적용
sy : y축 방향으로 크기 적용, 지정되지 않은 경우 기본값은 sx와 같은 값으로 적용되어 균일한 배율로 크기 적용

[출처: Webanimation 1부 css Animation]

`rotate(a)`

각도만큼 회전, 양수는 시계 방향, 음수는 반시계 방향
= Rotation

a : 회전 각도
단위 : deg(degree)

[출처: Webanimation 1부 css Animation]

`translate()`

x축 또는 y축으로 이동
= Moving

Single <length-percentage> values : x축 방향으로 이동, y축은 0으로 설정
Double <length-percentage> values : x축과 y축 방향으로 이동
- 단위 : px, %

  /* Single <length-percentage> values */
  transform: translate(200px);
  transform: translate(50%);

  /* Double <length-percentage> values */
  transform: translate(100px, 200px);
  transform: translate(100px, 50%);
  transform: translate(30%, 200px);
  transform: translate(30%, 50%);

[출처: Webanimation 1부 css Animation]

`skew(ax)` / `skew(ax, ay)`

한 개 또는 두 개의 값으로 지정, 각 방향의 각도에 따라 왜곡(비틀어짐)
= Distortion

ax : x축을 따라 왜곡
ay : y축을 따라 왜곡, 지정되지 않은 경우 기본값은 0
단위 : deg(degree)

[출처: Webanimation 1부 css Animation]

`transform-origin`

transform이 적용되는 기준점

기본값 : 해당 요소의 중심
left, right, top, bottom, center을 이용해 위치 설정 가능
숫자값 가능

  /* One-value syntax */
  transform-origin: 2px;
  transform-origin: bottom;

  /* x-offset | y-offset */
  transform-origin: 3cm 2px;

  /* x-offset-keyword | y-offset */
  transform-origin: left 2px;

  /* x-offset-keyword | y-offset-keyword */
  transform-origin: right top;

  /* y-offset-keyword | x-offset-keyword */
  transform-origin: top right;

  /* x-offset | y-offset | z-offset */
  transform-origin: 2px 30% 10px;

  /* x-offset-keyword | y-offset | z-offset */
  transform-origin: left 5px -3px;

  /* x-offset-keyword | y-offset-keyword | z-offset */
  transform-origin: right bottom 2cm;

  /* y-offset-keyword | x-offset-keyword | z-offset */
  transform-origin: bottom right 2cm;

  /* Global values */
  transform-origin: inherit;
  transform-origin: initial;
  transform-origin: revert;
  transform-origin: unset;

`translate` vs `position`

translate, position 모두 원하는 좌표로 요소를 움직일 수 있다.
그렇다면, 우리는 언제 translate을 사용하고 position을 사용해야 할까?

정적인 사이트에서 요소의 위치를 단순 배치하는 경우 => position
애니메이션 또는 동적으로 요소의 위치를 이동해야하는 경우 => translate

👉 🦁_21.11.09(2) TIL 로 이동

Bori

이전 포스트

🦁_21.11.08 TIL

다음 포스트

🦁_21.11.09(1) TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 11월 09일(1)

📎 레이아웃 구현 프로젝트_1

정글 시네마 - 소스코드 보기

📝 CSS

📎 SVG

SVG 장점

SVG 단점

HTML에 SVG를 적용하는 방법

CSS 적용해보기 - 윙크하는 개구리

실습

📎 상호 작용을 위한 가상클래스

:hover

:active

:focus

📎 CSS transition

📎 CSS transform

scale(sx) / scale(sx ,sy)

rotate(a)

translate()

skew(ax) / skew(ax, ay)

transform-origin

translate vs position

👉 🦁_21.11.09(2) TIL 로 이동

🦁_21.11.08 TIL

🦁_21.11.09(2) TIL

0개의 댓글

`:hover`

`:active`

`:focus`

`scale(sx)` / `scale(sx ,sy)`

`rotate(a)`

`translate()`

`skew(ax)` / `skew(ax, ay)`

`transform-origin`

`translate` vs `position`