목록분류 전체보기 (186)

계발하는 개발자

[Javascript] 음원 재생시간, 전체시간 표시 및 재생바 업데이트

이번에 next.js로 뮤직플레이어 기능 구현했던 것을 정리로 남겨본다. 먼저 전체적인 코드는 아래와 같다! HTML, CSS .progress { width: 182px; height: 3.2px; border-radius: 3px; background: rgba(255,255,255,0.4); } .pin { position: absolute; top: -5px; width: 16px; left: 96.5%; height: 16px; border-radius: 50%; background: #fff; pointer-events: all; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); } .bar { position: relative; background: #fff; ..
📌 Language/Javascript 2023. 10. 16. 23:59
[CSS] 스크롤바 스타일 커스텀하기

코드 스크롤바 css 커스텀 설정을 위해선 각 아래에 대한 CSS 코드를 추가해주면 된다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 컨텐츠가 클라이언트 높이를 초과했을 때 스크롤바가 생기는 body 요소에 직접 줄 수도 있고, 내가 overflow-y 속성을 준 요소를 지정해서 커스텀 스타일을 입힐 수 있다. body::-webkit-scrollbar { width: 5px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ backgro..
📌 Language/CSS 2023. 10. 16. 15:55
[favicon] 파비콘 설정하기 | 파비콘 안나올때

먼저 파비콘 생성하는 방법은 아래 사이트를 이용하면 편하다! https://wizlogo.com/ko/favicon-generator 무료 Favicon 생성기, 이미지 변환-Wizlogo 무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오. wizlogo.com 위 사이트를 통해 파비콘을 생성하고나서 next.js 프로젝트에서 파비콘을 설정하려고 public 폴더 안에 파비콘 이미지를 추가했더니 자꾸만 설정이 안됐다. 암만 새로고침해봐도 안됐음.. 그러던 중에 ctrl+shift+r을 눌러 강력 새로고침을 하니 그제야 됐다.
👟 Etc 2023. 10. 14. 17:32
[Redux] 리액트 Redux-Toolkit 환경 셋팅 (with NextJS + Typescript)

사전 준비 - redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit react-redux Redux 세팅하기 - redux.js 파일 생성 redux.js 파일 생성후 아래와 같은 코드를 붙여넣는다. (2번의 store.js 파일에 합쳐도 상관없음) - store.js 파일 생성 store.js 파일 생성후 아래와 같은 코드를 붙여넣는다. store 파일을 생성했다면, layout.js 파일로 가서 컴포넌트로 children을 감싸주면 된다. - Provider 로 root 컴포넌트 랩핑 자세한 설명은 아래 이전 포스팅 참고 ⬇️ [Next.js 13] Error: could not find react-redux context value; please ensure the comp..
💻 Frontend/상태관리 2023. 10. 13. 15:05
이전 Prev 1 ··· 14 15 16 17 18 19 20 ··· 47 Next 다음