ZeroToHunnit Coding

이렇게 더보기 버튼을 누르면 추가의 책 자료들을 보여주는 ui를 만들었다. HTML은 거의 비워두고 자바스크립트로만 동작한다고 볼 수 있다. HTML 더보기 HTML은 큰 틀과 더보기 버튼만 담아두었다. CSS .content-box{ display: flex; flex-wrap: wrap; padding: 120px; } .content{ padding: 40px; width: 300px; height: 500px; } .photo{ width: 250px; height: 250px; background-color: #999; display: flex; align-items:center; justify-content: center; font-size: 40px; } .title{ display: blo..

겉보기엔 그냥 제목 클릭하면 밑에 내용 보여주는 모달창같지만 코드를 보면 확장성이 있는 것을 알 수 있다. 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..

오늘은 localstorage에 데이터 저장하는거 공부했는데 이거는 바닐라 자바스크립트할 때도 공부했던거라 수월하긴 했는데 예제 혼자 공부하는데 좀 애를 먹었다. 바닐라 자스도 다시 제대로 공부해야겠구만.. 1. localstorage로 반영구적인 데이터 저장이 가능하다. 2. localStorage.setItem('key', 'value') : 데이터 저장 3. localStorage.getItem('key') : 데이터 출력 4. localStorage.removeItem('key') 데이터 삭제 5. 로컬스토리지에 데이터를 수정하려면 데이터를 꺼내서 수정하고 다시 저장하면 됨. 6. 로컬스토리지는 문자만 저장할 수 있기 때문에 array나 object자료로 저장하려면 json으로 바꿔야함. 7. a..

요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..

후우 드디어 위기가 왔다. 뭔가 되게 복잡해지면서 머리에 안들어오고 응용도 안되기 시작했다. 싹 갈아엎고 처음부터 복습이 필요한 시기가 슬 온거같다. 일단 오늘은 Redux에 대해 공부했음 1. Redux를 사용하면 컴포넌트들을 props없이 state 공유할 수 있기 때문에 사용함. 근데 요즘 Redux Toolkit을 쓰는 것을 권장하기 때문에 엄밀히 말하면 Redux Toolkit을 공부했음 2. Redux 설치하는 방법 : 터미널에 install @reduxjs/toolkit react-redux 3. Redux 세팅하기 1) store.js 파일 생성하기 2) 생성한 파일에 아래 코드 붙여넣기 import { configureStore } from '@reduxjs/toolkit' export ..

위와 같이 스크롤하면 중간에 박스의 크기가 커지고 글자의 크기와 위치가 변형되게 만들어보았다. HTML 제 위치로 찾아갑니다~ CSS body, html{ contain: paint; } .section{ width: 100%; height: 300vh; } .wrap{ position: sticky; top: 0; left: 0; width: 100%; height: 100vh; } .bg{ width: 100%; height: 100%; background-color: aqua; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.3); } .title{ width: 100%; text-align: cent..

오.. 이제 7일차야..? 7일차치고는 뭔가 많이 알아가는거 같기도 하고..? 근데 했던거 다시하면 제대로 못하는 나를 보면서 머리 싸매고 있기도 하지만.. 언젠간 잘하겠지 뭐!! 1. ajax쓰려면 XMLHttpRequest (옛날거라 안씀), fetch() (이거 바닐라 자바스크립트할 때도 써봤는데), axios 라이브러리 쓰면 됨. 근데 리액트에서 axios 라이브러리 편함 2. axios 쓰려면 npm install axios 하고 import 해줘야함 3. axios.get('url').then(콜백함수).catch(콜백함수) 이런식임. fetch랑 비슷하네. then은 데이터 가져오는거 성공했을 때, catch는 실패했을 때 쓰는 공간 4. 동시에 ajax 요청 여러개 하려면 Promise.a..

원래는 스크롤 이벤트로 이렇게 애니메이션을 만들었다면 이번에는 Intersection Observer로 간단한 애니메이션을 만들어보았다. HTML 안녕하세요? 반갑습니다. 스크롤 이벤트 말고 intersection observer로 조금 편하게 스크롤 애니메이션 줄 수 있어요 대박이죠? CSS .section{ height: 6000px; } .box{ margin-top: 800px; } .box p{ font-size: 60px; font-weight: bold; text-align: center; opacity: 0; transform: scale(0); transition: all 0.6s; } .observe{ opacity: 1 !important; transform: scale(1)!impo..