Per ardua ad astra.

sr-only 클래스들어가며테일윈드(Tailwind) CSS에서 사용할 수 있는 @sr-only@ 클래스에 대해 정리해본다. sr-only 클래스개념시각장애인을 위한 스크린 리더(Screen Reader) 전용 클래스이 클래스를 사용하면 해당 요소가 화면에는 보이지 않지만, 스크린 리더를 사용하는 사용자에게는 읽힐 수 있도록 설정된다.시각장애인이 페이지를 탐색할 때 추가적인 정보를 제공할 수 있다. 사용하는 경우의미를 명확히 하기 위해 보조 텍스트를 추가할 때예를 들어, 아이콘 버튼에 추가 설명을 덧붙일 때접근성을 개선하기 위해 추가적인 텍스트가 필요하지만, 일반 사용자에게는 불필요한 정보를 숨기고 싶을 때 사용 예제 Settings CSS 스타일.sr-only { position: absolut..

shadcn/ui들어가며간단하게 복사 & 붙여넣기로 사용할 수 있는 shadcn/ui에 대해 정리해본다. shadcn/ui개념다양한 웹 애플리케이션 개발에 사용할 수 있는 접근 가능하고 커스터마이즈 가능한 UI 컴포넌트 모음일반적인 라이브러리와는 다르게 npm 패키지로 설치하는 대신, 사용자가 필요한 컴포넌트를 복사해서 직접 프로젝트에 붙여넣는 방식으로 사용한다.불필요한 의존성을 피할 수 있고, 자신만의 커스텀 컴포넌트 라이브러리를 구축할 수 있다.리액트(React.js)를 기반으로 작성되었고, Tailwind CSS 및 Radix UI와 같은 오픈 소스 기술들을 적극적으로 활용하여 만들어졌다.Next.js와 같은 프레임워크와 잘 통합되도록 설계되었다.MIT 라이센스로 공개되어 있어 누구나 자유롭게 수정..

테일윈드 설정 파일(tailwind.config.js)에서 플러그인(Plugin) 추가할 때 "'require' is not defined" 오류가 뜰 때 해결법들어가며테일윈드 설정 파일(@tailwind.config.js@)에서 @require@를 이용하여 플러그인(Plugin)을 추가할 때, @'require' is not defined@ 오류가 발생할 때 해결하는 방법을 정리해본다.  방법간단하다. 프로젝트 최상단 경로에 있는 ESLint 설정 파일(@eslint.config.js@)에 다음과 같이 환경 변수(@env@) 조건을 추가해주면 된다. ./eslint.config.js{ // ... env: { browser: true, node: true, // 추..

daisyUI들어가며테일윈드 CSS의 확장 UI 라이브러리인 dasiyUI에 대해 정리해본다. daisyUI개념테일윈드 CSS를 확장한 UI 라이브러리다양한 기본 스타일을 제공하여 빠르게 UI를 구성할 수 있도록 도와준다.테일윈드 CSS의 유틸리티 클래스와 함께 사용된다.버튼, 카드, 모달, 알림, 폼 요소 등 여러 가지 컴포넌트 스타일을 미리 정의해 둔 상태로 제공한다.daisyUI를 이용하면 UI를 쉽게 커스터마이징하고, 일관성 있는 디자인을 유지하면서 빠르게 개발할 수 있다. 특징테일윈드 CSS와 완벽하게 호환되며, 추가적인 스타일링 없이 유틸리티 클래스를 사용할 수 있다.일관된 디자인 시스템을 기반으로 하기 때문에, 프로젝트 전반에 걸쳐 일관된 UI를 유지할 수 있다.버튼, 알림, 모달, 카드 등..

자주 사용되는 테일윈드 CSS 클래스 정리들어가며테일윈드(Tailwind) CSS에서 자주 사용되는  클래스들을 정리해본다. 자주 사용되는 클래스들레이아웃(Layout)container: 반응형 컨테이너를 설정mx-auto: 수평 중앙 정렬flex: Flexbox 컨테이너 생성grid: 그리드 레이아웃 설정space-x-*: 자식 요소 간의 가로 간격 설정 (수평)space-y-*: 자식 요소 간의 세로 간격 설정 (수직) 정렬(Alignment)text-center: 텍스트를 중앙 정렬items-center: Flexbox 또는 Grid에서 요소를 수직 중앙 정렬justify-center: Flexbox 또는 Grid에서 요소를 수평 중앙 정렬 간격(Spacing)p-*: 전체 패딩 적용px-*: 좌우..