ZeroToHunnit Coding

사진 부분은 고정되어 있지만 컨텐츠에 따라서 사진이 바뀌는 ui를 만들어보았다. HTML 1번 이미지 2번 이미지 3번 이미지 4번 이미지 1번 컨텐츠 2번 컨텐츠 3번 컨텐츠 4번 컨텐츠 우선 이미지 부분과 컨텐트 부분의 큰 div를 만들고 안에 갯수에 맞게 작은 div들을 만들어주었다. CSS body, html{ contain: paint; } .section{ width: 100vw; height: 400vh; margin-top: 500px; margin-bottom: 500px; display: flex; } .sticky{ position: sticky; width: 50vw; height: 100vh; top: 0; left: 0; } .img{ position: absolute; widt..

평소에 로딩이 오래걸리는 페이지들은 애니메이션이나 로딩중이라는 문구를 사용해야 기다리는 사람이 좀 덜 지루하게 만들 수 있다. 그래서 한 번 만들어 보았다. 이 페이지는 옛날에 포트폴리오로 직접 혼자서 만들었던 페이지고 로드되는 시간이 짧아서 아쉽지만 표현은 할 수 있었다. HTML 로딩중입니다... 우선 간단하게 loading div를 html 제일 위에 만들어준다. CSS .loading{ position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; font-size: ..

SwiperJs로 이렇게 둥글게 위아래로 스크롤되는 3d 캐러셀을 만들어보았다. HTML 큰 섹션박스에 swiper기본 템플릿을 넣어주었다. CSS .section { overflow: hidden; width: 100vw; height: 100vh; } .swiper { width: 100vw; height: 80vh; overflow: visible; margin-top: 10vh; } .swiper-slide { width: 100%; height: 80%; display: flex; align-items: center; justify-content: center; } .content { width: 900px; height: 500px; border: 6px solid black; } .swipe..

각 박스에 도달하면 하단 고정 메뉴안에 해당되는 박스의 메뉴가 활성화되고 큰 섹션을 나가면 모든 활성화가 사라지는 ui를 만들어 보았다. HTML box1 box2 box3 box4 box1 box2 box3 box4 섹션안에 박스 네개와 list가 포함된 menu박스를 만들어주었다. CSS .section{ margin-top: 400px; margin-bottom: 400px; background-color: #999; padding: 200px; } .box{ width: 100%; height: 150vh; margin-top: 200px; background-color: black; color: white; font-size: 60px; } .menu{ position: sticky; botto..

화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. HTML 무엇을 사실건가요? 모자 셔츠 free 사이즈를 선택해주세요. 95 100 105 form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다. CSS form{ margin-left: 200px; margin-top: 200px; } #apparel, #hat-size, #shirts-size{ font-size: 40px; padding: 40px; } #hat-size, #shirts-size{ visibility: hidden; opacity: 0; transition: all 0.3s; position: absolute; } .on{ visibility: visible ..

위와 같이 스크롤 함에 따라 큰 박스가 3개로 나눠지고 뒤집어져서 뒷면이 나오는 기능을 구현해봤다. HTML 카드1 뒷면 카드2 뒷면 카드3 뒷면 스크롤 ㄱㄱ CSS .section{ height: 6000px; } .wrapper{ width: 100%; height: 100vh; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; background-color: black; } .grid{ display: grid; width: 1200px; height: 50vh; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; grid-auto-col..

스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다. HTML CSS body, html{ height: 6000px; } .bar{ width: 100vw; height: 50px; position: fixed; top: 0; left: 0; background-color: #999; } .percent{ width: 0; height: 100%; background-color: black; transition: all 0.1s; } 전체 높이 6000px로 잡아주고 bar 박스는 위에 고정시켜주었다. JAVASCRIPT let percent = document.querySelector('.percent'); let screenHeight = document.que..

- 정규식이란? 정규식은 문자열에서 특정 문자를 찾기 위한 것이다. 즉 어떤 문장에 특정 문자가 포함되어있는가를 파악할 수 있다는 뜻이다. - includes() includes함수는 영어 뜻 그대로 포함되어 있는가를 파악해준다. 하지만 단순히 포함되어 있는지만 파악하기 때문에 한계점이 많다는 단점이 있다. ex) 'abc'.includes('a') >> true 반환 / 'abc'.includes('d') >> false 반환 - test() test함수는 정규 표현식을 만족하는지 판별해준다. /포함문자여부/.test('검사할 문자')의 문법을 가진다. ex) /^a/.test('abc') >> true 반환 (//안에 ^a는 a로 시작하냐라는 의미이다.) /[a-z]/.test('abc') >> tr..