nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/JavaScript

Day 10의 [Hold Shift and Check Checkboxes]입니다. 다중 선택가능한 체크박스를 만드는 내용인데,생각보다 어려웠어요 (´;∧;`) 더 열심히 해야지 하는 다짐과 함께 글 정리 시작합니다. 하다보면 이것도 익숙해지겠죠! ヽ(〃･ω･)ﾉ 랄라 1. 마크업 및 셀렉팅 우선 마크업부터 진행합니다. 강의에서는 checkbox로 했었는데, 여기선 편의상 button으로 진행합니다. 11111111111111 2222222222222 333333333333333 444444444444 555555555555555 6666666666666 77777777777777 이후 스크립트를 작성합시다. 우선 버튼들을 querySelectorAll()로 셀렉팅해서 가져온 뒤, 클릭 이벤트를 걸어줍니다..

2019. 2. 27.

Blog/JavaScript

🔥Javascript 30 - Day 09🔥Day 9에 해당하는 [14 Must Know Dev Tools Tricks]를 배워볼 차례입니다. 1. DOM Breakpoints 개발자 도구 Elements 탭에서, 특정 엘리먼트를 선택하고 우클릭 후 Break on...을 눌러 중단점을 확인할 수 있습니다. Attributes Modifications를 선택한 상태에서 h1을 클릭하면, 아래 이미지처럼 중단점이 표시됩니다. 재생버튼처럼 생긴 걸 누르면 차례로 중단점이 나타나죠. Subtree Modifications 자식 요소가 추가, 삭제, 변경됐을 경우 break 합니다. Attributes Modifications 요소의 속성이 바뀐 경우 break 합니다. Node Removal 요소가 완전히 사..

2019. 2. 17.

Blog/JavaScript

Javascript 30의 Day 8입니다. 오늘은 Canvas를 다뤄볼 차례입니다(두근두근) 예전에 잠깐 캔버스에 대해 네이버 포스팅을 한 적이 있긴 한데, 저도 다 까먹었네요 허허허. 일부 내용은 그대로 가져왔습니다. 아무튼 시작해보죠!╰(✧∇✧╰) 1. 캔버스 만들기 아묻따 캔버스를 html에 마크업합니다. canvas요소는 id값과 width, height 속성을 갖습니다. 저 너비와 높이값은 선택사항이며, 기본값은 300*150이라고 합니다. IE9 이하 브라우저라면 대체 컨텐츠가 필요하며, 닫는 태그를 잊지 않도록 합시다. 자, 캔버스에 그림을 그리려면 일단 자바스크립트를 써야합니다. 캔버스 요소 아래에 스크립트를 작성합니다. canva에 id값을 넣어준 이유는 이렇게 스크립트에서 캔버스를 참..

2019. 2. 15.

Blog/JavaScript

Javascript30 강의 중 Day 07에 해당하는 Array Cardio 2 입니다 :> Array.prototype.some() MDN에 따르면, some() 메서드는 배열 안의 어떤 요소가 주어진 판별 함수를 통과하는지 테스트한다고 합니다. (ES6 이상) 더 쉽게 풀어쓰면, some() 메서드는 콜백함수를 인자로 받아서, 배열 내 각 요소에게 한 번씩 그 콜백함수를 실행합니다. 이때 해당하는 요소를 발견하면 true를 반환하고, 모든 요소에게 함수를 실행했지만 해당하는 요소가 없다면 false를 반환합니다. 백문이 불여일견, 예제를 살펴보죠! 아래 코드는 배열 내에 10 이상인 숫자가 있는지 판단합니다. function isBiggerThan10(elem){ return elem > 10; }..

2019. 2. 11.

Blog/JavaScript

Document 🔥Javascript 30 - Day 06🔥이번에는 Javascript30의 Day 06에 해당하는 'Ajax Type Ahead'를 정리해봅니다@@@@ json 내용 가져오기 우선은 json 내용을 가져와 봅시다. const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then(blob => blob.json()) .then(data => cities.push(...data)); 이게 뭔 소린가 싶죠..... 하나하나 살펴보면 ..

2019. 2. 6.

Blog/JavaScript

🔥Javascript 30 - Day 04🔥 Day 04는 배열 관련 메서드를 갖고 노는 시간이 되겠습니당 :->기본 html, js 내용은 여기에서 확인 가능합니다. 1. filter() - 특정 조건을 만족하는 새 배열 만들기 const people = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },..

2019. 1. 7.

Blog/JavaScript

🔥Javascript 30 - Day 03🔥 1. 마크업/스타일링 이번에는 CSS를 JS로 제어해 봅시다! 우선 적당히 마크업하고 적당히 스타일링 합니다(참 쉽죠?). 자세한 html, css코드는 Codepen 결과물 에 있어요! > 제어 가능한 옵션은 '폰트 사이즈/메인 컬러/이미지 블러처리' 요렇게 3가지입니다. Update CSS Variables With JS Option Font size Main Color Background Blur {텍스트} {텍스트} {텍스트} 2. :root 속성 작성하기 그 다음, 아래와 같이 CSS를 추가 작성해 줍니다. :root { /*코드 작성*/ } 잠깐!!! 도대체 :root가 뭐지?! 싶은 사람(바로 접니다)을 위해 짚고 넘어가죠! :root 선택자는 문..

2019. 1. 7.