목록컴퓨터 속 이야기/JavaScript (6)

평범한 이야기

[ JS ] scrollIntoView API

https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org 원하는 요소의 위치로 이동하고 싶을 때, 아주 유용하게 쓰고 있는 API를 소개합니다~! 예) Arrow Up Button ... const button = document.querySelector(".button"); const target = document.querySelector(".target")..
컴퓨터 속 이야기/JavaScript 2021. 7. 12. 22:25
[javascript] scroll 시 메뉴바 색상 변경

■ 필요한 지식 : ScrollY , getBoundingClientRect() ■ 검 색 방 법 : jacascript scroll position => https://developer.mozilla.org/ko/docs/Web/API/Window/scrollY Window.scrollY - Web API | MDN Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환합니다. developer.mozilla.org ■ 검 색 방 법 : javascript element size => https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of..
컴퓨터 속 이야기/JavaScript 2021. 6. 19. 16:02
[javascript] Array API 활용 연습

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org 1. Array.prototype.join() Q1. make a string out of an array (array 를 String 으로 변환하여 한번에 출력하라) { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(result); } 2. String.prot..
컴퓨터 속 이야기/JavaScript 2021. 6. 11. 17:41
[React.js] 리액트 시작하기 1

[ 설치 순서 ] - 소삐의 순서일 뿐 마음가는 순서대로 설치하셔도 됩니다~!!!! 1. Node.jsnodejs.org/ko/download/다운로드 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org1) 잘 설치가 되었는지 확인하기 위해 CMD (명령프롬프트) 실행합니다. 2) node -v 를 작성합니다. (버전확인 가능 v14.16.0) 3) npm -v 를 작성합니다. (버전확인 가능 6.14.11)설치가 완료 된 것입니다!!! 2. VSCode (Visual Studio Code)code.visualstudio.com/downloadDownload Visual Studio Code ..
컴퓨터 속 이야기/JavaScript 2021. 3. 8. 22:55
Vue.js 시작하기 - 설치

Vue 설치에 앞서 소삐는 미리 Vue에 대한 공부를 해보았어요! 가이드를 보며 작은 테스트들을 하며 눈으로 보고 코드를 따라 쳐보면서 아 요런 느낌이구나 하고 Vue 를 느꼈답니다! 소삐는 Visual Studio Code 툴로 Vue를 시작하려 합니다. kr.vuejs.org/v2/guide/ 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 그렇다면 설치는 어떻게 하는지 따라서 해보겠습니다. 먼저! 1) Visual Studio Code 설치 code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and avail..
컴퓨터 속 이야기/JavaScript 2021. 2. 15. 22:15
VSCode(Visual Studio Code) Extention 추천

VSCode 에 확장하여 활용하면 좋은 Extention 추천! 1. Auto Rename Tag- 태그 변경 시 자동 수정하나의 HTML / XML 태그 이름을 바꾸면 쌍을 이루는 HTML / XML 태그의 이름이 자동으로 바뀝니다.- 참고 : marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tagAuto Rename Tag - Visual Studio MarketplaceExtension for Visual Studio Code - Auto rename paired HTML/XML tagmarketplace.visualstudio.com2. Bracket Pair Colorizer- 일치하는 괄호를 색상으로 식별 Bracke..
컴퓨터 속 이야기/JavaScript 2021. 1. 10. 21:47
이전 Prev 1 Next 다음