일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- forEach
- classList
- mousemove
- 반복문
- Hover
- html
- 확장성
- width
- localstorage
- addEventListener
- 애니메이션
- NAV
- Animation
- pointermove
- insertAdjacentHTML
- React
- Sticky
- scrollY
- input
- 이벤트리스너
- JavaScript
- swiperjs
- NodeList
- scrollevent
- swiper
- getBoundingClientRect
- css
- scroll
- For
- 스크롤
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
위와 같이 그냥 닫기를 누르면 새로고침해도 다시 뜨고, 오늘 하루 보지 않기를 누르면 새로고침해도 뜨지 않다가 하루 뒤에 열리는 팝업을 만들어보았다. 보통 쿠키로 많이 만드는데 현재 시간만 저장하면 되는데 서버와 통신해야하나 싶어서 로컬스토리지가 더 효율적일거같아 로컬스토리지에 저장하는 방식으로 만들었다. HTML contents 닫기 오늘 하루 보지 않기 CSS button { border: 0; background: none; cursor: pointer; } .main-popup { position: fixed; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; background-color: #f..
프로젝트라기엔 거창한 멘트지만 프로젝트 하나에 필요한 아주 기초적인 공부는 끝난 듯하다. 근데 이렇게 공부하고 나니까 생각보다 간단한데 이걸로 프론트앤드를....? 이라는 생각이 들기도 하고 큰 범위안에 완전 발톱만큼 한거같은 느낌도 드니까 막막하다. 그래도 아자자!!!! 1. input 태그 role 종류: text, range, checkbox, date 등등 필요할 때마다 찾으면 될듯, 근데 이거는 그냥 html 내용이긴함.. 2. input태그에 이벤트리스너 걸고 싶으면 onChange / onInput 사용하면 됨. 바닐라 자바스크립트에서도 있었는데 기능은 똑같지만 change 문법이 조금 다르긴했음. 3. 이벤트버블링을 막고싶으면 이벤트버블링이 발생하는 코드에 파라미터 뚫고 e.stopProp..
사진 부분은 고정되어 있지만 컨텐츠에 따라서 사진이 바뀌는 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: ..
오늘은 이때까지 했던거 다시 복습하고 props라는걸 새로 공부했다. 이거는 몇 번을 다시 봤는데도 확실하게 머리에 들어오지 않아서 몇 번은 공부를 해야겠다. 1. 컴포넌트는 state와 다른 함수에서 쓰기 때문에 컴포넌트 안에서 state를 갖다 쓸 수 없다. 그럴 때 props를 쓰면 된다. 2. 자식 요소에 state를 전송하는 방법 1) 자식 컴포넌트안에 작명={state이름}을 써준다. state이름란에는 함수도 쓸 수 있음 2) 컴포넌트에 파라미터로 아무 이름이나 쓸 수 있지만 보통 props를 쓰기 때문에 파라미터 등록 후 props.작명을 써주면 state를 갖다 쓸 수 있다. 3. props는 부모 요소에서 자식 요소로만 쓸 수 있다. 반대로 자식 요소에서 부모 요소로, 컴포넌트에서 다른..
display: flex와 display: grid는 레이아웃을 다루는데 있어 강력한 도구들입니다. 여러 가지 레이아웃 요구사항에 유연하게 대응할 수 있으며, 두 속성은 각각의 특성에 따라 사용되기도 합니다. 간략하게 정리해보면, flex는 주로 한 방향(주로 수평 또는 수직)으로 아이템을 정렬할 때 사용되며, grid는 그리드(격자)를 사용하여 아이템을 배치할 때 사용됩니다. grid는 2차원 레이아웃을 다룰 수 있어서 보다 복잡한 구조를 만들 수 있습니다. grid의 몇 가지 중요한 속성들을 더 자세히 살펴보면: grid-template-columns와 grid-template-rows: 그리드의 열과 행을 정의합니다. fr 단위를 사용하여 공간을 분할하거나, px 등의 고정값을 사용할 수 있습니다...
리액트 문법 자체가 익숙하지 않고 뭔가 그냥 바닐라 자바스크립트 짤 때랑은 또 다른 느낌이라 적응하는데 시간이 걸릴거같은 느낌이다 어제 했던거 좀 까먹은 느낌이라 다시 복습해야겠다. 오늘은 동적인 ui랑 반복문에 대해서 공부했다. 1. 동적 ui 스스로 만들기 1) html css 미리 완성하기 2) ui의 현재 상태를 state로 저장 3) state에 따라 ui가 어떻게 보일지 작성하기 2. JSX 내에서는 if문 작성이 불가하고 삼항연산자를 사용해야함. 삼항연산자는 (조건식 ? 참 : 거짓)의 문법을 가지고 있다. 3. 바닐라 자바스크립트처럼 html을 조작하는게 아니라 state문으로 조절해야함. 4. array.map() : 중괄호 안에서 for반복문을 쓸 수 없기 때문에 사용하는 map 반복문..
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..