2021.07.08 CSS-7

정혜리·2021년 7월 8일
0

웹프로그래밍

목록 보기
9/11

Day9, 애니메이션 패키지에 대해서 배웠다. 오늘 배운것을 복습 하기 전에 태그의 Inline/Block 속성 중 어떤 속성을 가지고 있는지 알파벳 S로 시작하는 태그에 대해서 복습하고 넘어가자.

Inline : <s></s>,<samp></samp>,<strong></strong>,<sub></sub>,<sup></sup>
Block : <section></section>,<summary></summary>

오늘 무엇을 배웠지?

애니메이션

애니메이션 패키지

  • 자주 사용하는 애니메이션을 패키지로 만들어 간편하게 사용할 수 있도록 되어있음.
  • 애니메이션 라이브러리 사이트
    https://animate.style/
    -> CDN <link> 코드를 복사해서 연동한 css <link>코드 위에 위치하도록 붙여넣는다. 그러면 애니메이션이 등장!
    그리고 원하는 애니메이션을 css언어로 디자인 할 수도 있다.
    https://codepen.io/search/pens?q=animation ->로그인이 필요한 사이트


example은 수업때 적용했던 것이고
짜잔 과 NETFLIX는 animate.sytle에서 뭔가 만들어보고 싶은 애니메이션을 적용해본 것이다. 애니메이션을 직접 .gif 파일로 올리지 못한다는 내 실력이 비탄스럽다.

<div class="animate__animated animate__bounce animate__faster">Example</div>
<div class="animate__animated animate__bounceInUp">짜잔</div>
<div class="animate__animated animate__fadeIn">NETFLIX</div>

무엇이 어려웠지?

딱히 어려운 것은 없었다...! 오히려 내가 직접 만들어 보겠다고 낑낑 대는게 얼마나 바보같은 일인지 깨달았다.

그래서?

http와 css 두개로만 엄청난 사이트를 만들 수 있다는 것을 알고 충격을 받았다. 생각보다 엄청난 능력의 소유자들이 너무 많았고 이를 공짜로 배포한다는 건 또 적잖은 충격이었다. 생각해보면 누구든지 노력하면 만들 수 있기 때문에 코드를 짜는 것이 저작권과 같은 권리를 주장하기는 어려운 영역이라는 생각도 어렴풋이 들었다.
워낙에 스스로 해내는 것에 대해 큰 가치를 두고 살아온 터라, 남들이 만든 코드를 사용하는 것 보다 스스로 만드는 것이 시간이 더 오래 걸리고 어쩌면 결과물 조차 더 나빠 질 수 있는 과정임을 인지하고 있음에도 불구하고 포기하지 못했다. 물론, 처음 시작해서 배울때는 스스로 해내는 것이 실력이 느는데 정말 도움이 된다고 생각한다. 하지만 이 방법을 계속해서 고수하다간 도태되겠구나...! 라는 생각이 아주 크게 들었다. 그래서 필요하다면 도움을 얻을 수 있는대로 얻어서 더 효율적인 방법으로 제작하고, 깔끔하고 사이트 성격에 맞는 디자인을 잘 짜는 것이 더 낫다는 생각이 들었다.

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0708

0개의 댓글