나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스트이다. 현재 문제점 : appendChild, innerHTML 등을 이용하여 font awesome icon을 추가하려한다. 이런식으로. 다만 x 표시(빨간색 화살표로 강조한 부분) 대신에 나는 쓰레기통 아이콘을 사용할 것이다. fa fa-trash이다. fa-trash: Font Awesome Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript give..

카테고리가 JavaScript에 국한된 건 아니지만, 이미 카테고리를 세부적으로 나누었기에 여기에 업로드! ​ 렌더링 트리 생성, 레이아웃 및 페인트 | Web | Google Developers TODO developers.google.com ​ *Critical Rendering Path ​ * Render Tree 형성은 DOM, CSSOM의 결합 * DOM Tree에서 - 일부 노드는 표시되지 않으며(예: 스크립트 태그, 메타 태그 등), 렌더링된 출력에 반영되지 않으므로 생략됩니다. - 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어,---위의 예시에서---span 노드의 경우 'display: none' 속성을 설정하는 명시적 규칙이 있기 때문에 렌더링 트리에서 누..

-clientX, clientY는 window 창에서 시작다. -pageX, pageY는 page의 제일 상위부터 시작한다. (페이지의 시작점부터) MouseEvent.clientX - Web APIs | MDN The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page). For example, clicking on the left edge of the viewpo developer.mozilla.org ..

* document.querySelector(css 선택자) ​ Syntax: element = document.querySelector(CSS selectors); - name, id 를 제한 X - css선택자로 요소를 찾는다. ​ - This string must be a valid CSS selector string; if it isn't, a SYNTAX_ERR exception is thrown ​ ​ * document.querySelectorAll(css 선택자) ​ Syntax: element = document.querySelectorAll(CSS selectors); ​ 기능과 사용법은 document.querySelector와 동일하지만, css 선택자를 사용하여 모든 요소를 찾는다..

객체 : 관련된 데이터나 함수의 집합 객체 안에서는 데이터를 프로퍼티(속성), 함수를 메소드라고 한다. ​ let person = { name: ['Bob', 'Smith'], age: 32, gender: 'male', interests: ['music', 'skiing'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); }, greeting: function() { alert('Hi! I\'m ' + this.name[0] + '.'); } }; 이 예시에서 프..

codepen.io/JFeremy/post/switch-language-button-js Switch language button JS switch language Script to change language in website with button. You only need a button to choose language and add "id" in balise to inform... codepen.io 자바스크립트를 이용하여 버튼을 눌렀을 때 특정 언어로 바꾸기 - Script to change language in website with button. - You only need a button to choose language and add "id" in balise to inform abou..

· Ajax - Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. (출처:위키피디아) - 즉, JavaScript와 XML을 이용한 비동기적 정보 교환 기법 ​ - Ajax로 현재 페이지의 화면 전환 없이 서버에서 데이터 자료를 전송 가능 - 새로 고침이나 새로운 HTML 페이지로 전환이 필요 없다. - 부분만 로딩이 되므로 속도가 빠르다. ​ ​ JavaScript 선행학습이 필요하다. (무조건) ​ 생활코딩 강의를 들으며 이고잉님이 항상 강조하던 것은 중복의 제거이다. (+ 쪼개기) 이 수업 또한 중복을 제거해 나간다..