FrontEnd/HTML | JS | CSS

HTML up_sensor는 바텀시트를 올리기 위한 동작을 감지하기 위한 센서이다. 실제 바텀 시트 위에 감싸고 있는 투명한 벽으로, 바텀시트가 올라가면 사라진다. 센서를 두지 않으면 바텀 시트를 올리는 과정에서 스크롤 되면서 안의 내용이 스크롤 되는 것을 방지해서 만들었다. bottom_sheet_handle은 사용자에게 바텀시트를 올리고 내릴 수 있는 hint를 제공한다. CSS .bottom_sheet { display: flex; position: fixed; bottom: 0; width: 100%; height: 10%; border-top-left-radius: 30px; border-top-right-radius: 30px; background-color: #FFFFFF; overflow-..

HTML 0% 간단하게 slider bar 위에 button을 놓았다. img는 button 안에 위치한다. span 요소는 눌렀을 때 몇 퍼센트인지 나타내기 위함이다. CSS .slider_bar { display: flex; position: fixed; right: 5%; top: 35%; bottom: 20%; width: 2%; height: 40%; background: linear-gradient(to bottom, rgba(176, 196, 238, 1) 20%, rgba(176, 196, 238, 0.75) 35%, rgba(176, 196, 238, 0.5) 60%, rgba(176, 196, 238, 0.25) 85%, rgba(176, 196, 238, 0) 100%); border..

포트폴리오를 제작해야 할 일이 있어서 넷플릭스 디자인으로 만들어 보았다.시작 페이지body 포트폴리오를 시청할 프로필을 선택하세요. Jade Rabbit Boss Baby Larva Red css.main{ bottom: 0; ..

나는 주변의 문제들을 해결하는 방법을 고안하고, 기능을 구현해서 배포하는 것을 꿈꾸어 왔고, 이번 졸업요건 사이트를 만들면서 그 꿈을 실현해 보았다. 계기 동기 형 중에 졸업을 앞두고 있는 형이 있었다. 나도 마찬가지로, 수강신청을 할 때 즈음이었다. 3학년을 앞두고 있었기 때문에, 졸업요건을 따져가면서 어떤 과목을 수강해야 하는지 꼼꼼히 따져보며 장바구니 에 담을 과목을 고민하고 있었다. 주변의 문제들을 눈에 불을 켜고 찾고 있었던 때라, 개발하기 너무 좋은 타겟이라고 생각했다. 벤치마킹 웹 사이트를 제작하기 전에, 먼저 만들어져 있는 사이트를 둘러봤다. 세종대학교의 졸업요건 검사 사이트인 Please Graduate. 사이트가 정말 잘 되어있다고 생각해서 벤치마킹하고 웹사이트를 제작했다. 후에는 사이..