[jQuery] window 선택자 / 브라우저 창 크기 구하기
2021. 9. 15. 23:09ㆍ제이쿼리
[jQuery] 제이쿼리 처음 시작하기(명령어/표기/선택자/스타일속성활용)
제이쿼리란? 자바스크립트에서 여러 명령을 함수화시켜 만든 함수의 라이브러리 형태의 언어이다. => 작성 형태 : 선택자.명령(); 1. 제이쿼리 적용 위치 기본적으로 위에서부터 아래로 순서대로
comymel.tistory.com
앞에서 제이쿼리에 이미 저장되어있는 선택자에 window, document, this가 있다고 했다. (위 포스팅 참고)
window선택자는 브라우저에 대한 선택자이다.
width()와 height()를 사용하면 크기를 알 수 있다.
브라우저창의 가로크기를 알고 싶다면 $(window).width();
세로크기를 알고싶다면 $(window).height();를 사용하면 된다.
ex)
| <script> $(document).ready(function(){ let windowWidth = $(window).width(); let windowHeight = $(window).height(); // 윈도우 창 가로세로 크기를 알 수 있는 명령을 변수에 저장 $('#box').css({ width: windowWidth, height: windowHeight, backgroundColor: 'lightyellow' }); }); </script> <body> <div id="box"></div> </body> |
=> 출력결과
위 결과에서 알 수 있듯이 처음 켜진 창 크기만큼만 속성이 적용된다.
처음에 창 크기가 작을 때 열어 그 크기만큼만 이미 속성이 적용되어 있는 상태이다.
그래서 창 크기를 키워도 처음 창 크기가 저장되어 있기 때문에 속성이 적용되는 부분의 크기가 변하지 않는다.
창 크기를 키우고 새로고침을 하거나 이미 창 크기가 최대화된 상태에서 파일을 열어야 크기에 맞게 속성이 적용된다.
'제이쿼리' 카테고리의 다른 글
| [jQuery] 이벤트 개념과 마우스 이벤트 종류 (hover, mouseenter, mouseleaver, mouseover, mouseout) (0) | 2021.09.28 |
|---|---|
| [jQuery] 제이쿼리 처음 시작하기(명령어/표기/선택자/스타일속성활용) (0) | 2021.09.14 |