오늘은 모던 JavaScript 튜토리얼에서 브라우저 창 사이즈와 스크롤에 대해 공부했다. 작성한 질문은 다음과 같다.
- window.innerWidth: 전체 창 너비
- document.documentElement.clientWidth: 스크롤바가 차지하는 영역을 제외한 창 너비
창 사이즈가 필요한 경우는 스크롤바 안쪽에 무언가를 넣거나 그릴 때 사용한다. 그럴 때 documentElement의 clientWidth나 clientHeigh을 사용해야 한다.
<!DOCTYPE HTML>을 사용해야 하는 이유는 <!DOCTYPE HTML>을 명시하지 않았을 때, 기하 관련 프로퍼티를 사용하면 이상하게 동작할 수 있기 때문이다.
- scrollBy(x,y): 페이지의 스크롤 상태를 현재 포지션을 기준으로 상대적 조정한다.
- scrollTo(x,y): 절대 좌표를 기준으로 페이지의 스크롤 상태를 변경한다.
'TIL' 카테고리의 다른 글
| TIL - 20220901 (0) | 2022.09.01 |
|---|---|
| TIL - 20220831 (0) | 2022.08.31 |
| TIL - 20220829 (0) | 2022.08.29 |
| TIL - 20220828 (0) | 2022.08.28 |
| TIL - 20220827 (0) | 2022.08.27 |