지속가능한 개발 노트:)

GSAP은 Tween 및 Timelines를 만들고 이를 제어하는 다양한 메서드와 속성을 가진 객체(object)입니다. 그렇다면 Tween과 Timelines는 무엇인가?! 오늘은 먼저 Tween에 대해서 알아보겠습니다!! 💫 Tween Tween은 애니메이션의 속성을 정의하고, 그 속성대로 애니메이션이 작동하게 하는 것을 말합니다. target, duration 등 작성된 속성을 토대로 Tween이 작동하면서 해당 시점의 속성 값이 무엇이어야 하는지를 파악하여 이에 따라 적용합니다. (영문을 해석하다 보니... 매끄럽게 이해하시기 어렵다면... 죄송합니다...허허) Tween을 생성하기 위한 기본 메소드는 .to(), .from(), .fromTo()가 있습니다.3가지의 메소드는 Tween 인스턴스를..

💫 GSAP 이란? GSAP은 이미 많은 사용자를 보여하고 있는 자바스크립트 애니메이션 라이브러리입니다. 보통 CSS 혹은 제이쿼리 등을 이용하여 애니메이션 효과를 구현하지만, 보다 복잡하고 화려한 애니메이션을 구현하기에 어려운 부분이 있기에 GSAP을 이용한다고 합니다!! GSAP도 간단한 애니메이션을 구현하는 것은 사용법이 매우 간단하지만, 복잡한 애니메이션을 구현하게 될 때는 사용법이 무척 어렵고 헷갈려집니다;; 허허 그리하여 저도 이참에 기본부터 시작해서 기깔나는 애니메이션을 구현할 수 있도록 GSAP 정복을 해보려고 하니 함께 하시죠!!!ㅎㅎㅎㅎ 우선 셋팅부터 해야겠지요? 설치(Installation) GSAP 공홈에서는 zip파일로 다운로드, NPM, CDN, GITHUB 등 다양한 이용방법을..

PC보다 모바일 작업이 까다롭게 느껴지는 이유는 PC는 작업 도중 개발자 도구로 즉각적으로 확인 하여 정확도를 높일 수 있지만, 모바일은 PC에서 제작된 작업물을 정확하게 모바일 환경에서 바로 바로 확인하기 어렵기 때문이라고 생각합니다. 그래서!! 정확하고 빠르게 모바일 작업물을 확인하기 위해 모바일, 그 중에서도 안드로이드 기기의 개발자 도구 활용해 디버깅할 수 있는 방법을 알려드리려고 합니다! 1. 안드로이드 기기 설정에서 개발자 모드 활성화하기 2. 안드로이드 기기와 개발용 컴퓨터 케이블로 연결하기 3. 개발용 컴퓨터에서 크롬 실행 후 chrome://inspect 주소창에 입력 4. 로컬호스트 환경을 포트포워딩을 통해서 연결 정말 훨씬 빠르고 정확하게 답답함 없이 해결 가능해서 아주 좋네요 정말 ..

변수(variable)은 데이터를 저장할 수 있는 메모리 공간을 의미하고, 저장된 값은 변경될 수 있죠. 이런 변수를 css에서도 사용할 수 있습니다. 인터넷 익스플로러에는 지원이 되지 않기 때문에 사용을 거의 안했지만, 이제 인터넷 익스플로러가 사라졌으니, 유용하게 사용하기 위해 더 자세히 알아둬야겠습니다 ㅎㅎ 1. css변수 선언 및 사용 변수의 이름을 지정할 때 변수 맨 앞에 --를 붙여줍니다. 그리고 변수를 사용할 때는 var(변수명)으로 호출합니다. /*전역변수 선언*/ :root{ --main-bg:#e7e7e7; } /*지역변수 선언*/ .content{ --content-bg: #000; } /*변수 호출*/ .main{ background:var(--main-bg); } 2. css변수 ..

종종 디자인에 보더에 그라데이션이 들어가는 경우가 있습니다. 배경에 넣는 건 나름 익숙하지만 보더에?! 약간 생소할 때가 있어 정리해보려합니다! 1. 사각형 border (feat. border-image ) HTML 삽입 미리보기할 수 없는 소스 border 속성엔 두께와 solid만 지정하시고, border-image를 이용해 사각형 border에 간단히 그라데이션 줄 수 있습니다. border-image는 요소 주변의 테두리를 이미지로 지정하는 속성으로, url에 이미지 파일을 연결시키거나, 그라데이션을 넣어 줄 수 있습니다. border-image:url(./img/abcd.png); border-image:linear-gradient(to top, #FF6D60, #98D8AA) border-i..

부모 div(초록색 보더) 안에 2개의 div 요소가 있고, div 1은 상단에 위치하며, height값이 고정이며, div 2는 하단에 위차하고 나머니 공간을 채워주길 원합니다. .flex { display:flex; flex-direction:column; height:100%; } .flex .div1{height:100px;} .flex .div2{flex-grow:1;} flex를 이용하여 손쉽게 해결한 듯 했습니다. 그. 러. 나 문제는 div2의 컨텐츠 양이 많아지면 부모 div를 넘어가네요... 이럴 경우 해결방법!!! min-height:0; 가변 자식 요소에 min-height:0;을 줍니다. flex 아이템의 min-height, min-width 초기값은 auto이며, 초기값인 fl..

css를 이용하여 파이 차트를 만들기! :before 을 이용하는 방법 HTML 삽입 미리보기할 수 없는 소스 가장 많이 사용하는 방법인듯 합니다. 50%까지는 간단하게 표현할 수 있지만, 60%이상을 표현하기 위해서 또 다른 애니메이션을 작성해야하기에 약간 복잡한 거 같네요... svg를 이용한 방법 HTML 삽입 미리보기할 수 없는 소스 svg에 대한 이해도가 있어야 사용할 수 있는 방법이긴 하지만, 위 방법보다는 어떻게 표현되는지, %의 수치와 도형의 수치를 일치하게 표현할 수 있어서 훨씬 직관적인 방법인 거 같습니다. conic-gradients를 이용한 방법 HTML 삽입 미리보기할 수 없는 소스 제일 간단하고 좋은 방법이 아닐까 싶네요ㅎㅎ 나누고 싶은 영역의 각도만 작성해준다면 순식간에 완성하..

TV를 시청하다 보면 하단에 공지 및 안내 자믹이 흐르는 것을 본 적 있으시죠? 웹에서는 어떻게 구현하면 좋을지 알려드릴게요!! 아주 간단하게는 html의 marquee 태그를 사용하면 됩니다. HTML 삽입 미리보기할 수 없는 소스 정말 간단해서 고민한 머쓱해질 지경이랄까요....ㅎㅎㅎㅎ 간단하게 속성을 파악해볼까요? ● 의 속성 - width / height : 스크롤의 크기나 비율 지정 - bgcolor: 스크롤의 배경색상 지정 - direction : 스크롤의 움직임 방향(up, down, left, right)을 지정 - behavior : 스크롤 방식을 설정(scroll, slide, alternate) - loop : loop에 작성한 횟수만큼 반복, 기본값은 무한반복 - scrollamou..