일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- localstorage
- css
- width
- addEventListener
- swiper
- scrollY
- classList
- html
- scrollevent
- swiperjs
- Hover
- scroll
- insertAdjacentHTML
- getBoundingClientRect
- 스크롤
- React
- 반복문
- forEach
- JavaScript
- 확장성
- input
- NodeList
- Sticky
- Animation
- 이벤트리스너
- 애니메이션
- For
- mousemove
- NAV
- pointermove
- Today
- Total
목록JavaScript (34)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CVgqe/btsDxABSZYd/47W62CAP5wTH3j0ubLZej1/img.gif)
평소에 로딩이 오래걸리는 페이지들은 애니메이션이나 로딩중이라는 문구를 사용해야 기다리는 사람이 좀 덜 지루하게 만들 수 있다. 그래서 한 번 만들어 보았다. 이 페이지는 옛날에 포트폴리오로 직접 혼자서 만들었던 페이지고 로드되는 시간이 짧아서 아쉽지만 표현은 할 수 있었다. 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: ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LKjkc/btsDo86jyDn/tH0hbhpFyrD9hkrRO4GukK/img.gif)
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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b5LwyP/btsDkUghnTj/PsiBtEKdwXWo836FEx5eok/img.gif)
각 박스에 도달하면 하단 고정 메뉴안에 해당되는 박스의 메뉴가 활성화되고 큰 섹션을 나가면 모든 활성화가 사라지는 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2StmM/btsDhgqoE3S/tFIukRU67kshwGSk6n4rxk/img.gif)
화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. 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 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CpGd4/btsCUxU5u5i/kG0Hg9F6ZayagdVnwKAD3k/img.gif)
위와 같이 스크롤 함에 따라 큰 박스가 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/qU3fk/btsCZ20zNwU/kGaSFE5yT9WexnfLNJsEMK/img.gif)
스크롤을 내리면 전체 페이지 중 현재 어디 쯤을 읽고있는지 나타내주는 바를 만들어 보았다. 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/meh3I/btsCR96VUmq/1SP69txzt9FPzjb5gbvCo1/img.gif)
이렇게 한글자씩 적어나가는 타이핑 애니메이션을 만들어보았다. HTML CSS .section{ margin-top: 300px; } .section p{ text-align: center; font-size: 60px; } JAVASCRIPT const typingText = "안녕하세요~ 글자 타닥타닥"; const text = document.querySelector(".text"); let i = 0; function typing(){ if (i