|
|
| (사용자 2명의 중간 판 86개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| == 기능 틀 ==
| | <html> |
| === 테마(라이트모드/다크모드) 별 이미지 ===
| | <style> |
| <div class="inline-block dark:hidden">{{{1|라이트모드에서 보입니다!}}}</div><div class="hidden dark:inline-block">{{{2|다크모드에서 보입니다!}}}</div>
| | .live-recent-wrapper:before { |
| | | content: ""; |
| === 다크모드 전환 토글 ===
| | background: url('/w/images/4/4b/Advertise_02.gif'); |
| {{test}}
| | background-size: cover; |
| | | width: 318px; |
| == Tailwind CSS 설명 ==
| | height: 93.5px; |
| === 무엇인가? ===
| | display: block; |
| <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>
| | margin-bottom: 1rem; |
| css 파일 대신 html에 코드를 쓰는 걸로 대신할 수 있는 CSS 프레임워크 라고는 하지만 이해 못하시죠? 간단히 말하자면 <code>style=""</code> 사이에 무언가를 쓰는것 대신에 <code>class=""</code>에 적어서 적용할 수 있게 만드는 기능입니다.
| | box-shadow: 0px 4px 20px rgba(0, 0, 0, .05); |
| | | border-radius: .5rem; |
| === 왜 쓰는가? ===
| | } |
| 코드를 짜는 시간이 짧아집니다. 대표적으로 틀을 가운데 두기 위해 많이 쓰는 <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>라고 작성하여 다크모드에서 글자를 흰색으로 보이게 할 수 있습니다.
| | .liberty-sidebar img { |
| | display: none; |
| | } |
| | .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper { |
| | box-shadow: none; |
| | } |
| | .Liberty .content-wrapper .liberty-sidebar .live-recent-wrapper .live-recent { |
| | box-shadow: 0px 4px 20px rgba(0, 0, 0, .05); |
| | } |
| | </style> |
| | </html> |