개발 프로젝트를 진행하기 앞서 고려해야 될 것이 있다.바로 CSS Reset(리셋) 과 CSS Normalize(노멀라이즈) 중에서 어떤 것을 선택할 지 이다. ☘️ CSS Reset / Normalize 사용 이유그렇다면 CSS Reset 과 CSS Normalize 는 왜 사용하는 것일까? 브라우저 간 일관성 확보우리가 사용할 수 있는 브라우저는 크롬, 사파리, 엣지, 파이어폭스 등 매우 다양하다.하지만 이러한 브라우저는 자체 기본 스타일을 가지고 있어 브라우저마다 다르게 보일 수 있다는 것이다.그래서 이러한 일관성 확보하고, 브라우저 간 차이를 줄이기 위해 사용한다. ☘️ CSS Reset vs CSS Normalize그렇다면 둘 중에 어떤 것을 사용해야 할까? CSS ResetCSS Reset 은..

예쁜 폰트를 다운로드 받아서 내 React 프로젝트에 적용하는 방법을 알아 볼 것이다. 폰트 다운로드 받기폰트를 다운로드 받을 수 있는 사이트에서 폰트를 다운로드 받는다.나는 예쁜 한글 폰트가 많은 눈누 라는 사이트를 이용하였고, 원하는 폰트를 찾아 다운로드한다. 폰트 설정하기다운로드 받은 폰트를 내 프로젝트에 src/fonts 에 넣어준다.이 폰트들을 적용시키기 위해 @font-face 를 사용한다.@font-face웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있게 함index.css 에서 폰트를 사용할 폰트의 이름을 정의하고, 해당 폰트의 위치를 설정해준다.@font-face { font-family: 'PyeongChang'; /* 사용할 폰트의 이름을 정의 */ src:..

시작하기 앞서...React 에서 CSS 를 사용하여 움직이는 물결 애니메이션을 만들 것이다. 컴포넌트 만들기물결 3개를 만들기 위해 3개의 요소를 만들고,wave 라는 class 를 공통으로 가지면서 서로 다른 스타일링을 위해 각각 -one, -two, -three 를 가진다.import '../App.css'function WaveComponent() { return ( );}export default WaveComponent; CSS 설정물결 애니메이션을 만드는 원리는 아래처럼 생긴 요소를 애니메이션을 적용시키고 일부만 화면에 보여주어 물결이 움직이는 것 처럼 보여준다. wave 스타일요소들이 겹쳐 있기 때문에 postion 을 absolute 로 ..