Q1) Window-size
Q1. Window-size 표기
screen/outer/inner을 이용하여 웹화면을 움직였을 때 사이즈가 변화됨을 나타내기.
A.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Size</title>
<style>
.tag{
display: inline-block;
background-color: thistle;
padding: 16px;
margin-top: 16px;
font-size: 48px;
}
</style>
</head>
<body>
<div class="tag">Window Size</div>
<script>
const tag = document.querySelector('.tag');
function updateTag() {
tag.innerHTML = `
window.screen: ${window.screen.width}, ${window.screen.height} </br>
window.outer: ${window.outerWidth}, ${window.outerheight} </br>
window.inner: ${window.innerWidth}, ${window.innerHeight} </br>
documentElement.clientWidth: ${document.documentElement.clientWidth}, ${document.documentElement.clientHeight} </br>
`;
}
window.addEventListener('resize', () => {
updateTag();
});
updateTag();
</script>
</body>
> </html>코드를 입력하세요
result)
Author And Source
이 문제에 관하여(Q1) Window-size), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@delog_lee/Q1-Window-size저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)