본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT/Alphabet

 (65)
dd
string.prototype.trimEnd() trimEnd() trimEnd() 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. trimEnd() trimEnd() 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 버전(version) ES5 결과값(return) 문자열 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trimEnd() //대문자 변경하기 let result = " javascript reference ".trimEnd(); // javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimEnd() 메서드는 문자열의 뒤 공백을 제거하고, 새로운 문자열을 반환합니다. trim() 메서드는 문자열은 원래 문자열을 수정하지 않고, ..
string.prototype.trimStart() trimStart() trimStart() 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다. trimStart() trimStart() 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다. 특징 설명 버전(version) ES5 결과값(return) 문자열 사용성 ★★☆☆☆ 문법(Syntax) "문자열".trimStart() //대문자 변경하기 let result = " javascript reference ".trimStart(); //javascript reference 문자열(string) : 문자열을 설정합니다. 정의(Definition) trimStart() 메서드는 문자열의 앞 공백을 제거하고, 새로운 문자열을 반환합니다. trimStart() 메서드는 문자열은..
element.scrollIntoView() element.scrollIntoView() element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다. 패럴랙스 스크롤링 효과에서 많이 사용되며, block 속성은 수직 정렬을 의미하고, inline은 수평 정렬, smooth 속성은 부드러운 움직임 효과를 의미합니다. element.scrollIntoView() element.scrollIntoView() 메서드는 선택한 요소를 기준으로 이동하거나 설정합니다. 특징 설명 유형(type) element 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) element.scrollIntoView() //스크롤 기본값({block: "start", inli..
element.scrollTop element.scrollTop element.scrollTop 요소는 선택한 요소의 세로 스크롤 값을 가져오거나 설정합니다. element.scrollTop 속성은 박스 요소의 스크롤 값을 구하고 window.scrollY 속성은 브라우저의 스크롤 값을 구하는데 차이가 있으며, 부모 박스 안에 작은 박스가 크고 overflow 속성이 있을 때 스크롤 값을 구할 수 있습니다. element.scrollTop element.scrollTop 요소는 선택한 요소의 세로 스크롤 값을 가져오거나 설정합니다. 특징 설명 유형(type) element 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) element.scrollTop //속성 값을 가져..
element.scrollLeft element.scrollLeft element.scrollLeft 요소는 선택한 요소의 가로 스크롤 값을 가져오거나 설정합니다. element.scrollLeft 속성은 박스 요소의 스크롤 값을 구하고 window.scrollX 속성은 브라우저의 스크롤 값을 구하는데 차이가 있으며, 부모 박스 안에 작은 박스가 크고 overflow 속성이 있을 때 스크롤 값을 구할 수 있습니다. element.scrollLeft element.scrollLeft 요소는 선택한 요소의 가로 스크롤 값을 가져오거나 설정합니다. 특징 설명 유형(type) element 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) element.scrollLeft //속성..
window.scrollBy() window.scrollBy() window.scrollBy() 메서드는 선택한 요소에 스크롤 값(상대 위치)을 설정합니다. window.scrollBy() window.scrollBy() 메서드는 선택한 요소에 스크롤 값(상대 위치)을 설정합니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) window.scrollBy(x, y) / scrollBy(x, y) window.scrollBy(옵션) //속성 값을 변경하는 경우 window.scrollBy(100, 0); //속성 값을 변경하는 경우 scrollBy(100, 0); //옵션을 넣는 경우 window.scrollBy({ top: 200..
window.scrollTo() window.scrollTo() window.scrollTo() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다. window.scrollTo() window.scrollTo() 메서드는 선택한 요소에 스크롤 값(절대 위치)을 설정합니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) window.scrollTo(x, y) / scrollTo(x, y) window.scrollTo(옵션) //속성 값을 변경하는 경우 window.scrollTo(100, 0); //속성 값을 변경하는 경우 scrollTo(100, 0); //옵션을 넣는 경우 window.scrollTo({ top: 200..
window.scroll() window.scroll() window.scroll() 메서드는 선택한 요소에 스크롤 값을 설정합니다. window.scroll() window.scroll() 메서드는 선택한 요소에 스크롤 값을 설정합니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) None(undefined) 사용성 ★★★☆☆ 문법(Syntax) window.scroll(x, y) window.scroll(옵션) //속성 값을 변경하는 경우 window.scroll(100, 0); //옵션을 넣는 경우 window.scroll({ top: 2000, left: 0, behavior: 'smooth' }); x : x축 좌표값을 설정합니다. y : y축 좌표값을 설정합니다. 옵션 : 위치값..
window.scrollY window.scrollY window.scrollY 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다. window.scrollY 요소는 속성값만 가져올 수 있는 읽기 전용 속성이며, window.scrollY 요소와 window.pageYOffset 요소는 동일합니다. window.scrollY window.scrollY 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.scrollY / scrollY //속성 값을 가져오는 경우 document.querySelector("div").innerHTML = wind..
window.scrollX window.scrollX window.scrollX 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다. window.scrollX 요소는 속성값만 가져올 수 있는 읽기 전용 속성이며, window.scrollX 요소와 window.pageXOffset 요소는 동일합니다. window.scrollX window.scrollX 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.scrollX / scrollX //속성 값을 가져오는 경우 document.querySelector("div").innerHTML = wind..
window.pageYOffset window.pageYOffset window.pageYOffset 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다. window.pageYOffset 요소는 속성 값만 가져올 수 있는 읽기 전용 속성이며, window.pageYOffset 요소와 window.scrollY 요소는 동일합니다. window.pageYOffset window.pageYOffset 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.pageYOffset / pageYOffset //속성 값을 가져오는 경우 document.querySel..
window.pageXOffset window.pageXOffset window.pageXOffset 요소는 선택한 요소의 세로 스크롤 값(브라우저 기준)을 가져옵니다. window.pageXOffset 요소는 속성값만 가져올 수 있는 읽기 전용 속성이며, window.pageXOffset 요소와 window.scrollX 요소는 동일합니다. window.pageXOffset window.pageXOffset 요소는 선택한 요소의 가로 스크롤 값(브라우저 기준)을 가져옵니다. 특징 설명 유형(type) window 버전(version) -- 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.pageXOffset / pageXOffset //속성 값을 가져오는 경우 document.querySele..
element.getClientRect() getClientRect() getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. getClientRect() getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. 특징 설명 유형(type) element 버전(version) - 결과값(return) 숫자(number) 사용성 ★☆☆☆☆ 문법(Syntax) element.getClientRect(); 정의(Definition) getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. 비교(compare) getClientRect() 메서드는 요소의 크기 및 위치 정보와 길이 값(갯수)을 반환 할 수 있습니다. getBoundingClientRect() 메서드는 요소의 크기 및 위치 ..
element.getBoundingClientRect() getBoundingClientRect() getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. top, left, right, bottom, x, y, width, height 속성 값을 가져옵니다 getBoundingClientRect() getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★★☆ 문법(Syntax) element.getBoundingClientRect(); 정의(Definition) getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다. getBo..
element.offsetParent offsetParent offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다. offsetParent offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★☆☆☆☆ 문법(Syntax) element.offsetParent 정의(Definition) offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientHeight 속성은 요소의 세로 값(마진/보더 불포함)..
element.offsetLeft offsetLeft offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다. 부모 박스로 부터 가져오는 clientLeft 속성과 비교됩니다. offsetLeft offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다. 특징 설명 유형(type) element 버전(version) - 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.offsetTop 정의(Definition) offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다. offsetLeft 속성은 부모 박스로 부터 가져오는 clientLeft 속성과 비교됩니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) cli..
element.offsetTop offsetTop offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다. 부모 박스로 부터 가져오는 clientTop 속성과 비교됩니다. offsetTop offsetTop 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. 특징 설명 유형(type) element 버전(version) - 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.offsetTop 정의(Definition) offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다. offsetTop 속성은 부모 박스로 부터 가져오는 clientTop 속성과 비교됩니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth..
element.offsetHeight offsetHeight offsetHeight 속속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. offsetHeight offsetHeight 속속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★☆☆☆ 문법(Syntax) element.offsetHeight 정의(Definition) offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientHeight 속성은 요소의 세로 값(마진/보더..
element.offsetWidth offsetWidth offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다. offsetWidth offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.offsetWidth 정의(Definition) offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가..
element.clientLeft clientLeft clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다. 문서의 기준점으로부터 가져오는 offsetLeft 속성과 비교됩니다. clientLeft clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★☆☆☆ 문법(Syntax) element.clientLeft 정의(Definition) clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다. clientLeft 속성은 문서의 기준점으로부터 가져오는 offsetLeft 속성과 비교됩니다. 크기 및 위치와 관련된 메서드(Dimensions Related meth..
element.clientTop clientTop clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. 문서의 기준점으로부터 가져오는 offsetTop 속성과 비교됩니다. clientTop clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) element.clientTop 정의(Definition) clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다. clientTop 속성은 문서의 기준점으로부터 가져오는 offsetTop 속성과 비교됩니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clien..
element.clientHeight clientHeight clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다. clientHeight clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★☆☆☆ 문법(Syntax) element.clientHeight 정의(Definition) clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientHeight 속성은 요소의 세로 값(마진/보..
element.clientWidth clientWidth clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientWidth clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. 특징 설명 유형(type) element 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★☆☆☆ 문법(Syntax) element.clientWidth 정의(Definition) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. 크기 및 위치와 관련된 메서드(Dimensions Related method) clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다. clientHeight 속성은 요소의 세로 값(마진/보더 불포함)..
window.outerHeight outerHeight outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다. 브라우저의 속성 값을 가져오기만 할 수 있으며, 스크롤바 값을 포함하고 싶지 않다면, innerHeight 속성을 사용합니다. outerHeight outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다. 특징 설명 유형(type) window 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.outerHeight 정의(Definition) outerHeight 속성은 브라우저의 세로 값(스크롤바 포함)을 가져옵니다. 비교(Compare) innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다...
window.outerWidth outerWidth outerWidth 속성은 브라우저의 가로 값(스크롤바 포함)을 가져옵니다. 브라우저의 속성 값을 가져오기만 할 수 있으며, 스크롤바 값을 포함하고 싶지 않다면, innerWidth 속성을 사용합니다. outerWidth outerWidth 속성은 브라우저의 가로 값(스크롤바 포함)을 가져옵니다. 특징 설명 유형(type) window 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.outerWidth 정의(Definition) outerWidth 속성은 브라우저의 가로 값(스크롤바 포함)을 가져옵니다. 비교(Compare) innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다. innerH..
window.innerHeight innerHeight innerHeight 속성은 브라우저의 세로 값(스크롤바 미포함)을 가져옵니다. 브라우저의 속성 값을 가져오기만 할 수 있으며, 스크롤바 값을 포함하고 싶다면, outerHeight 속성을 사용합니다. innerHeight innerHeight 속성은 브라우저의 세로 값(스크롤바 미포함)을 가져옵니다. 특징 설명 유형(type) window 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.innerHeight 정의(Definition) innerHeight 속성은 브라우저의 세로 값(스크롤바 미포함)을 가져옵니다. 비교(Compare) innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다...
window.innerWidth innerWidth innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다. 브라우저의 속성 값을 가져오기만 할 수 있으며, 스크롤바 값을 포함하고 싶다면, outerWidth 속성을 사용합니다. innerWidth innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다. 특징 설명 유형(type) window 버전(version) ES1 결과값(return) 숫자(number) 사용성 ★★★☆☆ 문법(Syntax) window.innerWidth 정의(Definition) innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다. 비교(Compare) innerWidth 속성은 브라우저의 가로 값(스크롤바 미포함)을 가져옵니다. innerH..
hasAttributes() hasAttributes() hasAttributes() 메서드는 선택한 요소의 지정된 속성의 여부를 확인하고 불린을 반환합니다. hasAttributes() hasAttributes() 메서드는 선택한 요소의 지정된 속성의 여부를 확인하고 불린을 반환합니다. 특징 설명 버전(version) ES1 결과값(return) undefined 사용성 ★★☆☆☆ 문법(Syntax) "선택자".hasAttributes("속성 이름") //속성 값 변경하기 documemt.querySelector("div").hasAttributes("class"); 선택자(selector) : 속성 값을 설정할 선택자를 설정합니다. 속성 이름(attributeName) : 속성 이름을 설정합니다. 정의(Definition) ha..
hasAttribute() hasAttribute() hasAttribute() 메서드는 선택한 요소의 지정된 속성의 여부를 확인하고 불린을 반환합니다. hasAttribute() hasAttribute() 메서드는 선택한 요소의 지정된 속성의 여부를 확인하고 불린을 반환합니다. 특징 설명 버전(version) ES1 결과값(return) undefined 사용성 ★★☆☆☆ 문법(Syntax) "선택자".hasAttribute("속성 이름") //속성 값 변경하기 documemt.querySelector("div").hasAttribute("class"); 선택자(selector) : 속성 값을 설정할 선택자를 설정합니다. 속성 이름(attributeName) : 속성 이름을 설정합니다. 정의(Definition) hasAttri..
1 2 3
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바