[패스트캠퍼스] 웹퍼블리싱 강의 5주차

html jquery css

일레븐11 2023. 6. 24. 09:35

K디지털기초역량훈련 과정인 웹퍼블리싱 완전정복을 듣고 있는데..

지바스크립트 기초 부터 활용까지 커리큐럼이 좋다.

자바스크립트입문부터 활용까지 학습이 필요하다면 이 과정이 좋은 선택지가 될 수 있을 것이다.

▶ 자바스크립트 브라우저 정보 제어 (Bom)

▶ Dom (문서객체모델)
Dom : body 안쪽에 있는 html문서를 제어하고 스타일링을 하는것

▶ Bom ( browser 객체 모델)
( Dom 보다 상위에 있는 버전인 브라우저 객체 모델 )

▶ Bom 종류
→ window객체 : 윈도우의 정보값을 알 수 있다.
→ navigator객체
→ location객체
→ settimeout, setinterval
→ this값 바인딩

console.log(window.innerWidth)

현재 열려있는 윈도우의 가로 폭(innerWidth)을 알 수 있다.

ex ) console.log(window.innerWidth)

.innerWidth : 브라우저 안쪽의 넓이값 반환

.innerHeight : 브라우저 안쪽의 높이값 반환

.outerWidth : 브라우저의 프레임을 포함한 넓이값 반환

.outerHeight : 브라우저의 프레임을 포함한 높이값 반환

.scrollY : 현재 스크롤된 브라우저의 Y축 거리값 반환

.scrollX : 현재 스크롤된 브라우저의 X축 거리값 반환

▶ 브라우저가 리사이즈 될 때마다 브라우저의 안쪽 넓이 값을 반환한다.

window.addEventLister("resize", e => {
console.log(window.innerWidth);
})

onclick 이벤트가 아닌 addEventListener 를 이용하여 이벤트 연결해준다.

▶ 브라우저가 스크롤될 때마다 스크롤된 브라우저의 Y 축 거리값을 반환한다.

window.addEventLister("scroll", e => {
console.log(window.scrollY);
})

scrollY

...

codepen.io

scrollY값을 활용하여 브라우저를 제어하는 활용 구문들을 파악할 수 있도록.

이번 기회에 확실히 공부해둬야겠어요.