웹 공부일지

jQuery 기본 선택자 jQuery의 기본 선택자를 소개해드릴게요. 기본 선택자는 css의 기본 선택자와 흡사합니다. jQuery 기본 선택자 선택자 종류 설명 태그 선택자 $('p') p 요소를 선택합니다. id 선택자 $('#gnb') #gnb 요소를 선택합니다. class 선택자 $('.logo') .logo인 요소를 선택합니다. 자식 선택자 $('#gnb > ul > li') #gnb의 자식 ul 의 자식 li 요소를 선택합니다. 하위 선택자 $('#gnb ul') #gnb 하위에 있는 모든 ul 요소를 선택합니다. 인접 선택자 $('#visual + #content') #visual 다음에 오는 #content 요소를 선택합니다. 형제 선택자 $('#visual ~ #footer') #visu..

jQuery 필터 선택자 jQuery의 탐색 선택자를 소개해드릴게요. 선택자에 ':'이 붙은 선택자를 필터 선택자라고 합니다. jQuery 기본 필터 선택자 선택자 종류 설명 :even $("tr:even") tr 요소 중 짝수 행만 선택합니다. :odd $("tr:odd") tr 요소 중 홀수 행만 선택합니다. :first $("td:first") 첫 번째 td 요소를 선택합니다. :last $("td:last") 마지막 td 요소를 선택합니다. :header $(":header") 헤딩(h1~h6) 요소를 선택합니다. :eq() $("li:eq(0)") index가 0인 li 요소를 선택합니다. :gt() $("li:gt(0)") index가 0보다 큰 li 요소들을 선택합니다. .lt() $("li..

jQuery 탐색 선택자 jQuery의 탐색 선택자를 소개해드릴게요. 탐색선택자는 원하는 요소를 탐색하는 선택자 입니다. jQuery 기본 탐색 선택자 선택자 종류 설명 children() $('div').children() div 요소의 자식 요소를 선택합니다. parent() $('p').parent() p 요소의 부모 요소를 선택합니다. parents() $('p').parents('div') p요소의 부모가 되는 모든 div요소를 선택합니다. closest() $('p').closest('div') p요소의 부모가 되는 첫번째 div요소를 찾습니다. next() $('div.m').next() div.m요소의 다음 요소를 선택합니다. nextAll() $('div.m').nextAll() div...

1 단계 : 2016년 코딩테스트 연습 > 연습문제 > 2016년 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 입출력 예 a b result 5 24 "TUE" 코드 function solution(a, b) { let a..

jQuery 소개 - write less, do more 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있습니다. 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있습니다. css변경, 애니메이션 처리, 이벤트 핸들링을 슬로건과 마찬가지로 기존의 자바스크립트 코드로 작성하는 것보다 훨씬 적은 코드로 크로스 브라우징 이슈까지 해결해주니 얼마나 편리합니까? 근데 요즘에는 잘 안쓰이는 추세이죠. 3점대 버전 까지 나온것같은데 그 이후로 안나오는 것 같죠? 홈페이지도 계속 그대로인 것 같아요. 사용준비 사용법에는 대표적으로 ..

GSAP 소개 GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리입니다. 일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 메서드를 사용하는게 정석이죠? 하지만 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나입니다. GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장하는데 그만큼 사용법도 복잡하고 헷갈리죠. 그렇다면 GSAP로 애니메이션을 구현하기 전에 기초부터 배워봐야 겠죠? 사용준비 사용하려면 cdn을 이용해서 간단하게 사용해볼 수 있습니다. 사용법 익히기 가장 간단한 to("대상", {효과}) 메서드 부터 알아보겠습니다. to 메서드는 대상을 지정하고 대상에 지정한 효과를 ..

1 단계 : 두 개 뽑아서 더하기 코딩테스트 연습 > 월간 코드 챌린지 시즌1 > 두 개 뽑아서 더하기 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 입출력 예 설명 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 ..

1 단계 : 예산 코딩테스트 연습 > Summer/Winter Coding(~2018) > 예산 문제 설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물품을 지원할 수..

CSS에서 요소를 감추는 5가지 방법 CSS 에서 요소를 감추는 방법은 대표적으로 5가지 방법이 있습니다. 각각의 방법마다 조금씩 특징이 다른데 지금부터 알아보시죠. 1. display : none 요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 있음] .box { display : none; } 2. opacity : 0 요소의 투명도를 0으로 설정합니다. : [애니메이션 가능 / 영역 있음] .box { opacity : 0; } 3. visible : hidden 요소를 안보이게 합니다. : [애니메이션 불가능 / 영역 없음] .box { visible : hidden; } 4. width 0; height : 0; 요소의 너비값과 높이값을 0으로 만듭니다. : [애니메이션 불가능 / 영역..

1 단계 : 약수의 개수와 덧셈 코딩테스트 연습 > 월간 코드 챌린지 시즌2 > 약수의 개수와 덧셈 문제 설명 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 100,000,000 이하인 자연수입니다.입출력 예 n result 45 7 125 229 입출력 예 설명 입출력 예 #1 답을 도출하는 과정은 다음과 같습니다. n (10진법) n (3진법) 앞뒤 반전(3진법) 10진법으로 표현 45 1200 0021 7 따라서 7을 return 해야 합니다. 입출력 예 #2 답을 도출하는 과정은 다음과 같습니다. n (10진법) n (3진법) 앞뒤 반전(3진법) 10진법..