본문 바로가기

Webstoryboy

Category

Explanation

전체 글

 (864)
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() 메서드는 문자열은..
데이터 저장하기 01. 자바스크립트 : 데이터 저장하기 난이도 쉬움 소개 안녕하세요!. 웹스토리보이입니다. 자바스크립트는 웹 사이트를 동적으로 표현하는 언어로 묘사하지만, 가장 기본이 되는 특징은 데이터를 컨트롤 하는 기능이 더 중요합니다. 자바스크립트는 데이터를 저장하고, 출력하고, 실행하고, 제어하는 기능을 가지고 있습니다. 이 4가지 특징을 이용해 동적으로 표현 할 수 있습니다. 그래서 우리는 데이터를 저장하는 방법에 대해서 배워보겠습니다. 자바스크립트에서 데이터를 저장하는 방법은 크게 변수, 상수, 배열, 객체가 있습니다. 리액트를 배운다면 더 추가적인 내용이 있겠지만, 우리는 우선 4가지에 대해서 먼저 배워보겠습니다. 변수는 상수랑 비슷하기 때문에 동급으로 취한다면, 변수, 배열, 객체에 대해서 자세히 배워보겠..
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..
시멘틱 태그 01. 참고 : 시맨틱 태그 난이도 쉬움 소스 다운로드 영상보기 소개 안녕하세요!. 웹스토리보이입니다. 이번 시간에는 시멘틱 태그에 대해서 알아보겠습니다. 시멘틱 태그가 있기 전에는 코딩을 할 때, 레이아웃 작업을 할 때 코드로 작업을 하였습니다. 하지만 웹 표준에 대한 개념과 웹 접근성에 대한 개념이 중요하게 되면서, 의미가 없는 요소를 사용하기 보다는 의미를 부여하기 시작했습니다. 즉 헤더 영역을 만들기 위해서는 주로 태그를 만들고 클래스 또는 아이디에 header라고 이름만 부여했습니다. 이런 부분을 태그를 만들어서 사용하기 시작했습니다. 즉 의미를 부여하고 그 의미에 맞는 태그를 쓰기 시작했습니다. 이 것을 시멘틱 태그라고 합니다. 즉 의미가 부여된 태그를 말합니다. 이렇게 시멘틱 태그를 사용하면..
1 2 3 4 ··· 29
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바