[디자인워크샵] 6/21~24

Atom을 이용해서 특히 CSS를 중점적으로 이용하는 법을 배움.

요약
!atom에서!
1. html 기초
2. css 기초
3. 여러 가지 단축어들

여러 단축어들

• 시작 시에: ! tab
• 코드 깔끔하게: ctrl + option + B
• div class/id 한번에 만들기

GSAP: 그래픽 기반 자바스크립트 라이브러리
사용-> head에 src 추가해줌.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js" integrity="sha512-3WGIRFCuTpZhqYujwLp5RtARPkOy3uRtc3RXB31bJ9/i6VH2C66Z0WBV6gHhdhbUIDKFx8yTkLfEjdQM5Wl+ZQ==" crossorigin="anonymous"></script>

• vw: viewport width
  vh: viewport height
  100으로 하면 화면에 꽉 채워짐.
  -webkit-text-stroke: 4px #fff //무슨뜻..?
  overflow:hidden; //넘쳐도 바운스가 없음.

  <script>
    document.addEventListener("mousemove", e => {
      gsap.to(".text", {
        x: e.clientX, //x좌표
        y: e.clientY, //y좌표
        stagger: -0.05 //초 단위 (이동속도?)
      });
    });
  </script>

* 닷홈 / FileZilla 이용해서 서버에 올리기