Javascript

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

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

  • 09. 요소 메서드 : 클래스 : classList.add() : 클래스 추가
  • 10. 요소 메서드 : 클래스 : classList.remove() : 클래스 삭제
  • 11. 요소 메서드 : 클래스 : classList.toggle() : 클래스 추가 및 삭제
  • 12. 요소 메서드 : 클래스 : 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.appentChild() : 자식 요소 앞에 추가

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

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

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

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