일일회고
마이크로 애니메이션이나 그런데 늘 관심이 많앗다 그래서
오늘은
https://www.cssscript.com/demo/bubble-confetti-effect-button/
위 사이트에서 confetti 애니메이션 코드를 보고 커스텀을 하려고했다.
pure css 와 바닐라 js로만 사용해서 마이크로 애니메이션을 하려고 했다.
근데 코드를 긁어와서 돌려보니깐 되지않았다 왜일까 고민을 했는데
어처구니 없는 실수를 했다.
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="./script.js"></script>
</head>
<body>
<h1>Hello there!</h1>
<div class="one">s</div>
<button class="confetti-button">Click me!</button>
</body>
</html>위와 같은 식으로 html이 작성되었는데.
js코드에서 아무리해도 dom이 긁어와 지지가 않았다.
그래서 고민을 계속 해보니.
저번에 브라우저 원리를 공부했던게 생각한다.
브라우저원리?
브라우저는 html코드를 받아와서 파싱을 하게 된다
파싱을 해서 dom트리를 만들고 css도 파싱해서 cssom이란걸 만들게 되는데.
html를 파싱해서 dom트리를 만들 이떄
중간에 script 태그를 만나게 되면
자바스크립트 코드를 실행하게된다.
그러니깐 head 태그안에 script를 가져오는 코드를 넣었으니.
당연히 dom트리가 만들어 지기전에 dom객체를 받아오려고 했으니 될리가 없다.
깨달았던점
cs공부? 브라우저 공부가 헛되지만은 않구나 이다.
가지고 있는 지식으로 나름의 트러블 슈팅을 했다.
