스크립트를 이용해 해당 id를 가진 div의 높이를 구하여 화면 너비가 변경될 때 마다 높이를 변경.
1. 스크립트 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <script> var height; // 변수선언 // 페이지 로드시 자동실행 $(window).ready(function () { height = document.getElementById("id").offsetHeight+'px'; // 페이지 로드시 id값의 div의 높이를 구함 document.getElementById("id").style.height = height; // 높이를 id 의 height 값에 저장 console.log("load height : " + height); }); // 화면 리사이즈시 실행 $(window).resize(function () { height = document.getElementById("id").offsetHeight+'px'; // 화면 리사이즈 시 id값의 div의 높이를 구함 document.getElementById("id").style.height = height; // 화면 리사이즈시 id의 height값 변경 후 저장 console.log("resize height : " + height); }); </script> | cs |
2. 실행결과
1 2 3 4 5 6 7 8 9 10 11 | load height : 283px resize height : 283px resize height : 319px resize height : 283px resize height : 373px resize height : 354px resize height : 319px resize height : 283px resize height : 319px resize height : 300px resize height : 283px | cs |
load height : 페이지가 로딩될 때의 높이
resize height : 페이지 너비가 리사이즈 될 때의 높이
'Development > JavaScript' 카테고리의 다른 글
| [JavaScript] input(number) 입력 글자 수 제한 (0) | 2019.01.09 |
|---|---|
| [JavaScript] Random 함수 (0) | 2018.10.29 |
| [JavaScript] 시간지연 함수 (0) | 2018.10.29 |
| [JavaScript] 메모라이제이션(Memorization) (0) | 2018.10.29 |
| [JavaScript] 문자를 유니코드로 변환하는 함수 (0) | 2018.10.29 |