ZeroToHunnit Coding

styled-components라는 것과 useEffect 공부했음! 1. styled-components 설치 방법 - npm install styled-components를 터미널에 쓰면 된다. 설치되면 import styled from 'styled-components'하면 됨. 2. 변수에 담아서 styled.요소`css코드작성` 3. 컴포넌트를 생성해주는 문법이기 때문에 변수 첫글자는 대문자로 해주기 4. styled-components의 장점 1) css파일 안열어도 됨 2) 스타일이 다른 js파일로 간섭되지 않음. (원래 App.css는 모든 파일에 간섭함) * App.module.css 이렇게 쓰면 App.js에만 css파일 적용됨 3) css파일이 필요가 없으니까 페이지 로딩시간이 단축됨..

위와 같이 평소엔 마우스 커서를 따라다니는 작은 원이었다가 특정 섹션에 마우스를 올리면 VIEW가 나오는 큰 원으로 변하는 커서를 만들어보았다. HTML VIEW 커서에 미리 VIEW를 넣어 놓는다. CSS .cursor{ position: absolute; width: 30px; height: 30px; background-color: black; border-radius: 50%; z-index: 9999; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .cursor p{ color: white; font-size: 40px; font-weight: bold; opacity: 0; visibili..

사실 어제 쓰는거 깜빡해서 어제꺼랑 오늘꺼 같이 몰아서 쓸건데 하아 진짜 어렵다!! 슬슬 어려워지기 시작한다. 뭔가 머리론 이해가 다 되고 이래저래 잘 풀리긴 하는데 내일 다시 보면 모를거같은 이 느낌? 그럴 땐 또 복습하면 되지~~! 한 10번은 돌려야 내꺼될듯 1. 이미지를 그냥 src에 넣어서 써도 되지만 public폴더에 넣어서 사용한다는 가정하에 리액트로 만든 html 페이지를 배포할 때 안전하게 이미지를 사용하려면 img src에 process.env.PUBLIC_URL + '/경로' 로 작성해야한다. 2. 길고 복잡한 코드들은 App.js 말고 다른 js파일로 만들어서 쓸 수 있다. 다른 js파일을 App.js 파일로 불러오고 싶으면 export default 변수명 으로 내보내고 impor..

이렇게 스크롤을 하면 한글자씩 서서히 나타나게 하는 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..

위와 같이 그냥 닫기를 누르면 새로고침해도 다시 뜨고, 오늘 하루 보지 않기를 누르면 새로고침해도 뜨지 않다가 하루 뒤에 열리는 팝업을 만들어보았다. 보통 쿠키로 많이 만드는데 현재 시간만 저장하면 되는데 서버와 통신해야하나 싶어서 로컬스토리지가 더 효율적일거같아 로컬스토리지에 저장하는 방식으로 만들었다. 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: ..