jineecode

overflow-x: auto; 를 갖고 있는 div가 있고, 그 안에 여러 가지 이미지가 들어있다. 즉, 가로로 스크롤 되는 기능. 그리고 이미지 중 active를 갖고 있는 이미지는 border가 적용된다. 페이지에 진입할 때, active 클래스를 갖고 있는 자료가 화면 가운데에 보이도록 하는 기능을 넣기로 했다. .growthHorizontalWrapper { display: flex; width: 100%; overflow-x: auto; } .growthWrapper { width: 113px; height: 185px; background-color: #fff; border-radius: 2px; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); display:..

test</div>

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")...