| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- scrollY
- NodeList
- insertAdjacentHTML
- swiper
- JavaScript
- width
- 반복문
- mousemove
- 이벤트리스너
- 스크롤
- css
- 애니메이션
- Hover
- scroll
- NAV
- React
- swiperjs
- For
- 확장성
- html
- Sticky
- input
- scrollevent
- addEventListener
- forEach
- pointermove
- localstorage
- classList
- Animation
- getBoundingClientRect
- Today
- Total
목록반복문 (6)
ZeroToHunnit Coding
[Javascript] 마우스따라 움직이는 bar
위와 같이 각 번호에 마우스를 올리면 밑에 바가 자연스럽게 옆으로 움직이는 애니메이션을 만들어보았다. HTML 1번임 2번임 3번임 4번임 5번임 CSS .row{ width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 300px; position: relative; } li{ width: 250px; height: 200px; display: flex; align-items: center; justify-content: center; font-size: 40px; cursor: pointer; transition: all 0.3s; } li:hover{ color: crimson; } .line{ posi..
[Javascript] 확장성있게 모달창 띄우기
겉보기엔 그냥 제목 클릭하면 밑에 내용 보여주는 모달창같지만 코드를 보면 확장성이 있는 것을 알 수 있다. HTML 신기하다. h1태그나 content태그를 보면 싹 다 비워져있는데 저렇게 내용이 들어가있다. CSS .column{ padding: 0 120px; } .content-box{ border-bottom: 4px solid black; padding: 40px; cursor: pointer; } .column .content-box:last-child{ border-bottom: none; } .modal{ margin-top: 100px; width: 100%; height: 400px; background: #999; padding: 100px; } .modal .title{ font-s..
[Javascript] 스크롤에 따라 한글자씩 나타나게 하기
이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 ui를 만들어보았다. HTML 안 녕 하 세 요 헬 로 우 ~ 반 갑 습 니 다 이렇게 한 글자씩 span태그에 따로따로 담아주었다. 마지막 split-letter을 비워둔 이유는 나중에 밝히겠다. CSS .section{ margin-top: 500px; margin-bottom: 500px; height: 200vh; background-color: blue; } .sticky{ position: sticky; width: 100%; height: 100vh; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .split-letter{ font-size: 4..
[Javascript] 내용은 스크롤 되고 고정된 부분의 사진 바뀜
사진 부분은 고정되어 있지만 컨텐츠에 따라서 사진이 바뀌는 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..
리액트 문법 자체가 익숙하지 않고 뭔가 그냥 바닐라 자바스크립트 짤 때랑은 또 다른 느낌이라 적응하는데 시간이 걸릴거같은 느낌이다 어제 했던거 좀 까먹은 느낌이라 다시 복습해야겠다. 오늘은 동적인 ui랑 반복문에 대해서 공부했다. 1. 동적 ui 스스로 만들기 1) html css 미리 완성하기 2) ui의 현재 상태를 state로 저장 3) state에 따라 ui가 어떻게 보일지 작성하기 2. JSX 내에서는 if문 작성이 불가하고 삼항연산자를 사용해야함. 삼항연산자는 (조건식 ? 참 : 거짓)의 문법을 가지고 있다. 3. 바닐라 자바스크립트처럼 html을 조작하는게 아니라 state문으로 조절해야함. 4. array.map() : 중괄호 안에서 for반복문을 쓸 수 없기 때문에 사용하는 map 반복문..
[Javascript] 특정 위치에서 div 속성 바꾸기
이렇게 특정 위치에 도달하면 div의 속성을 바꾸고 특정 위치를 벗어나면 속성을 원래대로 돌리는 애니메이션을 만들었다. HTML 여기는 고정! 왼쪽은 고정, 오른쪽에 여러개의 box를 만들어두었다. CSS .section{ width: 100%; height: 500vh; margin-top: 500px; display: flex; } .left{ position: sticky; top: 0; width: 50%; height: 100vh; } .left p{ text-align: center; font-size: 60px; margin-top: 300px; } .right{ width: 50%; display: flex; } .right-left, .right-right{ width: 50%; } .r..