블로그 포스트 제목이나 링크가 너무 길어서 페이지를 어지럽히는 문제가 있으셨던 경험 없으신가요?이럴 때 Tailwind CSS의 overflow-hidden, text-ellipsis, whitespace-nowrap를 사용하면, 긴 텍스트를 한 줄로 깔끔하게 정리하고 "..."으로 표시할 수 있습니다. https://dietisdie.tistory.com/?tasdfyasdfpe=poasdfst&returasdfnURdsfaL=%2Fmasdfanageasdf%2Fposts%2F이렇게 속성을 적용할 경우https://dietisdie.tistory.com/... 이렇게 표시됩니다.1. overflow-hidden내용이 부모 컨테이너의 크기를 넘으면 숨기기 위한 클래스입니다.텍스트가 너무 길어도 화면 밖..

약 3개월간 진행된 Componique 프로젝트는 웅진씽크빅이 주최하는 청년일경험사업의 일환으로, 총 3개의 기업이 참여한 프로젝트입니다. 저희는 그 중 붐코커뮤니케이션이라는 기업과 협력하여 프로젝트를 진행했습니다.Componique 프로젝트 소개저희 팀 POTEN이 개발한 Componique는 웹사이트와 애플리케이션 제작 시 유용하게 사용할 수 있는 UI 컴포넌트 라이브러리입니다. 이 프로젝트는 UI 컴포넌트를 제공함으로써 사용자가 웹 디자인을 보다 쉽고 빠르게 구현할 수 있도록 돕는 것을 목표로 했습니다.Componique의 주요 특징은 사용자 맞춤형 페이지 제작에 중점을 두었다는 점입니다.저희 팀은 다양한 UI 컴포넌트를 커스터마이징할 수 있는 기능을 통해 더 나은 사용자 경험(UX)을 제공하고자 ..

오늘은 리액트에서 컴포넌트에 CSS 스타일을 어떻게 지정하는지 배워볼 거예요. 여러 가지 방법이 있으니, 하나씩 차근차근 알아보도록 해요.인라인 스타일(Inline Style)인라인 스타일은 HTML 태그에 직접 스타일을 지정하는 방법이에요. 리액트에서는 style 속성을 객체 형식으로 작성해요. 예를 들어볼까요?const App = () => { return ( Hello World! );};export default App;여기서 스타일은 직접 h1 태그에 지정되었어요. 이렇게 하면 다른 파일을 만들 필요 없이 간단히 스타일을 지정할 수 있어요. 외부 스타일(External Stylesheet)외부 스타일은 별도의 CSS 파일을 만들어서 사용하는 방..