210707 개발일지

1) 학습한 내용
CSS Transform/Trasition/Animation
github

1. Transform

    transform : 선택한 오브젝트의 크기조절, 각도 회전, 위치변경
    transform: rotate(45deg); 2차원적인 회전 효과, 평면적 회전, 양수:오른쪽 회전,음수:왼쪽으로 회전
    transform: scale(2, 3); 비율로 확대 축소할때 사용, 2는 width값 두배로(x축), 3은 y축을 3배 키운단 의미. 소수점 단위의 비율도 가능, 스케일은 적용한 영역의 자식까지 영향을 미침
    transform: skew(10deg, 20deg); 선택한 영역에 각도에 영향, 3차원적 10deg x축으로 회전, 20deg는 y축으로 회전, 양수 음수 모두 사용 가능(6개 사용하면 정육면체 구현 가능 3차원이니까)
    transform: translate(100px, 300px); 선택한 영역 오브젝트 위치변경시 사용. 100px는 x축, 300px는 y축으로 움직임 

   주의점
   https://www.w3schools.com/css/css3_2dtransforms.asp
   transform은 익스플로러 10에서 사용가능. 그 외 에도 사용 하고 싶으면
   프리픽스를 달아두면 가능 '-webkit/moz/ms/o-'적으면 전부 프리픽스(접두사같은것) 여러 브라우저 각 하위 버전까지 지원. 앞에 프리픽스 속성 넣고, 그냥 기본인 transform: rotate(10deg); 디폴트로 넣어주면 됨

   	-webkit-transform: rotate(10deg); 크롬,사파리
   	-moz-transform: rotate(10deg); 파이어폭스
   	-ms-transform: rotate(10deg); (익스플로러 9.0까지 포함해서 적용한단 뜻)
   	-o-transform: rotate(10deg); 오페라 

   CSS-Transfroms 참조사이트 https://www.w3schools.com/css/css3_2dtransforms.asp
   

---

2. Transition

  .transition {
      width: 300px;
      height: 300px;
      background-color: yellow;
  }

  .transition:hover {
      width: 600px;

  } 마우스 가져다대면 화면이 늘어남


transition 자연스러운 움직임 효과 넣기위해
transition-property: width; 변화주고픈 것
transition-duration: 2s; 애니메이션 진행 시간
transition-timing-function: linear; 속도에 영향  linear, 일정한 속도
transition-delay: 1s; 1초 기다렸다가 시작하는 의미

위 속성을 다 쓰는 것보다 한줄(아래예시)로 정리 하는 것이 나음.

transition: width 2s linear 1s; 

단 숫자가 두 개일시, 먼저나온게 duration 그 뒤가 delay. 하나의 숫자만 기입시 duration으로 인식 됨

---

3. Animation

transition과 다르게 animation은 자동으로, 저절로 움직이게 하는 효과

animation-iteration-count/infinite(무한으로 진행): 6; 애니메이션 진행 횟수 6번
animation-direction: normal/alternate; 진행방향/갔다돌아옴(왕복효과):이때는 animation-iteration-count: 6;이면 3번만 됨
@keyframes 코드 @keyframes changeWidth(애니메이션 네임과 동일하게 설정! 그래야 연동됨)



@keyframes changeWidth {
    from {
        width: 300px;
        height: 300px;
        background-color: yellow;

    }

    to {
        width: 600px;
        height: 600px;
        background-color: red;

    }

from부터 to까지 변화 됨 from(=0%로 표기 할수 있음) ~ to(=100%로 표기 가능).
퍼센트로 표현하면 25% 30% 등 특정 시점 지정 가능하단 말

cf.) animation-duration: 1.5s=1500ms(라고 적어도 ok);

.spin-lion {
    width: 150px;
    height: 150px;
    background-color: blueviolet;
    animation-name: spinLion;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}  

여기서 animation: spinLion 1.5s linear infinite alternate;로 한줄로 적어도 같은 효과나옴 먼저나오는게 duration 그다음이 delay.(동일) 위의 숫자 외에는 순서 상관없음.

@keyframes spinLion {
    from {
        transform: rotate(-10deg);

    }

    to {
        transform: rotate(10deg);
    }
}

---

프리픽스 달았을시, keyframe에도 똑같이 붙여줘야함 (ex.-webkit-)
keyframes 앞에 -webkit- 달았다고 해서 자동으로 들어있는 transform 전부 적용 안되므로 -webkit- 일일이 다 넣어줘야 함, 코드가 필연적으로 늘어날 수 밖에 없긴 함.

  .spin-lion {
      width: 150px;
      height: 150px;
      background-color: blue;

      /*
      animation-name: spinLion;
      animation-duration: 1.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      */

      -webkit-animation:  spinLion 1.5s linear infinite alternate;
      animation:  spinLion 1.5s linear infinite alternate;

  }

  @-webkit-keyframes spinLion {
      from {
          transform: rotate(-10deg);

      }

      to {
          transform: rotate(10deg);
      }
  }


  @keyframes spinLion {
      from {
          transform: rotate(-10deg);

      }

      to {
          transform: rotate(10deg);
      }
  }

