뇌 채우기 공간

GET export const getList = async () => { const data = (await firebase.firestore().collection("MY_COLLECTION_NAME").get()).docs.map( (doc) => { return { ...doc.data(), id: doc.id }; } ); return data; }; 콜렉션을 만들고 그 콜렉션에 있는 모든 데이터를 가지고 오는 코드 id를 자동 생성으로 만들게 되면 data안에는 id가 안들어있어서 따로 map으로 붙여서 새로운 배열을 만들어줬다. GET BY ID export const getItemById = async (id: string) => { const data = ( await firebase.fi..

1탄은 아래 게시물 https://sso-feeling.tistory.com/850 [css] clip-path polygon으로 원형 wheel 만들기 1탄 코드펜에서 이런 작업물을 발견했습니다. https://codepen.io/wheatup/pen/GbgyLY Interactive Wheel Menu Using javascript and css(non-svg) to make an hold-and-drag wheel menu.... codepen.io 마우스 클릭을 하면 동그란 휠이 나와서 sso-feeling.tistory.com 2탄은 리액트로 코드를 옮기고 hover 할때마다 약간 바운스되면서 커지는 효과를 넣어보겠습니다. css는 styled-components를 사용하겠습니다. 1. styl..

코드펜에서 이런 작업물을 발견했습니다. https://codepen.io/wheatup/pen/GbgyLY Interactive Wheel Menu Using javascript and css(non-svg) to make an hold-and-drag wheel menu.... codepen.io 마우스 클릭을 하면 동그란 휠이 나와서 마우스가 움직일 때 마다 위치에 있는 버튼이 튀어나오는 인터렉션입니다. 그런데 무엇보다 이 원형 모양을 css로 어떻게 만들었는지 궁금해서 css를 분석해보았습니다. 전체 코드는 링크에서 확인 바랍니다. 1. 테두리있는 조각난 원링 모양 만들기 각각의 버튼에 기본적으로 이러한 css가 있었습니다. 예상컨대 이것이 핵심인 것 같았습니다. background-image: r..

오늘은 달력을 만들어볼 것이다. 달력 만드는 것이 너무 어려워서 챗 gpt한테 코드 좀 작성해달라했는데.. 정말 뭔가 잘 작성해주었지만.. 프리미엄이 아니라서 끝까지 볼 수 없었다. 그래서 그냥 내가 했다. 1) 요일 만들기 빨간 줄 쳐진 요일 부분을 만들어보겠다. 이 달력 만드는 것 중에 가장 쉬운 부분은 여기다. 그래서 이거부터 하겠음. const DayoftheWeek = () => { const date = ["일", "월", "화", "수", "목", "금", "토"]; return ( {date.map((p) => { return ( {p} ); })} ); }; export default DayoftheWeek; 요일 배열을 만들어주고 map돌려서 보여주면 된다. 아주 쉽죠잉? 2) 현재 월..

인터렉티브 웹을 공부하다가 브런치 스타일을 한번 따라해보기로 했다. 결과는 아래 동영상이다. 여기서 내가 고려한 포인트는 아래와 같다. 1. 사진 배경을 덮으면서 콘텐츠가 올라가게 하기 2. 헤더 부분이 사진 영역에 있을 때는 투명했다가 스크롤을 하면 그대로 안보이고, 글 영역으로 가면 반투명 해지고 progress bar가 나타남 3. 헤더 부분 아이콘이 사진 영역에서는 검정이고 글 영역에서는 하얀색. 4. 페이지 높이에 따른 progress bar 만들기 (전체코드는 맨 아래에) html은 이렇게 짰다. 크게 메뉴, 이미지, 콘텐츠 부분으로 div를 두었다. 꽃이 끓는 풀이 사랑의 놀이 청춘 바이며, 힘있다. 피가 뼈 커다란 남는 갑 생생하며, 이 사람은 그들은 그리하였는가? 모래뿐일 피고, 같은 따..