JAVASCRIPT & jQuery
-
📍 기본 필터 선택자(Basic Filter) 선택자 예제 설명 :odd $("div:odd") 홀수 번째에 위치한 문서 객체를 선택함 :even $("div:even") 짝수 번째에 위치한 문서 객체를 선택함 :first $("div:first") 첫 번째 위치한 문서 객체를 선택함 :last $("div:last") 마지막에 위치한 문서 객체를 선택함 선택자 예제 설명 :root $("div:root") document의 루트 요소 선택 :target $("div:target") document의 URL의 flagment 식별자로 지정된 대상 요소를 선택 :header $("div:header") h1, h2, h3 등과 같이 헤더인 모든 요소를 선택 :empty $("div:empty") 자식이 없..
jQuery 전용 선택자 종류📍 기본 필터 선택자(Basic Filter) 선택자 예제 설명 :odd $("div:odd") 홀수 번째에 위치한 문서 객체를 선택함 :even $("div:even") 짝수 번째에 위치한 문서 객체를 선택함 :first $("div:first") 첫 번째 위치한 문서 객체를 선택함 :last $("div:last") 마지막에 위치한 문서 객체를 선택함 선택자 예제 설명 :root $("div:root") document의 루트 요소 선택 :target $("div:target") document의 URL의 flagment 식별자로 지정된 대상 요소를 선택 :header $("div:header") h1, h2, h3 등과 같이 헤더인 모든 요소를 선택 :empty $("div:empty") 자식이 없..
2024.03.05 -
📍 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 📍 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child $("div:last-chil..
jQuery CSS 선택자 종류📍 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 📍 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child $("div:last-chil..
2024.03.05 -
웹사이트에서 많이 사용되는 배너 방식이 '텍스트 롤링' 배너이다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너이다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 된다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 가장 쉽다. 1. 무한 롤링 배너의 동작 방식 이해하기 무한 롤링 배너는 배너가 돌면서 무한 회전하는 듯한 느낌을 만드는 것이 핵심이다. 배너가 한쪽 방향으로 끝까지 이동한 후 처음 시작 위치로 점프해서 다시 진행하는 배너보다는 훨씬 ..
무한 롤링 배너웹사이트에서 많이 사용되는 배너 방식이 '텍스트 롤링' 배너이다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너이다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 된다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 가장 쉽다. 1. 무한 롤링 배너의 동작 방식 이해하기 무한 롤링 배너는 배너가 돌면서 무한 회전하는 듯한 느낌을 만드는 것이 핵심이다. 배너가 한쪽 방향으로 끝까지 이동한 후 처음 시작 위치로 점프해서 다시 진행하는 배너보다는 훨씬 ..
2023.11.06 -
스크롤 이벤트를 할때, offset top값을 가져와 처리하기 애매한 경우, 스크롤이 맨 끝으로(하단으로) 도착한경우 이벤트를 발생시켜야 하는 상황이 있죠. 그럴때 쓰는 간단한 jquery소스입니다. 일단 먼저 스크롤 동작을 감지하는 코드부터 알아야 겠죠! $(window).scroll(function(){ alert('스크롤 동작 감지') } 그 다음으로는 스크롤 값을 가져옵니다. .scrollTop() 으로요/ .scrollTop()은 스크롤 위치에 따라 변하는 값이고 맨 윗부분에서 0값으로 시작해서 맨끝으로 스크롤시에 스크롤길이 최댓값을 가집니다. $(window).scroll(function(){ var scrT = $(window).scrollTop(); console.log(scrT);//스크..
스크롤이 브라우저 끝에 도달했을때 이벤트주기스크롤 이벤트를 할때, offset top값을 가져와 처리하기 애매한 경우, 스크롤이 맨 끝으로(하단으로) 도착한경우 이벤트를 발생시켜야 하는 상황이 있죠. 그럴때 쓰는 간단한 jquery소스입니다. 일단 먼저 스크롤 동작을 감지하는 코드부터 알아야 겠죠! $(window).scroll(function(){ alert('스크롤 동작 감지') } 그 다음으로는 스크롤 값을 가져옵니다. .scrollTop() 으로요/ .scrollTop()은 스크롤 위치에 따라 변하는 값이고 맨 윗부분에서 0값으로 시작해서 맨끝으로 스크롤시에 스크롤길이 최댓값을 가집니다. $(window).scroll(function(){ var scrT = $(window).scrollTop(); console.log(scrT);//스크..
2023.02.18 -
스크롤 이벤트를 인식하는 코드 $('#div01').scroll(function(){ //div01 에서 스크롤변화가 발생할때 호출 }); 스크롤을 내려보세요. 예제의 HTML 코드 예제의 자바스크립트 코드 //추가될 이미지 태그를 문자열로 변수에 저장 var imgs = 'https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99E6DF3E5A584CD311>"> '; $(document).ready(function(){ //스크롤 발생 이..
스크롤 내리면 다음 글 불러오기 (scroll 이벤트)스크롤 이벤트를 인식하는 코드 $('#div01').scroll(function(){ //div01 에서 스크롤변화가 발생할때 호출 }); 스크롤을 내려보세요. 예제의 HTML 코드 예제의 자바스크립트 코드 //추가될 이미지 태그를 문자열로 변수에 저장 var imgs = 'https://t1.daumcdn.net/cfile/tistory/9940D03D5A584CCD0C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99F7323D5A584CCE1C>"> '; imgs += 'https://t1.daumcdn.net/cfile/tistory/99E6DF3E5A584CD311>"> '; $(document).ready(function(){ //스크롤 발생 이..
2023.02.18 -
JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 ..
var, let, const 의 차이점JavaScript에서 변수 선언 방식인 var, let, const 의 차이점에 대해 알아보자. 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 ..
2023.02.18