ZeroToHunnit Coding

위와 같이 가로(좌우)스크롤 시 각 섹션이 안보일 때까지 해당 제목이 고정되는 ui를 만들어보았다. HTML 1번 컨텐츠입니당 2번 컨텐츠입니당 3번 컨텐츠입니당 CSS body, html{ contain: paint; } .section{ width: 100%; height: 3000px; position: relative; margin: 500px 0; } .scroll{ height: 100vh; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; left: 0; } .box{ padding: 0 60px; width: 1400px; height: 700px; } .title{ mar..

위와 같이 마우스의 움직임에 따라 전체적인 페이지가 같이 움직이는 ui를 만들어보았다. HTML CSS * { overflow: hidden; margin: 0; padding: 0; } html,body{ background-color: #333; } .section { width: 100vw; height: 100vh; } .inner { position: absolute; background-color: #333; height: 2560px; } .rows { display: flex; align-items: center; justify-content: center; width: 100%; } .link { width: 400px; height: 600px; background-color: #ddd..

reset.css 라는 용어를 모르고 있다가 내가 평소에 하고 있는게 reset.css라는 것을 알게 되었다. reset.css란 특정 태그의 기본 템플릿같은 것을 본인이 코딩하는 스타일에 맞게 미리 설정해두는 것을 말한다. 예를 들어 ul,li를 쓰면 기본적으로 내용 앞에 동그라미가 하나 붙는데 나는 그 동그라미를 쓴 적이 한 번도 없기 때문에 list-style: none으로 초기에 설정해두고 사용한다. 이러한 초기값 설정을 해둔 것을 모아둔 것이 reset.css다. 구글에 reset.css를 검색하면 가장 상단에 나오는 링크가 하나 있는데 보통 그거를 복사해서 많이들 쓴다고 한다. 근데 나는 그렇게까지 다 필요한지는 모르겠어서 따로 자주 쓰는 것만 설정하는 편이다. https://meyerweb...

아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..

스크롤하는 것을 잘 보면 스크롤을 내릴 때 navbar가 사라지고 스크롤을 올리면 navbar가 위에서 스르륵 나온다. 이렇게 구현하게 되면 사이트에 방문한 사람들이 스크롤을 내리면서 내용에 잘 집중할 수 있을 것이고 메뉴를 통해서 다른 페이지로 이동하고자 할 때 굳이 맨 위로 올라가지 않아도 그 자리에서 스크롤 한 번만 위로 해주면 navbar가 나오기 때문에 아주 좋은 navbar 구현법이라고 생각한다. HTML 저는 navbar입니다. CSS .navbar{ width: 100%; height: 100px; background-color: black; color: white; font-size: 60px; padding: 0 30px; } .section{ width: 100%; height: 30..

이제 강의는 다 들었지만 뭔가.. 아직 잘 모르겠다. 다시 반복하면서 사이트 하나를 만들 계획이다. 그러면 자연스럽게 익숙해지지 않을까 싶다. 1. PWA(progressive Web App): 웹사이트를 안드로이드/ios 모바일 앱처럼 사용할 수 있다. 웹사이트에서 스마트폰 홈화면에 앱설치 가능 2. PWA장점 1) 모바일 환경에서 웹사이트 설치 가능 2) 오프라인에서도 동작 가능 (Cache storage) 3) 설치 유도 비용이 적음 3. PWA 설치 방법: 프로젝트를 만들 때 바로 terminal에 npx create-react- app 프로젝트명 --template cra-template-pwa 입력 4. 설치 후 index.js에 serviceWorkerRegistration.unregiste..

위와 같이 각 번호에 마우스를 올리면 밑에 바가 자연스럽게 옆으로 움직이는 애니메이션을 만들어보았다. 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..

리액트 너어무 어렵다 공부할 수록 앞에 했던거 점점 까먹는 느낌.. 진짜 복습 엄청 많이 해야할거같다. 코딩애플님 쉽게 설명해주시는데 머리가 안따라갑니다 1. 암호화폐 거래소나 SNS같이 실시간 데이터를 가져와야하는 사이트들에 react-query쓰면 좋음 2. 설치 방법 : npm install react-query >> index.js가서 const queryClient = new QueryClient() 작성해주고 이걸로 을 감싸면 됨 3. let result = useQuery('작명', function(){ return axios.get('주소').then function(파라미터){ return. 파라미터.data}) 하면 ajax요청 끝 4. react-query 장점 1) ajax 요청이 ..