웹 공부일지

마우스 이벤트 - mouseover vs mouseenter 안녕하세요, 이번시간에는 마우스 이벤트 mouseover와 mouseenter의 차이점을 알아보도록 하겠습니다. 이 두 메서드는 해당요소에 마우스를 올려놓았을 때 발생되는 이벤트 입니다. window.addEventListener("mouseover",() => {}) window.addEventListener("mouseenter",() => {}) mouseover mouseover는 이벤트 버블링 형식으로 동작합니다. 즉, 본인의 자식요소에 마우스를 가져다 놔도 본인의 자식요소부터 본인까지 이벤트가 전파됩니다. mouseenter mouseenter는 그와 반대로, 딱 본인요소에 해당하는 부분만 반응합니다. 결과 See the Pen mo..

1 단계 : 가운데 글자 가져오기 코딩테스트 연습 > 연습문제 > 가운데 글자 가져오기 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 제한사항 s는 길이가 1 이상, 100이하인 스트링입니다. 입출력 예 s return "abcde" "c" "qwer" "we" 코드 function solution(s) { let len = s.length if(len % 2){ // 홀수일 때 return s.slice(len/2, len/2 +1); } else{ // 짝수일 때 return s.slice(len/2 - 1, len/2 + 1) } } 리뷰 순서는 다음과 같다 1. 짝수일때 홀수일때 나눠서 지문에 적힌대로..

jQuery 스타일 관련 메서드 스타일을 제어할 수 있는 메서드들을 소개해드리겠습니다. 우리가 css로 설정하는 속성들 말입니다. css() 메서드 실행분류 형식 취득 $('div').css("width"); 생성, 변경 $('div').css("background-color", "red").css("padding", "10px"); $('div').css({ "background-color": "red", "padding": "10px" }); 콜백 함수 $('div').css("width", function (index, w) { // index는 각 div 요소의 index 0,1,2 // w는 각 div 요소의 width 값 return css 속성 // 각 div 요소의 css 속성을 변경합니다..

jQuery 속성 관련 메서드 jQuery의 속성 관련 메서드를 소개해드릴게요. a 태그의 대표적인 속성으로는 href 속성이 있죠? 그런 속성들을 제어하는 메서드들 입니다. jQuery 속성 관련 메서드 실행 분류 형식 취득 $('a').attr("href"); 생성, 변경 $('a').attr("href", "http://naver.com").attr("target", "_blank"); $('a').attr({"href" : "http://naver.com", "target" : "_blank"}); 출력 함수 $("a").attr("href", function(index, h){ // index는 각 a 요소의 index 0,1,2 // h는 각 a 요소 href 속성 return attribut..

jQuery 클래스 관련 메서드 클래스를 제어할 수 있는 메서드들을 소개해드리겠습니다. addClass() 메서드 요소에서 class 속성을 추가합니다. 실행분류 형식 추가 $('div').addClass("클래스명"); 콜백 함수 $('div').addClass(function(index, className) { // index는 각 div 요소의 index 0,1,2 // className은 각 div의 class 속성 return class 속성 // 각 div에 class 속성을 추가합니다. }); .... 내용1 내용2 내용3 결과 See the Pen jQueryClass by kim-0617 (@kim-0617) on CodePen. removeClass() 메서드 요소에서 class 속성을..

1 단계 : 비밀지도 코딩테스트 연습2018 > KAKAO BLIND RECRUITMENT[1차] > 비밀지도 문제 설명 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 ..

요소의 크기정보를 구하는 방법 안녕하세요 이번시간에는 요소의 크기정보를 구하는 방법을 알려드리겠습니다. 01. 요소 속성 : 크기 및 위치 : element.clientWidth : 요소의 가로 값(마진/보더 포함하지 않음) 요소의 가로 값을 구합니다. 02. 요소 속성 : 크기 및 위치 : element.clientHeight : 요소의 세로 값(마진/보더 포함하지 않음) 요소의 세로 값을 구합니다. 03. 요소 속성 : 크기 및 위치 : element.clientTop : 요소의 Y축 값(부모기준) 요소의 Y축 값을 구합니다. 04. 요소 속성 : 크기 및 위치 : element.clientLeft : 요소의 X축 값(부모기준) 요소의 X축 값을 구합니다. 05. 요소 속성 : 크기 및 위치 : el..

1 단계 : 부족한 금액 계산하기 코딩테스트 연습 > 위클리 챌린지 > 부족한 금액 계산하기 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 제한사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음 가지고 있던 금액 money :..

1 단계 : 나머지가 1이 되는 수 찾기 코딩테스트 연습 > 월간 코드 챌린지 시즌3 > 나머지가 1이 되는 수 찾기

jQuery 속성 선택자 jQuery의 속성 선택자를 소개해드릴게요. 속성 선택자는 css의 속성 선택자와 흡사합니다. jQuery 속성 선택자 선택자 종류 설명 요소 [속성] $('span[class]') span 요소중 클래스 속성이 있는 요소 선택. 요소 [속성 = "값"] $('span[class = "abc"]') span 요소중 클래스 속성이 abc인 요소 선택. 요소 [속성 != "값"] $('span[class != "abc"]') span 요소중 클래스 속성이 abc가 아닌 요소 선택. 요소 [속성 ~= "값"] $('span[class ~= "abc"]') span 요소 중 class가 'abc'를 포함하는 요소를 선택합니다. 'abc' 앞뒤로 연결된 문자가 없어야 합니다. 'bg ab..