|
|
| (사용자 2명의 중간 판 96개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| == 기능 틀 ==
| | {| class ="wikitable" style="width: 400px; border: 2px solid #003B96; text-align: center; margin: auto;" |
| === 테마(라이트모드/다크모드) 별 이미지 ===
| | | colspan="4" style="text-align: center; color: #fff; background: #003B96;" | <big><big>'''제23대 승상선거 서울특별시'''</big></big> |
| <div class="inline-block dark:hidden">{{{1|라이트모드에서 보입니다!}}}</div><div class="hidden dark:inline-block">{{{2|다크모드에서 보입니다!}}}</div>
| |
| | |
| === 다크모드 전환 토글 ===
| |
| {{test}}
| |
| | |
| == Tailwind CSS 설명 ==
| |
| === 무엇인가? ===
| |
| <div class="max-w-[500px] w-full mx-auto mb-[6px] pb-[6px] bg-sky-500 border-sky-500 border-solid border-2 text-center text-white">{{youtube|--D4WMPEIZI|496px}}'''Tailwind CSS를 설명하는 영상'''</div>
| |
| css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 <code>style=""</code> 사이에 무언가를 쓰는것 대신에 <code>class=""</code>에 적어서 적용할 수 있게 만드는 기능입니다.
| |
| | |
| === 왜 쓰는가? ===
| |
| 코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 <code>style="margin-right: auto; margin-left: auto;"</code>는 <code>class="mx-0"</code>로 짧게 작성할 수 있습니다. 또, 문서의 다크모드 대응도 가능하게 됩니다. 기존 방식에서는 다크모드에 대응할 수 없고, 대응하고자 하면 관리자가 미리 작성해놓은 <code>class="evewiki-dark-txt"</code> 같은걸 써야했지만, 이제는 관리자가 미리 작성했느냐와는 관계 없이 <code>class="dark:text-white"</code>라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.
| |
| | |
| == Tailwind CSS 색상표 ==
| |
| 배경색(background), 테두리 색(border), 글자 색(color) 등 색상을 정할 때 Tailwind CSS에서는 이 색상표의 색을 기본으로 제공합니다. 물론, 검은색(black, #000)과 흰색(white, #fff)는 당연히 포함이죠! 또, 필요하다면 대괄호([,])를 이용해 별도의 색을 지정할 수도 있습니다. 예를 들어, <span class="text-[#00FF00]"><code>text-[#00FF00]</code>처럼 말이죠!</span>
| |
| {| class="wikitable !w-full !border-sky-500 !border-2 !border-solid" style="font-size: 10pt"
| |
| ! class="!bg-sky-500 text-center" | 색상표
| |
| |- | | |- |
| | |
| | | rowspan="2" width="15%" style="text-align: center; background: #eee;" | '''기호''' |
| <div class="mw-customtoggle-Tailwind !bg-transparent text-center"><div style="margin: 2px 0px 3px">'''[ 펼치기 · 접기 ]'''</div></div>
| | | width="35%" style="text-align: center; background |
| <div class="mw-collapsible mw-collapsed !border-transparent" id="mw-customcollapsible-Tailwind">
| |
| <div class="toccolours mw-collapsible-content !bg-transparent !border-transparent">
| |
| <!---->
| |
| <div class="grid grid-cols-[repeat(auto-fit,minmax(8rem,1fr))] gap-x-2 gap-y-4 sm:grid-cols-1">
| |
| <div class="2xl:contents">
| |
| <div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5">
| |
| Slate
| |
| </div>
| |
| <div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(248, 250, 252);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 50
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>f8fafc
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(241, 245, 249);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 100
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>f1f5f9
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(226, 232, 240);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 200
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>e2e8f0
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(203, 213, 225);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 300
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>cbd5e1
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(148, 163, 184);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 400
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>94a3b8
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(100, 116, 139);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 500
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>64748b
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(71, 85, 105);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 600
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>475569
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(51, 65, 85);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 700
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>334155
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(30, 41, 59);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 800
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>1e293b
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(15, 23, 42);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 900
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>0f172a
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(2, 6, 23);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 950
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>020617
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="2xl:contents">
| |
| <div class="text-sm font-semibold text-slate-900 dark:text-slate-200 2xl:col-end-1 2xl:pt-2.5">
| |
| Gray
| |
| </div>
| |
| <div class="grid mt-3 grid-cols-1 sm:grid-cols-11 gap-y-3 gap-x-2 sm:mt-2 2xl:mt-0">
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(249, 250, 251);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 50
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>f9fafb
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(243, 244, 246);">
| |
| </div>
| |
| <div class="px-0.5">
| |
| <div class="w-6 font-medium text-xs text-slate-900 2xl:w-full dark:text-white">
| |
| 100
| |
| </div>
| |
| <div class="text-slate-500 text-xs font-mono lowercase dark:text-slate-400 sm:text-[0.625rem] md:text-xs lg:text-[0.625rem] 2xl:text-xs">
| |
| <nowiki>#</nowiki>f3f4f6
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| <div class="relative flex">
| |
| <div class="flex items-center gap-x-3 w-full sm:block sm:space-y-1.5">
| |
| <div class="h-10 w-10 rounded dark:ring-1 dark:ring-inset dark:ring-white/10 sm:w-full" style="background-color: rgb(229
| |