Per ardua ad astra.

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

daisyUI 테마 설정하기 들어가며테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다. 방법테마 고르기dasiyUI의 공식 문서에서 원하는 테마를 선택한다. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com 이 페이지에서는 드라큘라 테마(@dracula@)를 선택했다고 가정한다. 테일윈드 CSS 설정 파일에 추가하기테일윈드 CSS 설정 파일인 @tailwind.config.js@ 파일에 아래의 테마 속성을 추가해준다../tailwind.config.js/** @type {import('tailwind..

Tailwind CSS들어가며테일윈드(Tailwind) CSS에 대해 정리해본다. Tailwind CSS개념유틸리티 우선 CSS 프레임워크미리 정의된 CSS 클래스를 사용하여 빠르게 사용자 인터페이스를 구축할 수 있도록 도와준다.전통적인 CSS 프레임워크와 달리, 구성 요소를 만들기 위한 완성된 스타일이 아니라, 각 스타일 속성에 대한 클래스(유틸리티 클래스)를 제공한다.개발자는 자신의 디자인에 맞게 클래스를 조합하여 원하는 스타일을 쉽게 적용할 수 있다. 특징 다양한 스타일 속성을 제어할 수 있는 클래스를 제공한다.예) @bg-blue-500@ : 배경색을 파란색으로 설정CSS의 재사용성과 모듈화를 강조한다.클래스 이름이 의미를 가지므로, 다른 프로젝트에서도 쉽게 이해하고 사용할 수 있다.반응형 디자인..

whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자.  @whitespace-pre-wrap@Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효..