개요 기획서나 디자인 시안을 보다 보면 정말 흔하게 등장하는 UI가 있다. 바로 긴 텍스트 줄이기다. 보통은 3줄 정도 보여주고, 넘치면 말줄임표(...) 처리를 한다. 여기까지는 CSS의 -webkit-line-clamp 속성만 쓰면 3초 만에 해결된다. 하지만 요구사항이 아래와 같다면 이야기가 달라진다. "3줄 넘어가면 말줄임표 하고, 그 '바로 옆'에 더보기 텍스트 버튼을 넣어주세요. 버튼 누르면 펼쳐지고요." 단순히 ...으로 끝나는 게 아니라, 인터랙션이 가능한 버튼이 텍스트 흐름에 자연스럽게 붙어야 한다. '그냥 position: absolute로 띄우면 되는 거 아닌가?' 싶지만, 막상 해보면 생각보다 까다로운 문제들이 발생한다. 오늘은 이 '더보기' 버튼을 자연스럽게 넣기 위해 삽질했던..

문제 상황styled-component에서 tailwind-css로 마이그레이션을 하기 위해 tailwind-css를 아래와 같이 설치했는데, ▼npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p 아래와 같은 문제가 발생했다. ▼npm error could not determine executable to runnpm error A complete log of this run can be found in: [필자의로그].log 해결문제를 해결하기 위해 구글링을 해본 결과, Reddit에서 해결 방법을 구할 수 있었다. ▼ From the reactjs community on RedditExplore this post and mo..

개요 Styled-Component로 개발을 하던 도중, Tailwind-CSS가 굉장히 좋다는 평을 듣고 간단한 웹사이트에 적용을 해봤다. 조금 더 큰 프로젝트에 적용하기엔 Tailwind-CSS를 잘 몰라서 우선은 전에 작업하던 프로젝트를 타입스크립트로 마이그레이션 할 겸 적용해보면서 Tailwind-CSS를 파악해보기로 했다. 전반적인 특징Tailwind-CSS에 대해 설명하는 글은 이미 너무나도 많다.그럼에도 간단하게 짚고 들어갈 것인데, 너무 뻔한 내용들이 많기에 핵심만 필요한 사람들은 아래의 사용해보면서 느낀 장점으로 넘어가면 된다. Utility First대부분의 특징은 Utilty First로부터 파생된다. Tailwind-CSS의 대부분의 장점과 단점 모두가 Utility First라는..