kimyws

■ GSAP○ GSAP 이란?GreenSock Animation Platfrom 은 인터랙티브 웹을 위한 요소로화려한 애니메이션과 스크롤 이벤트를 쉽게 구현할 수 있도록 도와주는타임라인 기반의 JS 라이브러리임 ○ CDN 세팅  ■ GSAP 기초○ 기본 메서드- gsap.to()움직임의 끝나는 점을 지정하는 애니메이션원래 위치에서 해당 위치로 변경한다.gsap.to("대상",{속성:값, 속성:값},딜레이);gsap.to(".box1",{x:200, duration:2},3);// 클래스가 .box1인 대상을 x축으로 200으로 2초간 이동해줘 3초이후에 - gsap.from()애니메이션이 지정된 속성에서 시작하여현재 속성으로 이동gsap.from(".box", { duration: 2, x: -100, ..

■ Fullpage-js Fullpage.js는 웹 페이지에서 전체 화면 스크롤링 효과를 구현할 수 있는 JavaScript 라이브러리 웹 페이지를 여러 섹션으로 나누어 각 섹션을 스크롤링으로 전환할 수 있다.이를 통해 사용자는 웹 페이지를 일반적인 방법보다 더 직관적으로 탐색할 수 있으며, 웹 페이지의 시각적 효과를 높일수 있음. ■ Fullpage 적용○ CDN적용- CDN 개념Content delivery Network 콘텐츠 전송 네트워크서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용 - 링크 가져오기fullpage cdnhttps://cdnjs.com/libraries/fullPage.js  - CSS, JS 링크 ○ Fullpage 적용- HTML전체 페이지명(id =..

■ Swiper ○ Swiper란?웹에 사용하기 적합한 오픈 소스 JavaScript 라이브러리반응형 슬라이드 쇼 및 스와이퍼 기능을 쉽게 구현할 수 있음 ○ Swiper 기본 세팅 (CDN 활용)- CDN 개념Content delivery Network 콘텐츠 전송 네트워크서버 네트워크로 사용자에게 빠르고 효율적으로 콘텐츠를 전달하기 위해 사용 - CSS 속성 및 스크립트 추가 - Style 속성추가속성에 대해서 미리 설정을 지정해줌  - Swiper 구조 설정 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9  - Scr..

■ 화면에 따른 Html 열기○ JS로 만들어서 Index(모바일, PC)에 링크function winSizeHtml(){ let winw = $(window).width(); if(winw  ■ 기존 요소에서 요소 내부 요소 변경○  기존 콘텐츠에 덮어 쓰기$('#contentBox').load('content2.html'); ○  뒤에 추가 하기$('#changeContentBtn').click(function() { $('#contentBox').append('이것은 새로 추가된 콘텐츠입니다!');}); ○  앞에 추가하기$('#changeContentBtn').click(function() { $('#contentBox').prepend('이것은 기존 콘텐츠 앞에 추가된 콘텐..

■ JQuery 적용○ JQuery란?자바 스크립트 라이브러리로 크로스 브라우징 기능을 가지고 있음크로스 브라우징은 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 해줌.자바 스크립트는 코드가 너무 길어지고 복잡해지는 단점이 있지만JQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현가능 ○ JQuery 적용- JQuery 사이트에서 주소를 복사해서 가져와서 사용 - JS파일 만들어서 JQuery 적용 해도 됨내용 전체 복사 - JQuery 사용body에서 아래쪽에 사용 클래스 및 아이디로 된 태그들이 생성전에 실행됨.body밖에 사용해도 문제는 없음(아래쪽이면)      ■ JQuery 사용○ 기본 불러오기- document(문서가) ready(준비된후) / 간략..

■ 자바스크립트(Javascript)란?○ 정의JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어임웹 페이지가 단순히 정적인 정보를 표시하는 것 이상으로시의적절한 콘텐츠 업데이트, 대화형 지도, 애니메이션 2D/3D 그래픽, 스크롤링 비디오 주크박스 등을표시할 때마다 JavaScript가 관련되어 있음.  ○ HTML, CSS, Javascript 차이- HTML : 문단, 제목, 데이터 표를 정의 페이지에 이미지, 영상을 삽입하는 등 콘텐츠를 정의 - CSS : 배경색 및 콘텐츠에 스타일을 적용하는 데 사용하는 언어 - Javascript : 동적으로 변경되는 콘텐츠를 만들고 멀티미디어를 제어하며이미지에 애니메이션을 적용하는 등 모든 작업을 수행할 수 있는 ..

■ 피그마 Local file로 변경- xxx.fig 파일로 로컬형태로 저장 가능    ■ 피그마 협업 및 Icon○ 많이 사용하는 Plug in○ 피그마 협업- Team project : 1개의 팀 프로젝트에 4개의 Design 파일을 제작 가능그 이상은 유료 - Share를 눌러서 공유할 수 있으며이메일을 통해 Invite 초대할 수 있다.Can view, Can edit으로 사용가능함  ○ 아이콘 및 플러그인 추가Community profile을 활용 검색하여 Icon 및 기타 플러그인 추가 가능Preview 를 활용하여 문제 없이 제공하는지 확인 필요    ■ 피그마 컴포넌트디자인에서 반복적으로 사용되는 요소를 한 번만 정의해두고,다양한 곳에서 재사용할 수 있는 기능컴포넌트를 사용하면 디자인의 일..

■ 애니메이션 (Animation) 기본○ 애니메이션 정의애니메인션은 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시킴애니메이션은 애니메이션을 나타내는 CSS 스타일과애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. ○ 애니메이션 하위 속성- animation-name : 중간 상태를 지정, 중간 상태는 @keyframes 규칙 이용 - animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 - animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행 - animation-delay : 로드 되고 얼마만큼의 시간이 지난 후 실행될지 설정 - animation-iteration-count : 애니메이션이 몇 번 반복될지 ..

■ 레이아웃(Layout)○ 레이아웃이란?- 구성요소를 공간에 효과적으로 배열하는 기술- CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술- CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. ■ 대표적인 레이아웃 기술○ 일반적인 문서 흐름 ○ box모델 ○ display 속성 ○ position 속성 ○ flex box ○ grid layout

■  레이아웃(Layout)전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의 시각적 요소들을 한정된 공간 안에 적절하게 배치하는 것을 의미 인터페이스 디자인에서 레이아웃이란 화면의 전체적인 구도를 파악하고 심미적 요소들을 화면에 배치하는 것을 의미 시각적 인터페이스의 레이아웃을 결정하는데 있어서의 핵심은정보의 분류와 위계, 체계 등의 정보 설계, 즉 콘텐츠 구조임 레이아웃을 구성할 때에는 그리드가 명확해야 하며, 페이지 간의 일관성이 뛰어나 사용자가 어떤 페이지에 머물든지 간에 원하는 정보를 빠르게 찾을 수 있어야 한다. 그러나 모든 페이지가 일관적이기만 하면 페이지의 인상이 지루해질 수 있기 때문에일관성을 유지 하면서도 약간의 변화와 다양성을 줄 수 있어야 한다.레이아웃은 웹사이트의 심미성..