https://jeremyckahn.github.io/stylie/ 원하는 방향 설정후-export-(W3C는 디폴트로 넣어주기,기본호환) output size는 나타나는 좌표값들이 촘촘해짐,결과는 동일한데 내용물이 숫자가 촘촘히 나타남.

padding: 20px; 이렇게 주면 상하,좌우 모두 20px로 통일됨

투명도:opacity(1:보임~0:안보임), 오른쪽으로 움직이는 효과, 글자까지 영향 미쳐서 글씨가 흐려짐. 그럴땐 rgba()코드로 글자 색상 지정해주는게 좋음

background-color: rgba(255, 255, 255, 1) 1이 투명도 나타냄
오퍼시티는 전제를 투명으로 하므로 무언갈 보이게 할때는 색상값을 rgba로 사용하는게 좋음

animation-play-state: running/paused; 브라우저 들어가자마자 애니메이션 움직이는 것/멈추겠다

색이 갑자기 바뀌면 어색하므로 최초 박스를 만들었을 때 색깔과 동일하게 주는게 일반적, animation-fill-mode: backwards; 키프레임에 최초(0%)로 설정된 값으로 보여주겠단 태그

box-sizing: border-box; 만들어진 크게 기준으로 보더가 안쪽으로 형성되는 것
두가지 동시(바깥, 안쪽) (아래 예시)

.outer-border {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 200px;
    height: 200px;
    border: solid 15px red;
    border-radius: 50%;

    margin: 0 auto;
    margin-top: 200px;

    animation: outerBorder 2s infinite;
}

@keyframes outerBorder {
    0% { border-color: red; transform: scale(1);}
    25% { border-color: yellow; transform: scale(1.2)}
    50% { border-color: blue; transform: scale(1.3)}
    75% { border-color: green; transform: scale(1.2)}
    100% { border-color: pink; transform: scale(1)}
}

.inner-border {
    box-sizing: border-box;
    width: 75px;
    height: 75px;
    border: 5px solid purple;

    animation: innerBorder 2s infinite alternate;
}

@keyframes innerBorder {
    0% { transform: rotate(0deg); }
    25% { border-color: blue; border-width: 10px;}
    50% { border-color: yellow; border-width: 20px;}
    75% { border-color: green; border-width: 40px;}
    100% { border-color: gray; border-width: 5px; transform: rotate(360deg); }
}

transform: translateY -> y축에만 영향을 미침

---

4. 실습

마리오 실습

  .mario-container {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid 10px black;

      margin: 0 auto;
      margin-top: 200px;
  }

  .mario-container .mario-coin {
      position: relative;
      width: 70px;
      height: 70px;
      background-color: yellow;
      border-radius: 50%;

      margin: 0 auto;
      margin-top: 100px;

      animation: jumpCoin 0.8s linear infinite;
  }

  @keyframes jumpCoin {
      0% {
          transform: translateY(0);
          opacity: 1;
      }

      50% {
          transform: translateY(-100px) rotateY(180deg);
          opacity: 0;  y축에만 영향을 미침
      }

      100% {
          transform: translateY(-100px) rotateY(360deg);
          opacity: 0;
      }
  }




  .mario-container .mario-box {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 0 auto;

      animation: jumpBox 0.5s linear infinite alternate;
  }

  @keyframes jumpBox {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
      100% { transform: translateY(0px); }
  }

width 100% 만든다는건 부모의 값으로 맞춰져 화면에 나타남

vertical-align: middle; img태그는 원래 밑에 공백을 가지고 있으므로 없애려면, 사용 하면 됨. 인라인 요소에 x축정렬인데 img도 사용 가능, x축 정렬로만 사용되는게 아니라 img가 가지고 있는 공백 제거할때도 사용 됨 디폴트로 넣어줘야 함.

부모가 3차원적인 특징이 가지고 있으면 자식으로 3차원 적용시 그 width값의 크기를 부모를 기준으로 설정할수 있음.

overflow: hidden; 스케일 넘쳐나는 부분들을 가려줌. 특정영역 벗어난 것을 감춰줌

cursor: pointer; 클릭을 나타내는 손모양의 속성값

https://animate.style/
애니메이션 구현되어 있는 css. 이미 구현되어 있음
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
정의 되어 있으므로 필요시 사용하면 됨
https://codepen.io/search/pens?q=animation 에서 animation검색 해서 참조

2) 학습내용 중 어려웠던 점
transform 활용법

3) 해결방법
https://www.w3schools.com/css/css3_2dtransforms.asp 사이트 참조

4) 학습소감
입력한 대로 움직인다는게 신기하다. 앞에서 배운 내용이 헷갈려
다시 찾아보기도 하지만 하나씩 틀이 잡혀가는 느낌이 든다.