kimyws

MENU1 submenu1 submenu2 submenu3 submenu4 MENU2 submenu1 submenu2 submenu3..

■ 레이아웃 설정○ A-1 유형  ○ D-2 유형 ○ D-4 유형 ○ E-1 유형 ○ F-1 유형 ○ F-4 유형        ■ 메뉴바 나오게 위○ 메뉴 - 1 형태   - HTML구성 ..

■ 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('이것은 기존 콘텐츠 앞에 추가된 콘텐..

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

■ 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 를 활용하여 문제 없이 제공하는지 확인 필요    ■ 피그마 컴포넌트디자인에서 반복적으로 사용되는 요소를 한 번만 정의해두고,다양한 곳에서 재사용할 수 있는 기능컴포넌트를 사용하면 디자인의 일..