-
(HTML/CSS/JS) 간단한 이벤트 처리 해보기!HTML CSS JS 2021. 8. 11. 15:46
- 추후 프로젝트에 메뉴바를 만들기 위해 메뉴바 실습을 해보기로 했다.
- 메뉴바에 마우스를 올리면 메뉴바 색상, 글씨 크기, 굵기가 변경하게끔 이벤트 처리를 했다.
- 메뉴바 크기가 천천히 길어지게끔 추가!
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>div{width: 100px;height: 75px;background-color: coral;text-align: center;line-height: 75px;margin: 5px;font-size: 15px;transition: all 3s;}</style></head><body><ul><li><div class = 'menu'>상의</div></li><li><div class = 'menu'>하의</div></li><li><div class = 'menu'>신발</div></li><li><div class = 'menu'>가방</div></li></ul><script type="text/javascript">var buttons = document.querySelectorAll('.menu');for(var button of buttons){button.onmouseover = function(){this.style.backgroundColor="aqua";this.style.fontSize = "20px";this.style.fontWeight = 'bolder';this.style.width = '50%';}button.onmouseout = function(){this.style.backgroundColor="coral";this.style.fontSize = "15px";this.style.fontWeight = 'normal';this.style.width = '20%';}}</script></body></html>cs 
기본 메뉴바 - 마우스 올려서 바뀌는 것을 보여주고 싶은데 다음엔 짤로 만드는 법을 알아봐야겠다...
'HTML CSS JS' 카테고리의 다른 글
(HTML/CSS/JS) Google Map API를 사용해보자! (1) 2021.08.20 (HTML/CSS/JS) 사진 갤러리 만들기 (1) 2021.08.17 (HTML/CSS/JS) Jquery를 이용한 반응형 메뉴판 만들기 (0) 2021.08.17