wazac

클릭했을 때 하위 메뉴가 하나씩 나타나는 사이드 메뉴를 만들어 보겠습니다. 첫 번째는 메뉴들이 TOP에서 50픽셀 정도 위로 가있고 opacity가 0이라 영역은 있지만 보이지 않는 상태입니다. 만약 display none을 하고 싶다면 활성화할 때에는 display block 후 top과 opacity의 값을 바꾸도록 해야 모션이 적용됩니다. 두 번째는 첫 번째 메뉴에 서브 메뉴들이 겹쳐있는데 하위 메뉴를 감싸고 있는 메뉴의 zIndex가 낮아야 합니다. 그래야 뒤로 가려져 보입니다. 그리고 활성화가 되면 각 메뉴별로 left값을 주면 됩니다. 먼저 마크업을 해보겠습니다. Menu sub1 sub2 sub3 sub4 Menu2 sub1 sub2 sub3 sub4 사실 저렇게 굳이 submenu를 한 번..

키보드에서 입력을 받지 않고 직접 키패드를 클릭하여 비밀번호를 체크하는 기능을 만들어보았습니다. 참고로 단순히 웹단에서 정해진 값을 입력값과 비교하는 로직만 있습니다. 자바스크립트는 OOP기반으로 작성하였습니다. 1. 마크업 스타일 1 2 3 4 5 6 7 8 9 0 1-1. SCSS사용시 $errorColor: red; $confirmColor: green; .pwWrap { width: 80%; max-width: 450px; background: lightGrey; margin: 20px auto; .pwSection { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height..

스크롤을 함에 따라 상태바가 스크롤 위치에 따라 변경되며 상태를 보여주는 스크롤 프로그레스 바를 만들어보았습니다. 생각보다 간단해서 공유해보고자 합니다. 우선 마크업을 합니다. 보통은 window 스크롤을 많이 사용하지만 저는 div에 스크롤을 주고 적용해 보려고 합니다. // index.html 0% { ...contents } // style.css html, body, .wrap { width: 100%; height: 100%; overflow: hidden; } .wrap { position: relative; overflow-y: auto; padding-top: 13px; } .barWrap { position: fixed; top: 0; left: 0; width: 100%; height:..

멋진 홈페이지들을 탐색하던 중 괜찮아 보이는 효과를 발견해서 직접 구현해 보았습니다. 다음과 같은 효과를 구현하기 위한 구조와 방식은 다양하겠지만, 저는 단순하게 구현하였습니다. div 안에 inner_div를 두고 첫번째줄의 inner_div에게는 left -100% 를 두번째 줄의 inner_div에게는 left 100%를 주어, 동시에 left: 0이 될때 다음과 같은 액션이 일어나도록 하였습니다. class하나로 컨트롤 했기 때문에 javascript은 단순히 class만 추가해 주면 됩니다. 1. html Click Me 2. css html,body{ width:100%; height:100%; } * { padding:0; margin:0; } .wrapper{ position: relati..