power-girl0-0

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 식별자 API element를 제어하기 위해서는, 그 element를 조회하기 위한 식별자가 필요하다. HTML에서 element의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다. Element.tagName 해당 element의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다. html css JavaScript Element.id 문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) Element 객체 Element 객체는 엘리먼트를 추상화한 객체다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있다. 또한, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. 다른..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) jQuery 객체란? jQuery 함수의 리턴값으로, jQuery 함수를 이용해서 선택한 element들에 대해서 처리할 작업을 property로 가지고 있는 객체다. li.css('text-decoration','underline'); 위와 같이, 인자가 두개일 경우는 text-decoration에 underline값을 넣겠다는 의미이다. li.css('text-decoration'); 하지만, 인자가 하나인 경우는 text-decoration의 정보를 가져오겠다는 의미..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) HTMLCollection HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. HTMLCollection의 목록은 실시간으로 변경된다. 아래 코드를 보자. HTML CSS JavaScript console.group()으로 시작해서 console.groupEnd() 사이에 있는 코드를 그룹핑해서 출력해준다. 결과

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으로 구체적인 작업을 처리해야 한다. 이를 위해서는 획득한 객체가 무엇인지 알아야 한다. 그래야 적절한 메소드나 프로퍼티를 사용할 수 있다. 아래 소스코드를 통해 알아보자. HTML CSS JavaScript .constructor.name을 사용하면 객체의 이름을 리턴해준다. 위 소스의 실행 결과는 HTMLLIElement와 HTMLCollection가 출력된다. 이것을 ..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다. jQuery는 객체를 조회할 때 CSS 선택자를 이용한다. jQuery의 기본문법 jQuery의 기본 문법은 단순하고 강력하다. 간단한 예제를 통해서 알아보도록 하자. $ ('li').css('color', 'red'); $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼..

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다. 스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다. ( 출처 : https://opentutorials.org/course/743inf.run/pBzy) 라이브러리 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어를 라이브러리라고 한다. jQuery jQuery는 DOM을 내부에 감추고 보다 쉽게 웹페이지를 조작할 수 있도록 돕는 도구이다. jQuery 사용 jQuery를 사용하기 위해서는 jQuery를 HTML로 로드해야 한다. 위 코드는 아래 웹 주소에서 가져와서 사용하는 것이다. 해당 웹 페이지는 jQuery를 사용할 때, 도움을 주는 페이지이다. 다른 방법으로 jQuery를 사용하고 싶으면 아래 주소를 참고..

Beautify란? 코드 정렬을 예쁘게 정리해준다. 1. Visual Studio Code에서 Extensions로 들어가 Beautify를 설치해준다. 2. Feature Contributions에 들어가면, keyboard shortcuts가 있는 것을 보아 단축키 설정이 가능하다. 3. 단축키 설정 가능한 목록을 출력 경로 : file->preferences->keyboard shortcuts 4. 검색창에 파일 이름을 검색 후, 더블 클릭해서 원하는 단축키를 설정한다. (파일이름은 2번에서 봤던 곳에서 확인이 가능하다.) 이렇게 설정은 완료하였다. 5. 정렬이 엉망진창인 코드에서 설정했던 단축키를 눌러 예쁘게 정렬해준다. 사용 전 사용 후