바닐라JS3 Vanilla JS. DropDown Menu(feat. CSS) * 오늘은 자바스크립트로 드롭다운 메뉴 만들기 도전 * 저번에 못 만들고 타협해서 셀렉트 박스로 바꿨었는데 // class에서 dropdown과 closed 2가지를 선언 DropDown ✓ 유튜브 menu 2 menu 3 menu 4 * class에서 띄어쓰기를 하면 하나의 class가 아닌 다른 class로 선언된다. body { margin: 0; font-family: Courier New; font-size: 20px; } ul { margin: 0; padding: 0; list-style-type: none; } a { text-decoration: none; color: black; } .dropdown { transition: all 0.2s ease-in-out; overflow: hi.. 2023. 1. 16. Vanilla JS. D-day calculator (feat. flexible) * 저번에 배운 고정된 날짜 값에 대한 디데이 계산을 토대로 입력 값에 대한 디데이 계산기를 만들어보았다. 디데이 계산기 // 계산된 디데이 값이 나오기 전까지 안보이게 .hidden { display: none; } * 계산된 디데이 값이 나오기 전까지 안보이게 클래스값을 줘서 css display로 출력이 안되게 숨겨두었다. const main = document.querySelector("#main"); const title = document.querySelector(".title") const select = document.querySelector(".select"); function mainHandle(event) { const Hidden = "hidden"; event.preventDef.. 2023. 1. 13. Vanilla JS. modal * 노마드코더 영상을 참고하여 만들었습니다. 열기 I'm a modal ❌ const openModal = document.querySelector("#btn"); const modal = document.querySelector(".modal"); const overLay = modal.querySelector(".modal_overlay"); const close = modal.querySelector("button"); function openHandle() { modal.classList.remove("hidden"); } function closeHandle() { modal.classList.add("hidden"); } // const openHandle = () => { // modal.c.. 2023. 1. 7. 이전 1 다음
