5강 - 타이어테크, 반응형 배너 리스트

우선 테일윈드 css링크를 가져와야한다.

링크는 가장 중요한 순서로 연결해야한다.
제이쿼리 > 테일윈드 > 다른 링크들
순서를 제대로 연결하지 않으면 오류가 날 수 있으니, 꼭 중요순서를 확인하구 순서대로 연결하자.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">

<section class="section_1">
    <div class="con visible_on_pc flex justify-between mx-auto">
        <img src="	https://www.tire-tech.co.kr/assets/images/main/block3_01.png" alt="">
        <img src="	https://www.tire-tech.co.kr/assets/images/main/block3_02.png" alt="">
        <img src="	https://www.tire-tech.co.kr/assets/images/main/block3_03.png" alt="">
    </div>
    <div class="con visible_on_mb flex justify-between mx-auto gap-5">
        <div class="flex-1">
            <img class="h-full object-cover" src="https://www.tire-tech.co.kr/assets/images/main/block3_01.png" alt="">
        </div>
        <div class="flex-1 flex flex-col gap-5">
            <img src="https://www.tire-tech.co.kr/assets/images/main/m_block3_02.png" alt="">
            <img src="	https://www.tire-tech.co.kr/assets/images/main/block3_03.png" alt="">
        </div>
    </div>

</section>

<!-- 테일윈드에서 flex-1 = flex-grow : 1; -->
<!-- 테일윈드에서 flex-col = flex-column 이다  -->
<!-- 테일윈드에서 h-full : 높이 100% 가 됨 -->
<!-- 테일윈드에서 object-cover = objext-fit : cover; 이다. -->
<!-- 테일윈드에서 mx-auto =  margin:0 auto이다. -->

/* 폰트 */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

html > body {
  font-family: 'Pretendard-Regular';
}

/* lib */
.con {
    width: var(--site-width);
}

.con-min-width {
    min-width: var(--site-width);
}

/* custom */
:root {
    --site-width: 1092px;
}

@media (max-width : 1091px) {
    html > body .visible_on_pc {
        display : none;
    }
}
@media (min-width : 1092px) {
    .visible_on_mb {
        display : none !important; 
    }
}

코드펜으로 정리된 코드 한번에 보러가기