윈도우 사이즈
2020. 7. 6. 20:47ㆍRetrospection/Sprint
- 이 네가지의 넓이와 높이를 보여줄수 있도록 코딩을 해보시오
- windowscreen
- windowinner
- windowouter
- documentElement
의사코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
//스타일 코드 작성
tag클래스를 이용할것이다.
노랑색 배경에 인라인블럭으로
</head>
<body>
//스크립트 태그
//const tag = 쿼리셀렉터 태그
// function resize() {
//tag.innerhtml 을 사용하여 html 작성
//각각 4가지의 너비와 높이 프린트 하는 코드 작성 }
//윈도우. 애드이벤트리스너 , 리사이즈일때 {함수 작성
//함수 내부에 함수 부르기 (resize())
}
//함수 외부에 resize() ;
//스크립트 태그 닫기
</body>
</html>
코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.tag{
color:wheat
display : inline-block
}
</style>
</head>
<body>
<script>
const tag = document.querySelector(".tag");
function resize() {
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}`;
}
window.addEventListener("resize", () => {
resize();
});
resize();
</script>
</body>
</html>addEventLIstener 와 querySelector , innerHTML 을 배웠다 .
내 수준에선 너무 어려운 문제여서 하나도 내 힘으로 하지는 못했고
답안을 다봤는데도 한참 걸린 문제.
위치나 코드가 작동되는 방식같은게 아직은 헷갈리지만
좀 여러번 반복해서 해보면 기억할 수있을것 같다.
'Retrospection > Sprint' 카테고리의 다른 글
| 4. 객체 4 ~ 6 (0) | 2020.07.07 |
|---|---|
| 4. 객체 1~ 3 (0) | 2020.07.07 |
| 3. 배열의 반복 1 , 2 (0) | 2020.07.04 |
| 3. 반복문 1~3 (0) | 2020.07.04 |
| 배열기초 /타입 1 , 배열기초 1-3 (0) | 2020.07.04 |