< HwanLog />

🤩 React Styled Component를 활용한 컴포넌트 재사용 1. 시작하기에 앞서서 재사용 컴포넌트란 정의가 무엇일까요 ?? 말 그대로 컴포넌트를 다시 사용한다는 개념 이라고 보시면 됩니다. 컴포넌트를 재사용 한다는 것은 ? 1. 중복을 제거해준다. 2. 좀 더 깔끔한 코드 사용이 가능하게 해준다. 위와 같은 장점이 있지만 , 저는 그동안 재사용 컴포넌트를 사용하지 않고 있었습니다. 2. 그동안 나는 어떻게 코드를 짰나 ?? 사실 재사용컴포넌트를 사용해라 ! 라는 말은 블로그나 , 유튜브 영상 등을 통해서 충분히 인지하고 있었지만 , 평소에 제가 짜는 코드는 재사용 컴포넌트를 고려하지 않고 코드를 짜고 있었습니다. 머리속으로 인지는 하고 있지만 , 막상 코드를 짜면 이곳 저곳 중복이 발생하고 ,..

그레디언트 효과 눈으로 쉽게 확인하는 사이트 가끔 혼자 사이트를 만들다 보면 그레디 언트 효과를 사용할 때가 있는데 그럴 때마다 코드 값을 변경하면서 그레디언트 효과를 찾기는 불편하기 때문에 그레디언트 효과를 한눈에 보기 쉽게 만들어 주는 사이트를 소개할까 한다. https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 위 사이트에서 좀더 쉽게 그..

CSS 코드들을 보다보면 간혹 font-size : 62.5%가 적용되어 있는걸 확인할 수 있다. html { font-size: 62.5%; } 62.5%란 무엇인가 ? 대부분 기본 브라우저는 16px 기본값으로 사용한다. font-size : 62.5% , 적용하면 10px로 바뀐다. 10px로 작업하는 이유가 나중에 미디어 쿼리등 반응형 웹을 만들다 보면 웹페이지 크기에 맞춰서 폰트도 바꿔야 하는 경우가 생긴다. 이때 10px로 바뀌어 있으면 rem 단위로 작업할 때 좀 더 수월히 적용할 수 있기때문에 10px로 바꿔서 사용한다.