Next.js2 Next에서 svg를 컴포넌트로 사용하기 저번 테오 스플린트에서 처음으로 svg를 사용해봤다. icon을 사용하려면 보통 Font Awesome을 사용했었는데 설치를 해야한다는 단점과 좀더 얇았으면, 빈칸이 채워져있으면, 하는 아쉬운 점이 있어서 이번 블로그 프로젝트에서도 svg를 사용해보기로 했다!! 다만 저번에는 React였는데 이번에는 Next라는 점이 달랐다. 똑같은 줄 알고 저번과 똑같이 적용하려고 했었는데 안됐다..ㅎㅎ 그래서 이번 포스팅에서는 Next에 svg를 컴포넌트처럼 사용하는 방법에 대해 나열해보려고 한다! React에서는 svg를 어떻게 사용할까? 일단 먼저 React에서는 svg를 알아보고 Next와의 차이점을 비교해보는게 좋을 것 같다. 1. image 태그 이용하기 제일 간단한 방법은 image처럼 사용하는 것이다. .. 2023. 12. 28. Next.js 프로젝트에 tailwind css 추가하기 tailwind css와 유틸리티 클래스란? 기존에 CSS 로만 진행하던 프로젝트에서 ui의 통일성과 재사용성을 고려하여 tailwind css를 도입하기로 했다. tailwind css는 클래스로 구성된 유틸리티 중심의 CSS 프레임워크이다. 유틸리티 클래스란 버튼, 모달 등과 같이 무언가를 구성하기 위한 css가 아닌 빨간색 글자 색상, xl 사이즈의 글자 크기 등과 같이 하나의 css에 정의된 속성과 값을 가지는 걸 의미한다. 즉, 유틸리티 우선이라고 하는 것은 사용자가 원하는 각각의 속성값을 적용하여 하나를 만들어내 것이다. tailwind css 장점 HTML 코드 안에 CSS가 있기 때문에 HTML와 CSS 파일을 별도로 관리할 필요가 없다. 클래스명을 고민하지 않아도 된다. 모든 곳에서 동일.. 2023. 12. 26. 이전 1 다음
