css

이번에 구현해 볼 것은 한글 타이핑 효과이다. 영어라면 글자 타이핑 효과를 css 애니메이션과 키프레임을 통해 나타낼 수도 있지만... 한글의 경우 타이핑 할 때 자음 모음 이런 게 조합되어서 나오다 보니 조금 부자연스럽다. (다음에는 css와 키프레임을 통해 표현하는 방법도 포스팅해 보겠다..) 그래서 조금 찾아보니 한글 타이핑을 구현한 라이브러리가 있었다. 자바스크립트로 되어있었고, 이걸 리액트에서 사용하기 위해서 useEffect를 활용해 코드를 완성해 보도록 하겠다. 아래의 사이트가 제작자의 사이트이다.https://sduck4.github.io/type-hangul/ type-hangul: ⌨️ 한글 타이핑 효과 라이브러리한글 두벌식 자판에서 한 글자씩 타이핑되는 과정을 보여줄 수 있는 라이브러..

리액트 프로젝트를 시작하기 앞서 디자인을 편하게 하기 위해 CSS 프레임워크를 사용하기로 했다. 그래서 가장 많이 사용하는 tailwind를 선택해서 개발해 보기로 했다.1. Tailwindtailwind는 아래처럼 classname(react의 경우 class가 아닌 className으로 해줘야 한다.)에 스타일을 입력하면 바로 css가 적용되는 녀석이다. 처음에는 tailwind만 적용해서 코드를 짜보려고 했는데 하다보니 classname 길이가 엄청 길어져서 가독성이 많이 떨어졌다. 그래서 찾아보니 리액트는 보통 styled-componets를 이용해서 주로 css를 짠다고 하는데... 지금이라도 바꿔야 하나 생각했지만, 조금 더 찾아보니 twin macro를 사용하면 Tailwind와 styled..