ZeroToHunnit Coding

평소에 로딩이 오래걸리는 페이지들은 애니메이션이나 로딩중이라는 문구를 사용해야 기다리는 사람이 좀 덜 지루하게 만들 수 있다. 그래서 한 번 만들어 보았다. 이 페이지는 옛날에 포트폴리오로 직접 혼자서 만들었던 페이지고 로드되는 시간이 짧아서 아쉽지만 표현은 할 수 있었다. 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 ..

여러 개의 타이틀이 있고, 각 타이틀에 마우스를 대면 해당 타이틀에 맞는 컨텐츠를 보여주고, 다른 타이틀에 마우스를 올리면 이전에 보여졌던 컨텐츠는 숨기고 새로운 컨텐츠를 보여주는 기능을 만들었다. HTML A site 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. B site 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. C site 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C ..

위와 같이 스크롤 함에 따라 큰 박스가 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..