반응형 Jquery, Javascript17 [JS] onclick 이용해서 링크걸기, 이벤트 걸기 안녕하세요 html 요소에 a태그 없이 onclick이벤트를 이용해서 링크 거는방법, 이벤트 거는 방법 소개합니다. 구조 링크 방법 이벤트 방법 두가지 구조가있는데 위 방법은 링크주소 쪽에 링크걸 주소를 입력하면 div에 링크가 걸립니다. 밑방법은 클릭시에 event()라는 함수를 불러옵니다. html부분 1번 박스 2번 박스 2개의 div 태그를 각각 onclick 이벤트를 넣어주었습니다. 1번박스는 네이버링크, 2번박스를 click2()함수 이벤트를 넣었습니다. js부분 script에 click2 함수를 alert 창을 띄우게 설정하였습니다. 2022. 12. 5. [Jquery] 반응형 웹에서 jquery 다르게 불러오는 방법 디바이스 크기 마다 jquery 를 다르게 불러오는 방법입니다. 기본구조 $(window).resize(function(){ if (window.innerWidth > 640) { // 현재 띄워진 창 크기가 640px 이상일때 /* 640 이상일때의 스크립트 */ } else { /* 640 이하일때의 스크립트 */ } }).resize(); 예제 pc화면에서는 3개씩 나타나게 하는 더보기 버튼이 모바일에서는 2개씩 나타나게 해보았습니다. html 구조 리뷰텍스트 내용 리뷰텍스트 내용 리뷰텍스트 내용 리뷰텍스트 내용 리뷰텍스트 내용 리뷰텍스트 내용 리뷰들이 나타나게 html 을 ul li 로 구성 해 놓은 상태입니다. js부분 $(window).resize(function(){ if (window.in.. 2022. 11. 11. [Jquery] 제이쿼리로 css 적용하기 보통 css는 css파일에 한데 모아서 사용하는데요, 이벤트(클릭, 스크롤)가 있을때 css를 수정하고 싶을때가 있을때 사용하면 좋습니다. 보통 css적용 방식 .box{background:red;} jquery css 적용방식 $('.box').css('background','red'); 위 아래 적용방식은 서로 동일하게 작동합니다. 예시(클릭시 css수정) $('.click').click(function(){ $('.box').css('background','blue'); }); click이라는 class가진 요소를 클릭하게 되면 .box 부분 css가 blue로 변경됩니다. 2022. 11. 8. [Jquery] 클릭시 페이지 맨 위로 이동 하기 오늘은 버튼 클릭시 페이지 맨위로 이동하는 방법을 소개합니다. 먼저 jquery에 scrollTop() 이라는 메소드가 있는데요, scrolltop은 현재 페이지의 높이 위치 라고 생각 하시면 쉽게 이해할 수 있습니다. 버튼을 클릭했을시 scrolltop을 0으로 주어서 맨위로 가게하는 방식입니다. 1. 사이에 jquery 라이브러리 삽입 jquery 라이브러리는 넣어줍니다. 2.html 코딩 , css .gotop{width:200px;height:40px;line-height:40px;display:inline-block;margin-right:10px;background:blue;text-align:center;color:#fff;} .gotop2{width:200px;height:40px;line.. 2022. 10. 24. 이전 1 2 3 4 5 다음 반응형