4강 - 제주맥주 상단바

제주 맥주 사이트 보러가기

제주 맥주 상단 바 구현하기

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

<header class="pc_top_bar bg-black text-white">
    <div class="container mx-auto">
        <div class="flex items-center p-6">
            <div class="flex-1"></div>
            <a href="#" class="logo self-end">
                <img src="https://cdn.imweb.me/thumbnail/20240619/69a7e477083a8.png" alt="">
            </a>
            <div class="flex-1 flex justify-end">
                <nav class="menu_1">
                    <ul class="flex justify-end pb-4">
                        <li><a href="#" class="block">LOGIN</a></li>
                        <li><a href="#" class="block">JOIN</a></li>
                        <li><a href="#" class="block">CART</a></li>
                    </ul>
                    
                    <a href="#">논알콜 제주누보 구매</a>
                    <a href="#">양조장 예약</a>
                </nav>
            </div>
        </div>
        
        <div>
            <nav class="menu_2">
                <ul class="flex justify-center">
                    <li><a href="#" class="block p-4">OUR BEERS</a></li>
                    <li><a href="#" class="block p-4">ONLINE-SHOP</a></li>
                    <li><a href="#" class="block p-4">BREWERY</a></li>
                    <li>
                        <a href="#" class="block p-4">
                            <span class="normal">CLUB NOUVEAU</span>
                            <span class="change">NOTICE</span>
                        </a>
                    </li>
                    <li><a href="#" class="block p-4">OEM/ODM</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<header class="mb_top_bar bg-green-500">모바일탑바</header>

/* 폰트 */
@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: 800px;
}

@media ( min-width: 1200px ) {
    .mb_top_bar {
        display: none;
    }
}

@media ( max-width: 1199px ) {
    .pc_top_bar {
        display: none;
    }
}

.logo {
    width: 217px;
}

.menu_2 > ul > li > a {
    width: 200px;
    text-align: center;
}

.menu_2 > ul > li > a > .change,
.menu_2 > ul > li:nth-child(4) > a:hover > .normal{
    display: none;
}

.menu_2 > ul > li:nth-child(4) > a:hover > .change {
    display: block;
}

정리된 코드 코드펜으로 한 눈에 보기