Javascript

  • 데이터 저장하기
  • 데이터 불러하기
  • 데이터 실행하기
  • 데이터 제어하기
  • 문자열 객체
  • 배열 객체
  • 수학 객체
  • 숫자 객체
  • 브라우저 객체
  • 요소 객체
  • 이벤트 객체
  • 제이쿼리
  • 검색 효과
  • 퀴즈 효과
  • 데이터 효과
  • 마우스 효과
  • 슬라이드 효과
  • 패랠랙스 효과
  • 게임 효과
  • 01. 요소 메서드 : 선택자 : document.querySelector() : 요소 선택자
  • 02. 요소 메서드 : 선택자 : document.querySelectorAll() : 모든 요소 선택자
  • 03. 요소 메서드 : 선택자 : document.getElementById() : 아이디 요소 선택자
  • 04. 요소 메서드 : 선택자 : document.getElementByClassName() : 클래스 요소 선택자
  • 05. 요소 메서드 : 선택자 : document.getElementByTagName() : 태그 요소 선택자

  • 06. 요소 메서드 : 텍스트 : innerText() : 요소에 텍스트 설정하기
  • 07. 요소 메서드 : 텍스트 : textContent() : 요소에 텍스트 설정하기
  • 08. 요소 메서드 : 텍스트 : innerHTML() : 요소에 텍스트(태그인식) 설정하기
  • 09. 요소 메서드 : 텍스트 : outerHTML() : 요소에 텍스트(태그인식) 설정하기

  • 10. 요소 메서드 : 클래스 : classList.add() : 클래스 추가하기
  • 11. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제하기
  • 12. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가/삭제하기
  • 13. 요소 메서드 : 클래스 : classList.contains() : 클래스 존재 여부 확인하기

  • 01. 요소 속성: 크기 및 위치 : element.clientWidth : 요소의 가로값(마진/보더 미포함)
  • 02. 요소 속성: 크기 및 위치 : element.clientHeight : 요소의 높이값(마진/보더 미포함)
  • 03. 요소 속성: 크기 및 위치 : element.clientTop : 요소의 Y축값(부모기준)
  • 04. 요소 속성: 크기 및 위치 : element.clientLeft : 요소의 X축값(부모기준)
  • 05. 요소 속성: 크기 및 위치 : element.offsetWidth : 요소의 가로값(보더/패딩 포함)
  • 06. 요소 속성: 크기 및 위치 : element.offsetHeight : 요소의 높이값(보더/패딩 포함)
  • 07. 요소 속성: 크기 및 위치 : element.offsetTop : 요소의 Y축값(문서 기준)
  • 08. 요소 속성: 크기 및 위치 : element.offsetLeft : 요소의 X축값(문서 기준)
  • 09. 요소 메서드: 크기 및 위치 : element.getBoundingClientRect(): 크기 및 위치
  • 10. 요소 메서드: 요소 추가 : element.insertAdjacentHTML(beforebegin) : 요소 앞에
  • 10. 요소 메서드: 요소 추가 : element.insertAdjacentHTML(afterbegin) : 요소 안에 첫번째 자식
  • 10. 요소 메서드: 요소 추가 : element.insertAdjacentHTML(beforeend) : 요소 안에 마지막 자식
  • 10. 요소 메서드: 요소 추가 : element.insertAdjacentHTML(afterend) : 요소 뒤에
  • 10. 요소 메서드: 요소 추가 : element.appendChild(achild) : 자식 요소에 추가

위치 및 크기를 표현하는 속성 및 메서드

width: 400px
margin: 20px
border: 1px
padding: 20px

여기에 결과값이 표현됩니다.

박스의 가로값(clientWidth)을 구합니다. 박스의 높이값(clientHeight)을 구합니다. 박스의 Y축값(clientTop)을 구합니다. 박스의 X축값(clientLeft)을 구합니다. 박스의 가로값(offsetWidth)을 구합니다. 박스의 세로값(offsetHeight)을 구합니다. 박스의 Y축값(offsetTop)을 구합니다. 박스의 X축값(offsetLeft)을 구합니다. 박스의 크기 및 위치(getBoundingClientRect)를 구합니다.
eodnjs9605@gmail.com