클라이밍하는 개발자

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

TAILWIND 1

테일윈드 css(tailwindcss)의 유틸리티 클래스

유틸리티 클래스의 기본 구조대부분의 유틸리티 클래스는 다음과 같은 패턴을 따릅니다.{CSS 속성}-{값} 또는 {약어}-{방향}-{크기}예시 1: text-center -> text-align: center; 를 의미합니다.예시 2: pt-4 -> p(padding) + t(top) + 4(미리 정의된 크기) = padding-top: 1rem; (기본 설정 기준)또한, 모든 유틸리티 앞에는 상태나 반응형을 제어하는 접두사(Prefix)를 붙일 수 있습니다.반응형: md:pt-4 (medium 사이즈 화면 이상일 때 pt-4 적용)상태: hover:bg-blue-500 (마우스를 올렸을 때 배경색 변경)다크 모드: dark:text-white (다크 모드일 때 텍스트 색상을 흰색으로 변경)주요 유틸리티 ..

코딩공부/TailwindCss 2025.08.05
이전
1
다음
더보기
프로필사진

클라이밍하는 개발자

  • 코딩 (581) N
    • 1일 1CS(Computer Science) (163) N
    • 문제해결 (5) N
    • Docker (5)
    • 1일 1네트워크 (45)
      • 제 1장: 네트워크의 기초 (11)
      • 제 2장: 네트워크 모델 (2)
      • 제 3장: IP주소 (5)
      • 제 4장: 제4장: 데이터 링크와 네트워크 계층 .. (5)
      • 제 5장: 트랜스포트층의 프로토콜 (3)
      • 제 6장: 애플리케이션 계층 프로토콜 (11)
      • 제 7장: 라우팅의 기초 (3)
      • 제 8장: 네트워크 보안 (3)
    • 1달 1독후감 (12)
    • Computer Science (CS) (8)
    • 입사후 공부한 내용 (9)
    • 코딩공부 (148)
      • Next.js (5)
      • 개발지식 (62)
      • Node.js (16)
      • Nest.js (4)
      • Java Script (5)
      • Type Script (1)
      • DB (5)
      • SQL (4)
      • 파이썬 (8)
      • GIT (2)
      • 공부지식 (8)
      • 컴퓨터구조 (8)
      • 운영체제 (6)
      • 네트워크 (1)
      • 리눅스 (1)
      • 상태관리 Zustand (2)
      • MCP (2)
      • TailwindCss (1)
    • 프로그래머스 문제풀이 (13)
    • 기초코드 (12)
    • 내일배움캠프 (12)
    • 클라이밍 (2)
    • 일기 (140)
      • 개발일기 (12)
      • TIL (94)
      • WIL(Sun) (17)
      • 에러일기 (12)
      • 면접일기 (0)
      • 포트폴리오 (0)
      • 기타 (2)

Tag

db, CS, 내일배움캠프, 백엔드, 스파르타코딩클럽, 프로세스, 네트워크, 매일메일, 인증, 독후감, react, 비동기, HTTP, IP, 운영체제, 프론트엔드, tcp, docker, Next.js, jwt,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2026/02   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • Real Story

티스토리툴바