Next.js에서 TailwindCSS 사용하기
·
프론트엔드/CSS
TailwindCSS는 한 번도 사용해본적이 없는데 최근에 조금 궁금했던 적이 있었다. 언젠가 배워야징~ 하고 있었는데 이번에 Next.js 강의를 들으며 공부를 하는데, 프로젝트 생성 시 초기 세팅을 위해 묻는 질문들 중 TailwindCSS를 사용할건지를 묻더라. 어차피 대충 알기론 어렵다거나 배울 내용이 많다거나 한 건 아닌것 같아서, 기회 삼아서 그냥 한 번 써보기로 했다.ㅎ https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool...
[Styled-Components] 태그에 상관없이 스타일만 공유하는 방법 (as 속성을 통해 재사용성 높이기)
·
프론트엔드/CSS
마이페이지 관심 로그인 메뉴 세 개 중 마이페이지와 관심은 누르면 해당 페이지로 이동하도록 해야 하지만, 로그인은 페이지 이동이 아닌 모달창을 띄워줘야 했다. 따라서 상위 두 개 요소는 Link 태그를 사용하면 되고, 마지막 요소는 p 태그를 사용하면 된다. 그렇지만 세 개의 스타일은 똑같다. 이럴 때 const MenuItem = styled(Link)` color: #666; font-family: Noto Sans; font-size: 0.8rem; font-weight: 400; text-decoration: none; &:not(:last-child) { margin-right: 30px; } `; MenuItem을 이와 같이 작성해주었다면, Link 태그는 사용할 때 to 속성을 쓰지 않으면 ..
해안해
'프론트엔드/CSS' 카테고리의 글 목록