(→af) |
|||
| 3,570번째 줄: | 3,570번째 줄: | ||
|}</div></div> | |}</div></div> | ||
== | == Tailwind CSS 코드 == | ||
=== Padding === | |||
=== margin === | |||
2023년 10월 9일 (월) 23:48 판
기능 틀
테마(라이트모드/다크모드) 별 이미지
다크모드 전환 토글
Tailwind CSS 설명
무엇인가?
Tailwind CSS를 설명하는 영상
css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 style="" 사이에 무언가를 쓰는것 대신에 class=""에 적어서 적용할 수 있게 만드는 기능입니다.
왜 쓰는가?
코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 style="margin-right: auto; margin-left: auto;"는 class="mx-0"로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 class="evewiki-dark-txt" 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 class="dark:text-white"라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.
Tailwind CSS 색상표
배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, text-[#00FF00]처럼 말이죠!
| 색상표 |
|---|
|
[ 펼치기 · 접기 ] Slate 50 #f8fafc 100 #f1f5f9 200 #e2e8f0 300 #cbd5e1 400 #94a3b8 500 #64748b 600 #475569 700 #334155 800 #1e293b 900 #0f172a 950 #020617 Gray 50 #f9fafb 100 #f3f4f6 200 #e5e7eb 300 #d1d5db 400 #9ca3af 500 #6b7280 600 #4b5563 700 #374151 800 #1f2937 900 #111827 950 #030712 Zinc 50 #fafafa 100 #f4f4f5 200 #e4e4e7 300 #d4d4d8 400 #a1a1aa 500 #71717a 600 #52525b 700 #3f3f46 800 #27272a 900 #18181b 950 #09090b Neutral 50 #fafafa 100 #f5f5f5 200 #e5e5e5 300 #d4d4d4 400 #a3a3a3 500 #737373 600 #525252 700 #404040 800 #262626 900 #171717 950 #0a0a0a Stone 50 #fafaf9 100 #f5f5f4 200 #e7e5e4 300 #d6d3d1 400 #a8a29e 500 #78716c 600 #57534e 700 #44403c 800 #292524 900 #1c1917 950 #0c0a09 Red 50 #fef2f2 100 #fee2e2 200 #fecaca 300 #fca5a5 400 #f87171 500 #ef4444 600 #dc2626 700 #b91c1c 800 #991b1b 900 #7f1d1d 950 #450a0a Orange 50 #fff7ed 100 #ffedd5 200 #fed7aa 300 #fdba74 400 #fb923c 500 #f97316 600 #ea580c 700 #c2410c 800 #9a3412 900 #7c2d12 950 #431407 Amber 50 #fffbeb 100 #fef3c7 200 #fde68a 300 #fcd34d 400 #fbbf24 500 #f59e0b 600 #d97706 700 #b45309 800 #92400e 900 #78350f 950 #451a03 Yellow 50 #fefce8 100 #fef9c3 200 #fef08a 300 #fde047 400 #facc15 500 #eab308 600 #ca8a04 700 #a16207 800 #854d0e 900 #713f12 950 #422006 Lime 50 #f7fee7 100 #ecfccb 200 #d9f99d 300 #bef264 400 #a3e635 500 #84cc16 600 #65a30d 700 #4d7c0f 800 #3f6212 900 #365314 950 #1a2e05 Green 50 #f0fdf4 100 #dcfce7 200 #bbf7d0 300 #86efac 400 #4ade80 500 #22c55e 600 #16a34a 700 #15803d 800 #166534 900 #14532d 950 #052e16 Emerald 50 #ecfdf5 100 #d1fae5 200 #a7f3d0 300 #6ee7b7 400 #34d399 500 #10b981 600 #059669 700 #047857 800 #065f46 900 #064e3b 950 #022c22 Teal 50 #f0fdfa 100 #ccfbf1 200 #99f6e4 300 #5eead4 400 #2dd4bf 500 #14b8a6 600 #0d9488 700 #0f766e 800 #115e59 900 #134e4a 950 #042f2e Cyan 50 #ecfeff 100 #cffafe 200 #a5f3fc 300 #67e8f9 400 #22d3ee 500 #06b6d4 600 #0891b2 700 #0e7490 800 #155e75 900 #164e63 950 #083344 Sky 50 #f0f9ff 100 #e0f2fe 200 #bae6fd 300 #7dd3fc 400 #38bdf8 500 #0ea5e9 600 #0284c7 700 #0369a1 800 #075985 900 #0c4a6e 950 #082f49 Blue 50 #eff6ff 100 #dbeafe 200 #bfdbfe 300 #93c5fd 400 #60a5fa 500 #3b82f6 600 #2563eb 700 #1d4ed8 800 #1e40af 900 #1e3a8a 950 #172554 Indigo 50 #eef2ff 100 #e0e7ff 200 #c7d2fe 300 #a5b4fc 400 #818cf8 500 #6366f1 600 #4f46e5 700 #4338ca 800 #3730a3 900 #312e81 950 #1e1b4b Violet 50 #f5f3ff 100 #ede9fe 200 #ddd6fe 300 #c4b5fd 400 #a78bfa 500 #8b5cf6 600 #7c3aed 700 #6d28d9 800 #5b21b6 900 #4c1d95 950 #2e1065 Purple 50 #faf5ff 100 #f3e8ff 200 #e9d5ff 300 #d8b4fe 400 #c084fc 500 #a855f7 600 #9333ea 700 #7e22ce 800 #6b21a8 900 #581c87 950 #3b0764 Fuchsia 50 #fdf4ff 100 #fae8ff 200 #f5d0fe 300 #f0abfc 400 #e879f9 500 #d946ef 600 #c026d3 700 #a21caf 800 #86198f 900 #701a75 950 #4a044e Pink 50 #fdf2f8 100 #fce7f3 200 #fbcfe8 300 #f9a8d4 400 #f472b6 500 #ec4899 600 #db2777 700 #be185d 800 #9d174d 900 #831843 950 #500724 Rose 50 #fff1f2 100 #ffe4e6 200 #fecdd3 300 #fda4af 400 #fb7185 500 #f43f5e 600 #e11d48 700 #be123c 800 #9f1239 900 #881337 950 #4c0519 |