코딩/수업메모

테일윈드

ponyo118 2026. 3. 25. 17:11

관련 링크

 

🏷️ 챕터 1 : 부트스트랩, 테일윈드 비교

1강

동영상

 

🏷️ 챕터 2 : 테일윈드 JIT

2강

3강

동영상

 

🏷️ 챕터 3 : 테일윈드 식 코딩방법

4강

동영상

 

🏷️ 챕터 4 : 이벤트 메뉴 구현

5강

[hrml]

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex m-[20px] gap-[10px]">
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">진행중인 이벤트</button>
  <button class="hover:bg-black bg-black p-[8px_15px_5px_15px] rounded-[25px] text-white hover:text-white">전체</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">Big이벤트</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">기획전</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">사전 혜택</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">수강</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">매거진</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">당첨자</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">기타</button>
</div>

 

[css]

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family: "GmarketSansMedium";
}

🏷️ 챕터 5 : 반응형 상품리스트 구현

6강

[html]

<script src="https://cdn.tailwindcss.com"></script>
<!-- mx:margin x축 -->
<div class="container mx-auto bg-red-500">
  <!--   cols: column -->
  <!--   sm:
@media (min-width: 640px) { ... }
md:
@media (min-width: 768px) { ... }
lg:
@media (min-width: 1024px) { ... }
xl:
@media (min-width: 1280px) { ... }
2xl:
@media (min-width: 1536px) { ... } -->
  <ul clss="grid grid-cols-1 md:grid-cols-2 xl-grid-cols-3 gap-[20px]">
    <li>
      <a href="#">
<!--         aspect 비율 -->
        <img class="aspect-[386/221] object-cover w-full" src="https://picsum.photos/id/237/752/442" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="aspect-[386/221] object-cover w-full" src="https://picsum.photos/id/231/802/442" alt="">
      </a>
    </li>
    <li>
      <a href="#">
        <img class="aspect-[386/221] object-cover w-full" src="https://picsum.photos/id/100/752/302" alt="">
      </a>
    </li>
  </ul>
</div>

 

[css]

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family: "GmarketSansMedium";
}

 

7강

[html]

<!-- 모바일기기에서 축소 금지 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.tailwindcss.com"></script>

<div class="container mx-auto px-[10px]">
  <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-[20px]">
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/237/752/442" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          댓글만 남겨도 클래스 0원 당첨 기회!
        </div>
        <div class="flex gap-2 text-xs">
          <div class="text-[#fd3049]">D-12</div>
          <div class="text-gray-400">22.05.26 (목)~22.06.07 (화)</div>
        </div>
      </a>
    </li>
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/231/802/442" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          취향저격 클래스 추천받으면 시원한 커피가!
        </div>
        <div class="flex gap-2 text-xs">
          <div class="text-[#fd3049]">D-5</div>
          <div class="text-gray-400">22.05.26 (목)~22.05.31 (화)</div>
        </div>
      </a>
    </li>
    <li class="group">
      <a href="#">
        <img class="aspect-[376/221] object-cover w-full" src="https://picsum.photos/id/100/752/302" alt="">
      </a>

      <a href="#" class="flex flex-col gap-1 mt-3 group-hover:underline">
        <div class="text-xs font-bold">
          BIG이벤트
        </div>
        <div class="text-gray-500">
          최대 20만원 랜덤쿠폰을 받아요!
        </div>
        <div class="text-xs">
          <div class="text-[#2897FB]">상시이벤트</div>
        </div>
      </a>
    </li>
  </ul>
</div>

동영상

🏷️ 챕터 6 : 호버효과

8강

9강

10강

[html]

<script src="https://cdn.tailwindcss.com"></script>

<div class="group">
  <a href="#" class="img-box block relative overflow-hidden before:content-[''] before:absolute before:inset-0 before:bg-[rgba(0,0,0,0)] hover:before:bg-[rgba(0,0,0,.8)] before:transition before:duration-200">
    <img class="relative -z-50 group-hover:scale-150 duration-200" src="https://picsum.photos/id/231/500/500" alt="">
  </a>
</div>

 

[css]

@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family: "GmarketSansMedium";
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

11강

번외

동영상

'코딩 > 수업메모' 카테고리의 다른 글

SASS/SCSS  (0) 2026.03.20
SCSS(SASS) 기초  (0) 2026.03.19
Git, GitHub 기초  (0) 2026.03.18
깃 명령어 정리  (0) 2026.03.18
HTML, CSS, JS 활용 - 27 ~ 29강  (0) 2026.03.17

'코딩/수업메모'의 다른글

  • 현재글테일윈드

관련글

티스토리툴바