본문 바로가기
반응형

전체 글

 (127)
React 실습 -3 호호호호 실습2를 마치고 오셨나? 그렇다면 아직 멀었군ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 실습 2에서 한 일들은 효율적이지 않아!!! 왜냐하면 우리가 새로운 음식을 추가할 때 마다 복붙을 해야 하거든!! 우리는 복붙을 원하지 않아! 데이터는 처음부터 우리가 가지고 있던 데이트가 아니기 때문이야 이 데이터들은 웹사이트에서 온 데이터들이야. 따라서 우리는 갖고 있지 않은 데이터를 복붙 할 수 없어! 따라서 이제 할 방법은 웹사이트에 동적 데이터를 추가하는 방법이야! 가보자고~ 우리가 할 것은 데이터가 있다고 시뮬레이션 하는거야. 데이터가 이미 API에서 왔다고 생각해보자! 따라서 다음 할 일은 함수를 만드는거야, 다른 함수는 foodILike라고 불리는 array야 이것은 food의 배열이 될거야! 기본적으로 모든 컴포넌..
React 실습 -2 제가 하면 여러분도 하실 수 있습니다!! 진짜에요.. 파일간의 혼란을 피하기 위해 potato 파일을 지워보자! 결과를 예상해봅시다! 당연히 오류! potato 파일에 있던 컴포넌트가 사라졌거든! 그럼 컴포넌트를 생성하면 될까? 결과는 ?? 아싸 나온다리!!!!! 자 이제 컴포넌트는 이해한것 같고! 진도를 나가보자!! JSX에서 두번째로 이해해야 할 것은 이 컴포넌트에 정보를 보낼 수 있다는 점!!!!! React가 멋진 이유는 재사용 가능한 컴포넌트를 만들 수 있다는 점!! 이 말은 컴포넌트를 반복 사용 가능하다는 말!! 예를 들자면, 영화목록이 있다고 생각해보자 영화 목록이 여러개 있다면, 하나하나를 수동으로 만들어야하지! 하지만 컴포넌트를 사용한다면 하나의 컴포넌트만 생성하고 나머지는 부르기만 하면..
React 실습 -1 component는 HTML을 반환하는 함수! 따라서 우리는 function, application을 가지고 있고 이것은 HTML을 반환할거야 ReactDOM.render(, document.getElementById("potato")); 부분이 우리가 component를 사용하고자 할 때, component의 형태! 리액트는 컴포넌트를 사용해서 HTML처럼 작성하려는 경우에 필요해 javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다 JSX는 react에서만 쓰이기 때문에 vue, augular 등 에서는 아무짝에도 쓸모가 없어! 하지만 react를 써야한다면 알아둬야한다! 어떻게 컴포넌트를 만들 수 있을까? 매우 간단하지 src폴더에 potato.js를 생성! 여기서 중요!! 컴포넌트..
자동으로 높이 설정 및 스크롤 했을 때 페이지 상단으로 이동 //높이 정하기 function activeHeightSet() { var activeHt = $(".swiper-slide-active .mainImg").height(); eventActiveHt(activeHt); scrollUp(); } //높이 실행 function eventActiveHt(activeHt) { $(".swiper-container").stop(true).animate( { height: activeHt, }, 200 ); } //스크롤 했을 때 페이지 맨 위로 이동 function scrollUp() { $("body, html").stop(true).animate( { scrollTop: "0", }, 200 ); } // 스와이퍼 할 때 함수 실행 swiper.on("sli..
css transform matrix [CSS] transform matrix transform의 값들인 translate(이동), skew(기울기), rotate(회전), scale(확대)를 transform: matrix(1, 0, 0, 1, 0, 0) 또는 행렬로 표시하는 것을 말합니다. ** transform matrix 를 쓸 경우 transform 함수들보다 간결하게 사용이 가능합니다! ​ transform: translate(0,0); transform-origin: top right bottom right center; transform: skew(45deg); transform: rotate(45deg); transform: scale(1); transform: matrix(1,0,0,1,0,0) ​ [ transfrom 행..
모션 함수들 스크롤 모션 function scrollMotion(tl, obj) { var controller = new ScrollMagic.Controller(); var scene = new ScrollMagic.Scene({ triggerElement: obj, offset: -300 }) .setTween(tl) .reverse(false) .addTo(controller); //.addIndicators(true); } 돈 흩날리면서 떨어지는 모션 function moneyMotion1(obj, d, tg) { var tl = new TimelineMax(); tl.to(obj, 0.7, { opacity: 1, delay: d }).to(obj, 3, { bezier: [ { x: 70, y: 100 }..
슬라이드 진행시 다음 모션 미리 작동 되어 있을 때 // 슬라이드 시, 200ms의 시간안에 다음 슬라이드로 넘어갈 때 //기존 슬라이드의 높이가 보이기 때문에 모션이 이미 진행된 상태로 인식 됨.. // 해결방법 function scrollUp() { $('body, html').stop(true).animate( { scrollTop: '0', }, 200, // scrollUp() 함수 안에 함수를 만들어서 초기화코드 추가! function() { motionReset(); mainMotion(); mainMotion2(); } ); }
스크롤 했을 때 헤더 고정 참고해라 ilottedfs.com/LDFmagazine/201022/sub3/index.html function topScrollMotion() { // IE하위 버전 호환용 var supportPageOffset = window.pageXOffset !== undefined; var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat'; var header = $('.header'); var back = $('.header_back'); var title = $('.header_title'); var share = $('#main_share'); // 현재 스크롤 값 var _top = supportPageOffset ? window.pageYOff..
반응형

티스토리툴바