ZeroToHunnit Coding

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

reset.css 라는 용어를 모르고 있다가 내가 평소에 하고 있는게 reset.css라는 것을 알게 되었다. reset.css란 특정 태그의 기본 템플릿같은 것을 본인이 코딩하는 스타일에 맞게 미리 설정해두는 것을 말한다. 예를 들어 ul,li를 쓰면 기본적으로 내용 앞에 동그라미가 하나 붙는데 나는 그 동그라미를 쓴 적이 한 번도 없기 때문에 list-style: none으로 초기에 설정해두고 사용한다. 이러한 초기값 설정을 해둔 것을 모아둔 것이 reset.css다. 구글에 reset.css를 검색하면 가장 상단에 나오는 링크가 하나 있는데 보통 그거를 복사해서 많이들 쓴다고 한다. 근데 나는 그렇게까지 다 필요한지는 모르겠어서 따로 자주 쓰는 것만 설정하는 편이다. https://meyerweb...

요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..

위와 같이 배경에 따라 글자의 색이 자동적으로 변하는 신기한 CSS 코드 'mix-blend-mode'가 있다. HTML 안녕하세요~ CSS .section{ width: 100vw; height: 100vh; position: relative; } .up{ width: 100%; height: 50%; background-color: black; } .down{ width: 100%; height: 50%; background-color: white; } .letter{ font-size: 80px; text-align: center; mix-blend-mode:difference; color: white; rotate: 90deg; position: absolute; top: 50%; left: 50..

이런 신기한 폰트 애니메이션을 만들어보았다. HTML H E L L O W O R L D p태그에 따로따로 담아주었다. CSS @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); .font{ font-family: "Hepta Slab"; text-align: center; margin-top: 300px; font-size: 60px; font-variation-settings: "wght"100; white-space: nowrap; float: left; animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s; } .font:n..

우선 SwiperJs는 홈페이지에 흔히 쓰이는 캐러셀을 편하게 만들어줄 수 있는 자바스크립트 라이브러리다. HTML, CSS, JS 짜기 전에 SwiperJS 홈페이지 들어가서 본인이 편한 방식으로 cdn 코드를 불러오면 된다. HTML slide1제목 사진1 slide2제목 사진2 slide3제목 사진3 SwiperJs를 성공적으로 불러왔다면 html의 클래스명을 정해진대로 써야 제대로 작동한다. 우선 section이라는 큰 div안에 본격적으로 swiper를 짠다. 무.조.건 swiper 안에 swiper-wrapper를 넣고 그 안에 swiper-slide를 넣어야한다. swiper-slide가 실질적으로 슬라이드되는 큰 틀이라고 보면 된다. swiper-slide안에 본인이 원하는대로 꾸며준다. ..

위와 같이 글자의 색이 좌에서 우로 채워지는 듯한 애니메이션을 짜보았다. HTML 안녕하세요 반갑습니다. 안녕하세요 반갑습니다. 코딩 너무 재밌죠? 코딩 너무 재밌죠? CSS .box{ position: relative; transform: translateX(20%); } .box:first-child{ margin-top: 300px; } .gray{ text-align: center; font-size: 100px; color: #999; font-weight: bold; } .black-box{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; transition: all 0.3s; animation: w100 3s forwards..

position: sticky를 활용한 한쪽 고정, 한쪽만 스크롤하게 하기 이 전에는 스크롤하다가 특정 위치에 도달하면 position: fixed를 담은 class를 추가하는 방법으로 사용했는데, position: sticky를 알게된 후에 더욱 쉽게 가능해졌다. HTML 안녕하세요 저는 스크롤됩니다. 신기하죠? position: sticky로 쉽게 신기한 걸 구현 가능합니다. 나는 고정 sticky-box라는 큰 div박스 안에 left와 right로 나눠 left는 스크롤되게, right는 고정되게 html을 구성했다. CSS .sticky-box{ margin-top: 500px; margin-bottom: 500px; display: flex; height: 400vh; } .left, .rig..