이 그림을 사용해서 좌우로 흔들리는 건배효과를 만들고싶었다. 채팅창에서 버튼을클릭하면 모든 사용자에게 보여주고 싶었기 때문! 우선 작업을 하는건 둘째치고 기본적인 베이스에서 저그림을 좌우로 흔들리게 해줘야함 처음 아이디어는 codepen.io의 제이쿼리로 만들어진 congrats효과에서 영감을 받았다. 그래서 react에서 제이쿼리를 사용할 수 있는지 찾아보다가 방법은 알아냈지만 안에들어있는 플러그인이 너무 옛날거라? 그냥 html파일에서는 사용할 수 있지만 react에 설치해서는 사용할 수가 없더라 후...! 그래서그냥, 직접만들기로했다. https://www.w3schools.com/css/css3_animations.asp CSS Animations W3Schools offers free onlin..

https://developer.mozilla.org/ko/docs/Web/CSS/border border - CSS: Cascading Style Sheets | MDN CSS border 단축 속성은 요소의 테두리를 설정합니다. border-width, border-style, border-color의 값을 설정합니다. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/CSS/border-style border-style - CSS: Cascading Style Sheets | MDN border-style CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다. developer.mozilla.org https://develope..

다른게 아니라 hr태그 넣는데 기본적으로 배경이 있더라 흰색 배경에서는 티가안나지만 hr태그자체가 마진이랑 패딩을 (margin,padding)가지고 있는것 같다. Custom.css hr{ margin-top: 0; margin-bottom: 0; border: 0; border-top: 2px solid rgb(253, 2, 2); } 이런식으로 커스텀이 가능하다 색상부터 여러 속성을 넣어주는게 전부가능! 유용하게 가끔 써보도록하자, Navbar관련해서 경계를 주거나 배경있는곳에서 경계를 줄때 유용해 보인다. 종종 쓸거같음 https://stackoverflow.com/questions/41948516/how-to-set-background-color-on-hr-tag How to set backgr..

별거 아니지만 별거인..? 프로젝트중에 Navbar를 부트스트랩에서 가져와서 사용하고있는데 Navbar를 커스터마이징하려고 하다가 기록해둔다. https://react-bootstrap.github.io/components/navbar/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 이와같이 기본적으로 제공하는 색상이 있다. 근데 이걸 커스터마이징하려면 react-bootstrap에서는 간단한 설정이 필요하다. https://react-bootstrap.github.io/getting-started/introduction React-Bootstrap The most popul..

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position background-position - CSS: Cascading Style Sheets | MDN The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin. developer.mozilla.org 위의 링크에 전부다있다. 부트스랩이나, MUI같은경우는 해당 문서에 더 정확하게 혹은 저거보단 적게 지원하기도 하니까 확인해보면서 위치를 정하자!

https://developer.mozilla.org/ko/docs/Web/CSS/background-size background-size - CSS: Cascading Style Sheets | MDN 배경 이미지로 덮이지 않은 공간은 background-color 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다. developer.mozilla.org 프로젝트 메인페이지 제작하다가 알게된속성, 튜토리얼이나 설명은 MDN문서에 잘 나와있다. 이와같이 특정 div 같은곳에 꽉차게 나타낼것인지 이렇게 한번나오게하고, 좌우 혹은 가운데 배열할지 mui react에 적용하다가 배경 적용하다가 알게되었다. 아래와 같이 배치하고싶어서!! 물론 좌우, 가득차게도 가능하다.

현재 프로젝트 진행중인데 메인페이지에 아무래도 심심해서 애니메이션 효과를 주고싶다. 근데 CSS공부하기엔? 아니 공부는 이미했지만 하나하나 세세하게 효과를 주기엔 너무 시간이 없어서 급한대로 찾아보니 편하게 애니메이션 효과를 줄 수 있는 라이브러리가 있었다. 쉽게 설치해서 사용할 수 있게 라이브러리화 되어있어 기록해본다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 여기 들어오면 사용법도 매우쉽게 되어있다. yarn add aos npm install aos --save 둘중하나 골라서 설치해주고 download받아서 d..