Programming/Tailwind CSS
-
- [Tailwind CSS] 자주 사용되는 테일윈드 CSS 클래스 정리
자주 사용되는 테일윈드 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-*: 좌우..
2024.09.27 -
- [Tailwind CSS] Tailwind CSS
Tailwind CSS들어가며테일윈드(Tailwind) CSS에 대해 정리해본다. Tailwind CSS개념유틸리티 우선 CSS 프레임워크미리 정의된 CSS 클래스를 사용하여 빠르게 사용자 인터페이스를 구축할 수 있도록 도와준다.전통적인 CSS 프레임워크와 달리, 구성 요소를 만들기 위한 완성된 스타일이 아니라, 각 스타일 속성에 대한 클래스(유틸리티 클래스)를 제공한다.개발자는 자신의 디자인에 맞게 클래스를 조합하여 원하는 스타일을 쉽게 적용할 수 있다. 특징 다양한 스타일 속성을 제어할 수 있는 클래스를 제공한다.예) @bg-blue-500@ : 배경색을 파란색으로 설정CSS의 재사용성과 모듈화를 강조한다.클래스 이름이 의미를 가지므로, 다른 프로젝트에서도 쉽게 이해하고 사용할 수 있다.반응형 디자인..
2024.09.27 -
- [Tailwind CSS] whitespace-pre-wrap 클래스
whitespace-pre-wrap 클래스들어가며테일윈드(Tailwind) CSS의 @whitespace-pre-wrap@ 클래스에 대해 알아보자. @whitespace-pre-wrap@Tailwind CSS에서 사용하는 유틸리티 클래스 중 하나로, HTML 요소 내의 텍스트를 처리하는 방법을 지정한다.이 클래스를 사용하면 텍스트를 다음과 같이 처리할 수 있다. 공백 유지텍스트 내의 연속된 공백을 유지한다.여러 개의 공백이 있어도 하나로 축약되지 않는다. 강제 줄바꿈텍스트 내의 줄바꿈 문자를 유지한다.텍스트에 포함된 줄바꿈(@\n@)은 실제로 줄바꿈이 된다. 자동 줄바꿈텍스트가 요소의 너비를 초과하면 자동으로 줄이 바뀐다.이 클래스는 @white-space: pre-wrap;@ CSS 속성과 동일한 효..
2024.06.02