퍼블리싱 아카이브

See the Pen Untitled by breeghty (@breeghty) on CodePen. https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML insertAdjacentHTML은 (position, text)으로 이뤄진다. position은 beforebegin, afterbegin, beforeend, afterend만 사용가능하다. 예시는 아래를 참고. Element.insertAdjacentHTML() - Web API | MDN insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 el..

See the Pen setTimeout(), setInterval() by breeghty (@breeghty) on CodePen. setInterval 함수 사용방법 setInterval(function(){}, ms) setInterval(function(){ console.log("hello world!"); },1000) //1초에 한번씩 콘솔창에 hello world가 출력된다. setInterval 함수 중지 방법(clearInterval(변수)) //1. 변수를 할당한다. let timerFunc = setInterval(function(){ document.getElementById('numCount').innerHTML=count; count--; console.log(count); ..

로직: 퀴즈 문제를 입력할 기회를 세 번 준다. 성공하면 alert창으로 '성공'알림이 뜬다. 실패하면 다시 시도하라는 문구가 등장한다. 3번이상 틀릴 경우 정답을 알려준다. See the Pen Untitled by breeghty (@breeghty) on CodePen.

이벤트 객체 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 이벤트 target 속성 See the Pen 이벤트 객체 by breeghty (@breeghty) on CodePen. target 속성은 DOM 요소 노드이다. 이벤트를 발생시킨 DOM 요소를 가리킨다.

1. 인라인 스타일 조작 Hello! World! 2. class로 조작(className, classList) 실제로 퍼블리싱을 하는 과정에서 클래스를 조작하는 일이 많다. 미리 CSS문서에서 'on클래스가 붙는 경우'와 '그렇지 않은 경우'로 나누어서 스타일을 지정해둔 뒤, 제이쿼리나 자바스크립트 문법을 통해 class를 조작하여 스타일을 변경 시키는 경우가 많다. 1) className 요소 노드의 className 프로퍼티를 참조하면 class attribute 값을 문자열로 반환한다. 요소 노드의 className 프로퍼티에 문자열을 할당하면 class attribute 값을 할당한 문자열로 변경한다. Hello! World! 2) classList classList 프로퍼티는 class att..

HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트(속성)을 가질 수 있다. 어트리뷰트는 글로벌 어트리뷰트(id, class, style, title, lang 등)와 이벤트 핸들러 어트리뷰트(onclick, onchange, onfocus, onblur, oninput, on keypress, onkeydown 등)는 모든 html 요소에서 사용할 수 있지만 특정 html 요소에만 한정적으로 사용 가능한 어트리뷰트도 있다. 1. getAttribute: 속성 값을 가져오는 메서드, setAttribute: 속성값을 변경시키는 메서드 2. hasAttribute: 어트리뷰트 속성 값 존재 확인, removeAttribute: 어트리뷰트 속성 값 삭제

1. textContent 요소 노드의 콘텐츠 영역(시작 태그와 종료 태그 사이) 내의 텍스트를 모두 반환한다. HTML 마크업은 무시된다. 2. innerText textContent 프로퍼티처럼 텍스트를 반환한다. 하지만 CSS에 순종적이다. CSS에 의해 표시되지 않는 요소 노드의 텍스트를 반환하지 않는다. 3. innerHTML 시작 태그와 종료 태그 사이의 모든 HTML 마크업을 문자열로 반환한다. 참고 https://hianna.tistory.com/483 [Javascript] innerHTML, innerText, textContent 차이점 innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다..

addEventListener 메서드 사용하기 //html Alert Box close! //script id가 close인 요소를 클릭했을 때, 다음 함수가 실행된다는 의미이다. onclick을 직접 사용하는 대신 이렇게 이벤트 리스너를 사용할 수도 있다. 이렇게 onclick이나 addEventListener를 사용하여 이벤트를 실행시키는 메서드가 이벤트 핸들러이다. 이벤트 핸들러를 등록하는 방식에는 세가지가 있다. 1. 어트리뷰트 방식 Click Me! 2. 이벤트 핸들러 프로퍼티 방식 Click Me! 주의) eventlistener에 함수를 대입할 때 $button.onclick = clickEvent ; (o) $button.onclicke=clickEvent(); (x) 3. addEvent..

1. onclick 이벤트 Click Me!! 버튼을 누르면 이벤트가 실행되는 코드. onclick에 직접 자바스크립트 코드를 작성하는 경우도 있지만 보통은 간편하게 사용하기 위해 function을 활용하여 작성한다. 2. function function 함수이름(parameter){ //함수내용 작성 } 3. function & onclick 사용해서 열고 닫는 버튼 만들기(openBtn, closeBtn) Alert Box close! open! .alert-box { background-color: rgb(76, 76, 211); color: yellow; padding: 20px; border-radius: 5px; } open을 누르면 alert box가 보이고 close를 누르면 사라진다. 4..

안녕하세요! 올 때 메로나!!! 1. id를 이용한 요소 노드 취득(getElementById) document.getElementById("id이름"); id 이름은 HTML 문서 내에서 유일한 값이어야 한다. HTML 문서 내에 중복된 id 값을 갖는 요소가 있는 경우, getElementById 메서드는 인수로 전달된 첫 번째 요소 노드만 반환한다. 언제나 단 하나의 요소 노드만 반환한다. 존재하지 않는 경우 null 2. Tag 이름을 이용한 요소 노드 취득(getElementsByTagName) document.getElementsByTagName('tag 이름'); Apple Banana Orange 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환한다. Elements가 복수..