ZeroToHunnit Coding

https://jeonghui-seong.github.io/strongbeach/ 디자인 오류로 인한 반응형 실패 사이트.. 나름 기분 좋게 디자인도 완성도 있게 끝낸거 같고 으쌰으쌰 퍼블리싱을 시작했지만 만들면서 깨달은게 반응형 사이즈를 너무 고려하지 않았다는 것이다.. 바닐라JS로 모든 것을 하려니 생각 외로 막혔던 부분이 많아서 시간도 오래걸릴 뿐더러 퍼블리싱이라는걸 오랜만에 한 탓에 버벅대면서 시간이 꽤나 걸리고 반응형 작업에서 고민되는 부분이 너무 많아서 이 프로젝트는 포기하기로 마음 먹었다.. 애초에 설계할 때 높이 값을 화면에 꽉차게 만드는 부분이 많았어서 그런지 피그마로 디자인할 때 태블릿과 모바일 환경은 신경쓰지 않은 상태로 높이 값을 임의로 정해서 비율에 맞지 않게 디자인한게 오류였다...

위와 같이 가로(좌우)스크롤 시 각 섹션이 안보일 때까지 해당 제목이 고정되는 ui를 만들어보았다. HTML 1번 컨텐츠입니당 2번 컨텐츠입니당 3번 컨텐츠입니당 CSS body, html{ contain: paint; } .section{ width: 100%; height: 3000px; position: relative; margin: 500px 0; } .scroll{ height: 100vh; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; } .box{ padding: 0 60px; width: 1400px; height: 700px; } .title{ mar..

스크롤을 내리다가 특정 위치가 되면 가로로 스크롤되는 것을 만들었다. HTML 가로 스크롤 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ HTML은 매우 간단하다. 그냥 가로로 스크롤 될 박스 하나만 만들어주면 된다. CSS .section{ margin-top: 1000px; margin-bottom: 1000px; contain: paint; height: 300vh; } .scroll-box{ width: 200vw; height: 100vh; background: linear-gradient(90deg, #abc123,#321cba); position: sticky; top: 0; left: 0; } 이번에도 또한 pos..