누렁이의 명예의전당

직접 자바스크립트 코드를 처음부터 짜기 귀찮으면남들이 만들어놓은 라이브러리를 사용해도 됩니다.UI 개발도 마찬가지로 복사 붙여넣기식으로 멋진 UI 개발이 가능합니다. 그렇다고 복붙식으로 포트폴리오를 만들면 개발실력이 아니라 복붙실력이 어필됩니다.       1. Swiper 캐러셀 (이미지슬라이드되는거) 만들고 싶으면 직접 코드 짜도 되겠지만좀 이쁘게 아니면 쉽게 여러기능을 만들고 싶으면 Swiper 라이브러리 써도 됩니다.호환 잘되고 이미지 lazy loading 이런 것도 되고 터치/드래그도 됩니다.  https://swiperjs.com/get-started#use-swiper-from-cdn여기가서 튜토리얼 그대로 js 파일, css 파일을 다운받아서 첨부한 뒤에html css js 예제코드 복사..

저번시간 숙제 : 버튼1 버튼3 기능 만들기 "버튼1 누르면 사진1 보여주세요~" 라고 코드짜면 되겠지만 지능 없는 컴퓨터에겐 정확히 명령줘야합니다. "버튼1 누르면 css 이렇게 수정해주세요~" 는 컴퓨터가 잘알아듣습니다. 그래서 우선 버튼1 누르면 어떻게 css가 변해야할지 판단부터 하면 되겠군요.  css 이리저리 만지면서 실험해보면 버튼1 눌러서 1번사진을 보여주고 싶으면 transform : translateX(0vw) 를 추가해야합니다. (아니면 transform 아예없애거나)버튼3 눌러서 3번사진을 보여주고 싶으면 transform : translateX(-200vw) 를 추가해야합니다.그래서 그거 그대로 코드로 옮겨왔습니다.  $('.slide-1').on('click', function(..

슬라이드되는 UI들을 캐러셀이라고 합니다.a one-way 애니메이션들어간 UI 만드는 법은 1. 애니메이션 시작 전 화면 만들기2. 애니메이션 종료 후 화면 만들기3. 언제 종료화면으로 변할지 JS 코드짜기4. transition 추가하기   사진 3개를 가로로 길게 배치, 나중에 전체를 왼쪽으로 이동시키면 된다.  .slide-container { width: 300vw; transition: all 1s;}.slide-box { width: 100vw; float: left;}.slide-box img { width: 100%;}  vw단위는 브라우저 폭에 비례한 단위..