꿈많은 DEVELOPER

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다.   기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다. 한줄 효과 기존 CSS 방식p { width: 6rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clam..

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..