[JavaScript] [Wordle 게임 만들기] 윈도우 크기에 따라 <div> element 숨기기

강사님께서 설명해주시면서 작성한 코드는 다음과 같았다.

코드는 동일한데 innerText 내용만 다르다. (Gameclear / Gameover의 경우)

중복 코드 좋지 않다는거 알고 있는데.. 바꾸다보니 자꾸 이상하게 꼬여서 일단은 냅뒀음 ㅜㅜ

1. doument.createElement('div')를 통해 새로운 <div> element를 생성했고,

2. div.innerText를 통해 화면에 배치시킬 문구를 작성하였다.

3. js에서도 css처럼 style을 줄 수도 있다고 설명해주시면서 div를 화면에 적절하게 배치시켰다.

(가능하긴 하지만, css에서 작성할 때처럼 자동완성이 되지도 않고, 오타 하나의 타격이 매우 크므로

사용을 지양하는게 좋음)

4. document의 body 파트에 appendChild를 통해 div를 추가시켰다.

​

해당 코드를 통해 구현한 기능은

정답을 맞추거나(Gameclear) 게임오버 됐을 때(Gameover) 적절한 문구를 화면에 보여주는 거다! !

요렇게 뜬다! ! 너무 투박해서 문구 디자인, 배치를 바꾸고 싶은데 일단 보류

​

근데 문제는 내가 html, css를 통해 윈도우 화면이 500px보다 작아지면 화면 사이즈를 키워달라는

화면을 띄우도록 해놔서

div 문구가 뜬 후 화면을 500px보다 작게 만들면 div 내용과 사이즈 경고 내용이 같이 뜬다는 거였다..

ㅋ... 이렇게 뜨자마자 소리 지르고 싶었음

이걸 해결하기 위해서는 윈도우 창이 500px보다 작아졌을 때만 div가 보이지 않도록 코드를 추가해야 했다.

얼른 구글 선생님의 도움을 받았음

​

<참고한 것들>

https://yeonzzy.tistory.com/29#:~:text=%EB%8C%80%EB%B6%80%EB%B6%84%20%EC%A0%84%EC%B2%B4%20%EC%B0%BD%EC%9D%98%20%ED%81%AC%EA%B8%B0%EB%8A%94,()%20%EB%A5%BC%20%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4%20%EB%90%9C%EB%8B%A4.

[javascript] onresize() 함수를 사용해 크기에 따라 변화하는 반응형 코딩하기

 

https://hianna.tistory.com/484

[Javascript] div 생성, 삭제, 숨기기

 

​

내가 추가한 코드는 다음과 같다.

window 객체의 onresize()를 사용하여 사용자가 브라우저 창 / 프레임을 변경했을 때 이벤트를 호출하고,

width가 500px보다 작아지면 div의 display를 none으로 바꿔줬다.

이외의 상황에서는 (500px 초과) display를 block으로 바꿔주어 다시 보이도록 했다.

​

이렇게 바꾸니 정상적으로 작동한다 ! !

Gameclear 후 500px 초과일 때

Gameover 후 500px 초과일 때

Gameclear/over 후 500px 이하일 때

​

onresize와 innerWidth, style.display 사용하여 해결 ! !

그나저나 캡쳐하면서 알게 된건데 문구 중앙으로 배치했는데 왜 왼쪽 정렬이지......

​

이제 이거 해결하러 가봐야겠다

​

(수정)

text-align: center 사용하여 수평 중앙에 배치 완료함!

짜잔 ~.~ 물론 아직도 디자인 구린거 인정

​