화면 리사이징에 따른 SVG 비율 조절하기
1. SVG 가 화면 전체를 커버하도록!
2. window resizing 에 따른 width, height 을 알아오기!
** 고정된 width와 height 이 아닌 경우 화면 resizing 에 따른 Element 의 크기를 변화시켜야하는 Needs 가 있을 수 있다! 이 강의에선 그 Needs 를 어떻게 충족시킬 수 있는지 알아본다.
index.html
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <svg id="svg_01" width="100%" height="100%"></svg> <script src="js/script.js"></script>
script.js
var w = window.innerWidth;
var h = window.innerHeight;
function resizeCanvas() {
w = window.innerWidth;
h = window.innerHeight;
console.log(w + " : " + h);
}
function init() {
window.addEventListener("resize", resizeCanvas, false);
}
init();
style.css
html {
width: 100%;
height: 100%;
}
body {
background-color: yellow;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
위처럼 코드를 입력하고 브라우져를 켜 브라우져의 크기를 조절해보자!!
개발자 도구 콘솔창에서 width 와 height 의 값이 아래와 같이 바뀌는 것을 확인할 수 있다!
