jineecode

1. src\App.js App.js 에 hello 를 넣으면 2. public\index.html public\index.html의 HERE! 자리에 hello 가 들어간다. 3. src\index.js 이 원리는 src폴더의 index.js에 담긴 코드가 렌더해주기 때문이다. 당연히, document.getElementById('root') 의 root를 변경해주면 에러가 뜬다. 관리자 도구에는 hello가 있는 것처럼 보이지만, 실제로 소스코드를 확인해보면 없다. *이것이 바로 react 가 빠른 이유다. react는 소스코드에 바로 html을 넣지 않고 html에서 html을 추가하거나 제거하는 법을 알고 있다. *virtual DOM 이다. github.com/uhj1993/movie_app_2..

터미널을 열고 npm start 를 입력하면 창이 뜬다. 1. git init 2. 깃허브에 레포지토리 만들기 3. git remote add origin (만들어진 주소) 4. git add . 5. git commit -m "내용" 6. git push origin master

UPLOAD를 누르면 .uploadName에 이미지 이름이, .img1에 이미지가 들어가게 해보자. HTML UPLOAD "UPLOAD" label과 그 label에 연결된 input(#mainImage)이 있음. JS $(function(){ const fileTarget = $(".uploadHidden"); $("#mainImage").on("change", img1FileSelect); fileTarget.on('change', function(){ if(window.FileReader){ let filename = $(this)[0].files[0].name; $(this).siblings('.uploadName').val(filename); console.log(filename); } }); ..

1. animate event 디비전 안에 문단 animate 문법 $(selector).animate({params}),speed,callback); mouseenter 와 mouseleave를 쓴 animate 메서드 $(function(){ $('div').on("mouseenter",function(){ $('div').animate({"width": 300, "height":300}, 500); }); $('div').on("mouseleave",function(){ $('div').stop().animate({"width": 100, "height":100}, 500); }); }); *animate에 stop()을 넣어주지 않으면 마우스오버한 횟수를 모두 채웁니다. $('div').on("m..

0. 들어가기 전에... function(){} 바깥에다 this를 찍어보면 어떻게 나올까? this 는 윈도우를 가리킨다. console.log(this); $(function(){ }); function(){} 안에다 this를 찍어보면 어떻게 나올까? this는 $(function(){}) = document.ready, 즉 document를 가리킨다. $(function(){ console.log(this); }); 00 00 1. click event $(function(){ $(".box1").on("click", function(){ $("p").text("클릭했습니다!") }); }); $(function(){ $('.box1').click(function(){ $("p").text("클릭..

attr method click1 click2 $(function(){ let attr = $("div").attr("class"); // "green" }); 2. 파라미터가 2개이면, 1번 파라미터 속성을 2번 파라미터 값으로 변경합니다. $(function(){ let attr = $("div").attr("class","red"); }); html의 "div class" 가 "red"로 바뀐다 문법 $(selector).attr(attribute, value); 과제: click1 버튼을 클릭하면 green div 박스가 click2 버튼을 클릭하면 red div 박스가 나오게 해보자 더보기 $(function){ $(".btn1").click(function(){ $("div") .attr("c..

$(window).scroll(function(){ let scroll = $(window).scrollTop(); // offSet().top이 4개 필요하므로 반복문 사용 for(let i = 0; i < $("article").length; i++) { // console.log(i+"안녕 "); // article 각각의 높이를 읽어준다. let articleTop = $("article").eq(i).offset().top; // console.log(articleTop) // articleTop + article의 높이 = articlebottom let articleBottom = articleTop + $("article").eq(i).outerHeight(); let winHeight =..

.offset() : fixed 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다. .position() : absolute 같은 효과. 선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다. What I am good at (".gnb li") 을 누르면 스크롤 이동하게 해보자 $(".gnb li").eq(1).click(function(){ var offTop = $(".goodAt").offset().top; $("html,body").animate({scrollTop:offTop}); }); $(".gnb li")...