JQ 40 ~ 43강 개념 - 제이쿼리

40강 - 탭메뉴 구현, 헤더 작업

문제

문제 - 탭메뉴 구현, 헤더 작업

문제 - 정답예시

문제 - 정답

[HTML]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.2/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<section class="section section-1">
  <div class="container mx-auto">
    <div class="box-1">
      <div class="box-1__head border-b border-black">
        <ul class="flex">
          <li class="active">
            <a class="block p-5 font-bold cursor-pointer">
              아이템 1
            </a>
          </li>
          <li>
            <a class="block p-5 font-bold cursor-pointer">
              아이템 2
            </a>
          </li>
        </ul>
      </div>
      <div class="box-1__main">
        <ul>
          <li class="active">
            아이템 1 내용
          </li>
          <li>
            아이템 2 내용
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

 

[CSS]

.box-1 {
  background-color:#dfdfdf;
}

.box-1__head > ul > li > a {
  border:1px solid transparent;
  margin-bottom:-1px;
}

.box-1__head > ul > li.active > a {
  border:1px solid black;
  border-bottom-color:#dfdfdf;
}

.box-1__head > ul > li:first-child > a {
  border-left-color:transparent;
}

.box-1__main > ul > li {
  display:none;
}

.box-1__main > ul > li.active {
  display:block;
}

 

[JS]

function Box1__init() {
  $('.box-1__head > ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.active').removeClass('active');
    
    $this.addClass('active');
  });
}

Box1__init();

 

동영상

2603, JS, jQuery, 탭메뉴 구현, 헤더 작업

 

41강 - 탭메뉴 구현, 바디 작업

문제

문제 - 탭메뉴 구현, 바디 작업

문제 - 정답예시

[HTML]

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.2/tailwind.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<section class="section section-1">
  <div class="container mx-auto">
    <div class="box-1">
      <div class="box-1__head border-b border-black">
        <ul class="flex">
          <li class="active">
            <a class="block p-5 font-bold cursor-pointer">
              아이템 1
            </a>
          </li>
          <li>
            <a class="block p-5 font-bold cursor-pointer">
              아이템 2
            </a>
          </li>
        </ul>
      </div>
      <div class="box-1__main">
        <ul>
          <li class="active">
            아이템 1 내용
          </li>
          <li>
            아이템 2 내용
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>

 

[CSS]

.box-1 {
  background-color:#dfdfdf;
}

.box-1__head > ul > li > a {
  border:1px solid transparent;
  margin-bottom:-1px;
}

.box-1__head > ul > li.active > a {
  border:1px solid black;
  border-bottom-color:#dfdfdf;
}

.box-1__head > ul > li:first-child > a {
  border-left-color:transparent;
}

.box-1__main > ul > li {
  display:none;
}

.box-1__main > ul > li.active {
  display:block;
}

 

[JS]

function Box1__init() {
  $('.box-1__head > ul > li').click(function() {
    // 클릭당한 녀석
    let $this = $(this);
    // 클릭당한 녀석의 형제번호(0 부터 시작)
    let thisIndex = $this.index();
    
    // 클릭당한 녀석의 형제 중에서 활성화된 녀석 제거
    $this.siblings('.active').removeClass('active');
    // 클릭당한 녀석이 active를 갖는다.
    $this.addClass('active');
    
    // 공통 조상까지 올라간다.
    // v1
    /*
    let $box1 = $this.parent().parent().parent();
    let $box1Main = $box1.find(' > .box-1__main');
    */
    // v2
    /*
    let $box1Main = $this.parent().parent().next();
    */
    // v3
    let $box1 = $this.closest('.box-1');
    let $box1Main = $box1.find('.box-1__main');
    
    $box1Main.find(' > ul > li.active').removeClass('active');
    $box1Main.find(' > ul > li').eq(thisIndex).addClass('active');
  });
}

Box1__init();

동영상

2603, JS, jQuery, 탭메뉴 구현, 바디 작업

 

42강 - 반응형 모바일메뉴1 구현, 작업 1, 탑바와 모바일 탑바가 스위치

문제

문제 - 반응형 모바일메뉴1 구현, 작업 1, 탑바와 모바일 탑바가 스위치

문제 - 정답예시

문제 - 정답, 단계 1

문제 - 정답, 단계 2

 

[HTML]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.4/tailwind.min.css">
<!-- 테일윈드 치트시트 : https://nerdcave.com/tailwind-cheat-sheet -->

<header class="top-bar visible-on-md-up">탑바</header>
<header class="mobile-top-bar visible-on-sm-down">모바일 탑바</header>

<!-- 폰트 -->
<style>
  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 300;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
  }

  html>body {
    font-family: 'LotteMartDream', sans-serif;
  }
</style>

 

[CSS]

.visible-on-md-up {
  display: none;
}

.visible-on-sm-down {
  display: none;
}

/* 768px 이상에서만 보임 */
@media (min-width: 768px) {
  .visible-on-md-up {
    display: block; /* 또는 inline-block, flex 등 원하는 표시 */
  }
}

/* 767px 이하에서만 보임 */
@media (max-width: 767px) {
  .visible-on-sm-down {
    display: block;
  }
}

동영상

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 1, 탑바와 모바일 탑바가 스위치

 

43강 - 반응형 모바일메뉴1 구현, 작업 2, 탑바와, 모바일 탑바 구현

문제

문제 - 반응형 모바일메뉴1 구현, 작업 2, 탑바와, 모바일 탑바 구현

cdnjs - font-awesome

폰트어썸 - 아이콘

폰트어썸 - 아이콘, 모든 카테고리

폰트어썸 - 아이콘, 모든 무료아이콘

폰트어썸 - 코드펜

문제 - 정답예시

문제 - 정답, 단계 1

문제 - 정답, 단계 2

문제 - 정답 2(only css)

[HTML]

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" defer></script>

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->

<!-- 테일윈드 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.4/tailwind.min.css">
<!-- 테일윈드 치트시트 : https://nerdcave.com/tailwind-cheat-sheet -->

<header class="top-bar hidden md:block h-12 fixed inset-0 bottom-auto bg-gray-500 text-white">
  <div class="container mx-auto h-full flex">
    <a href="#" class="top-bar__logo flex items-center ml-3">
      <span><i class="far fa-lemon"></i></span>
      &nbsp;
      <span class="font-bold">DESIGN LEMON</span>
    </a>

    <div class="flex-grow"></div>

    <nav class="top-bar__menu-box-1">
      <ul class="flex h-full">
        <li class="hover:bg-white hover:text-gray-500">
          <a href="#" class="h-full flex items-center px-4">
            <span><i class="fas fa-home"></i></span>
            &nbsp;
            <span class="font-bold">HOME</span>
          </a>
        </li>
        <li class="hover:bg-white hover:text-gray-500">
          <a href="#" class="h-full flex items-center px-4">
            <span><i class="fas fa-id-card"></i></span>
            &nbsp;
            <span class="font-bold">ABOUT ME</span>
          </a>
        </li>
        <li class="hover:bg-white hover:text-gray-500">
          <a href="#" class="h-full flex items-center px-4">
            <span><i class="fas fa-newspaper"></i></span>
            &nbsp;
            <span class="font-bold">ARTICLES</span>
          </a>
        </li>
        <li class="hover:bg-white hover:text-gray-500">
          <a href="#" class="h-full flex items-center px-4">
            <span><i class="fas fa-people-arrows"></i></span>
            &nbsp;
            <span class="font-bold">SNS</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>
<header class="mobile-top-bar fixed md:hidden fixed inset-0 bottom-auto h-12 bg-gray-500 text-white">
  <div class="container mx-auto h-full flex">
    <div class="flex-1"></div>
    <a href="#" class="mobile-top-bar__logo flex items-center">
      <span><i class="far fa-lemon"></i></span>
      &nbsp;
      <span class="font-bold">DESIGN LEMON</span>
    </a>
    <div class="flex-1 flex justify-end">
      <span class="mobile-top-bar__btn-show-side-bar flex items-center mr-3">
        <i class="fas fa-bars"></i>
      </span>
    </div>
  </div>
</header>

<div class="h-12"></div>

<section class="section-1">
  <div class="container mx-auto">
    <div class="mx-3">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati eius aperiam debitis sed maiores, odit quisquam consequuntur numquam voluptates. Corrupti, totam temporibus tenetur quo autem expedita sapiente officiis non pariatur!
      Ipsa accusantium, magnam unde sapiente nihil ab eum blanditiis laboriosam optio, reprehenderit suscipit officiis beatae commodi rem ducimus magni atque cupiditate necessitatibus dignissimos expedita obcaecati dolores. Rem voluptatum dolore deleniti.
      Dolores laboriosam, blanditiis unde quas voluptates facere, incidunt explicabo illum adipisci nam ea accusamus delectus ipsam qui soluta nemo sapiente ab natus aliquam ducimus dolorum possimus? Officiis quasi fuga laudantium!
      Quos cupiditate, voluptatum officia consequatur nobis dolorum omnis non nesciunt architecto harum aspernatur, rerum, inventore quae iste repudiandae consequuntur quaerat similique explicabo. Fugit maiores unde, rerum ab sint temporibus! At.
      Nesciunt repellendus corrupti rerum in laudantium maxime nostrum officia mollitia nam consequatur sit voluptate cumque architecto impedit neque, illo voluptatem quo repudiandae dolor maiores? Perferendis similique minima sapiente molestias quaerat.
    </div>
  </div>
</section>

<!-- 폰트 -->
<style>
  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 300;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
  }

  html>body {
    font-family: 'LotteMartDream', sans-serif;
  }
</style>

 

[CSS]

body {
  min-height:500vh;
  background-image:linear-gradient(to bottom, #787878, #afafaf);
  color:white;
}
[HTML]- only css

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!-- 폰트어썸 FREE 아이콘 리스트 : https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free -->

<header class="top-bar pc-top-bar">
  <div class="container">
    <div>
      <a href="#" class="top-bar__logo">
        <span><i class="far fa-lemon"></i></span>
        &nbsp;
        <span class="top-bar__logo-text">DESIGN LEMON</span>
      </a>
    </div>
    <div class="top-bar__grow"></div>
    <nav class="top-bar__menu-box-1">
      <ul>
        <li>
          <a href="#">
            <span><i class="fas fa-home"></i></span>
            <span>HOME</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><i class="fas fa-id-card"></i></span>
            <span>ABOUT ME</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><i class="fas fa-newspaper"></i></span>
            <span>ARTICLE</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><i class="fas fa-people-arrows"></i></span>
            <span>SNS</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<header class="top-bar mobile-top-bar">
  <div class="container">
    <div class="top-bar__grow"></div>
    <div>
      <a href="#" class="top-bar__logo">
        <span><i class="far fa-lemon"></i></span>
        &nbsp;
        <span class="top-bar__logo-text">DESIGN LEMON</span>
      </a>
    </div>
    <div class="mobile-side-bar-wrap top-bar__grow">
      <div class="mobile-side-bar__btn">
        <span>
          <i class="fas fa-bars"></i>
        </span>
      </div>
      
      <div class="mobile-side-bar"></div>
    </div>
  </div>
</header>

<section class="sec-01">
  <div class="con">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, aut eius quam incidunt, itaque hic quia magnam porro aliquid totam necessitatibus vel suscipit debitis ex asperiores. Magnam impedit minus a.
    Exercitationem dignissimos quos sit asperiores ea eos ullam delectus hic natus illo molestias nemo enim fugit numquam adipisci quod dolorem fuga excepturi, maxime quis at quia! Eligendi earum ab officia.
    Non, fugit molestias rerum iste numquam similique sint illo delectus enim magni accusamus at eligendi exercitationem quidem tempore adipisci, ipsa minima neque dolores eveniet? Repudiandae explicabo similique quia ratione nemo!
    Nulla suscipit laboriosam quae voluptas sed, adipisci facilis, illum pariatur perferendis voluptate officia voluptatum earum aliquam minima cumque. Iusto sed nihil fugiat dignissimos quod consectetur facere? Mollitia fuga nihil distinctio!
    Aliquam vel nemo repellat animi quod, sunt ipsa veritatis velit quasi voluptatum perspiciatis incidunt eius. Voluptatem necessitatibus quam nihil iste exercitationem magni eum, veritatis modi, et doloremque minima quas voluptates.
    Magnam possimus dolorum reiciendis sed nobis ipsam, laudantium numquam alias modi! Quas dolorem ducimus quasi impedit, blanditiis quia ipsum natus accusamus inventore unde dolores mollitia laborum debitis nobis ratione accusantium.
    Excepturi exercitationem accusantium ex repellat quos, suscipit tempore vel, iusto quis totam autem illo, temporibus ullam pariatur deleniti accusamus at nemo sequi? Quibusdam doloribus maxime necessitatibus eligendi veniam numquam nam?
    Distinctio fuga incidunt debitis nesciunt magnam, facere laborum atque inventore illo repellat necessitatibus sunt? Accusamus beatae laborum suscipit hic facilis, quam porro delectus consectetur nemo incidunt? Velit aliquid temporibus consequatur.
    Voluptatibus expedita tenetur officia dignissimos dolore blanditiis tempora animi praesentium beatae reprehenderit et enim ad ipsum ullam quaerat optio quas, repellendus impedit facere! Sunt aliquid pariatur totam soluta, perspiciatis distinctio.
    Qui ducimus natus beatae? Ipsa, earum. Illum laudantium repellendus dignissimos, natus nihil ea aut, quasi amet veniam, voluptatem veritatis debitis? Odit harum facere earum nihil debitis eaque provident deleniti itaque.
    Voluptate fugit assumenda accusantium deleniti, aliquid doloribus saepe possimus nihil voluptates nam iusto ab. Commodi provident expedita molestias eos, porro quia harum itaque similique, ipsa consequuntur necessitatibus aut sint error?
    Deleniti, dolor esse? Dicta et fugiat pariatur enim repellat autem. Aliquam dignissimos eum odit iste alias, sint repudiandae beatae quo quod ipsa nam perspiciatis totam esse tempore. Eveniet, temporibus excepturi!
    Doloremque amet aspernatur in molestias impedit. Corporis dolorum ipsam ut fugiat eaque praesentium reprehenderit id sint accusantium ratione tempora doloribus dignissimos nemo labore, dolor nesciunt numquam! Consequuntur quas quis iusto!
    Ducimus molestiae eius mollitia ratione sit tenetur. Reiciendis a repellendus odio pariatur quasi repudiandae animi tempora quam, assumenda ratione adipisci non impedit itaque aliquid sapiente esse dolore! Quasi, earum recusandae.
    Quidem veniam deleniti quae iste, architecto totam voluptatum cupiditate assumenda eius ad harum libero provident optio commodi dolor reprehenderit aspernatur tenetur ab vitae praesentium maxime quos. Ipsum repudiandae alias nostrum!
    Consectetur quis voluptatum dolor natus! Ullam, et veritatis tempore animi ut dolores minus eos illum earum eaque minima illo vitae veniam, recusandae, fugiat dignissimos? Eum accusamus voluptatem aut eligendi a.
    Porro ipsum expedita ex ipsa, suscipit error saepe cumque enim labore delectus voluptates atque nisi accusamus nihil aliquam id quod quibusdam ratione, iusto quisquam, temporibus illo reprehenderit. Cum, ullam totam?
    Est dolor hic tenetur animi. Doloremque voluptas eius ea. In facere voluptatum iure perferendis, accusantium a, cupiditate dicta animi maxime dolor eaque! Repellat perspiciatis aliquid, quibusdam sunt adipisci ea. Ab.
    Non quam corporis omnis cum illum nulla nostrum quasi dolor impedit laborum esse illo assumenda perferendis aliquam, sapiente ipsa libero doloremque voluptatum hic vero distinctio. Ratione eaque quaerat maiores quia.
    Consectetur harum quae laboriosam vel at culpa, sit animi, aspernatur quidem officia unde tempora ullam sunt in modi obcaecati totam ipsam nostrum eveniet voluptas adipisci doloribus accusamus autem quas! Placeat.
    Nemo provident magnam autem animi voluptates pariatur, harum earum nisi tempore et consequuntur soluta dolor enim omnis placeat velit inventore accusamus minima odit alias sit repellendus. Fuga voluptatum et ut!
    Voluptas tempore illo exercitationem quisquam quos nesciunt quae facilis velit praesentium odio magnam quia fugiat ad quod voluptatum eveniet placeat, quibusdam ducimus, ratione consequatur molestias nulla! Deserunt pariatur tempore neque.
    Dolorem cum corrupti hic quo unde. Ab quo odit ex vitae ipsam itaque! Ex aliquam dolore similique assumenda itaque! Pariatur soluta magnam alias consectetur vitae, labore quas non quo repellendus.
    Incidunt est quam, ex at nemo architecto accusantium sunt aperiam placeat dicta deserunt hic suscipit dolor veniam, libero ipsum fuga cum qui nisi culpa praesentium nobis possimus nesciunt ea? Quibusdam.
    Dolorem deserunt quibusdam voluptates alias animi ex blanditiis voluptatem facilis ipsum quisquam perferendis tempora, earum magni pariatur laudantium illo ipsa culpa odit libero molestiae consequatur? Quos magnam numquam nihil praesentium!
    Optio magni eaque consequatur nemo minus quam iste officia odit labore eum ad, repudiandae in, necessitatibus possimus dignissimos provident saepe minima explicabo, facilis distinctio earum vero ducimus ex? Optio, itaque!
    Mollitia error libero nostrum fuga nemo! Eum sit quod eaque enim sed. Provident quaerat iusto obcaecati ipsam aperiam temporibus veniam eius doloribus, ut tempora neque aut porro debitis suscipit maxime?
    Quidem neque rerum ea veritatis iste eum animi, dolorum culpa incidunt vel esse, amet, quam blanditiis commodi perferendis nobis? Rem ipsam tempore repellat eius quasi ullam sed, corrupti in excepturi!
    Voluptate accusamus incidunt eos doloremque libero autem vel ipsam ipsum, excepturi tempore maxime, dolore laborum doloribus molestias ullam eveniet at unde magnam cum reiciendis sit aut repellendus! Rem, non ratione!
    Corporis sunt ad quibusdam debitis pariatur, tempore minima doloribus? Quod illo voluptatem voluptates nostrum molestiae, soluta sapiente, dolore ut provident cupiditate exercitationem iusto corrupti, id rerum quae alias. Dolor, commodi.
  </div>
</section>

<!-- 폰트 -->
<style>
  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 700;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamBold.woff') format('woff');
  }

  @font-face {
    font-family: 'LotteMartDream';
    font-style: normal;
    font-weight: 300;
    src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff2') format('woff2'), url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamLight.woff') format('woff');
  }

  html>body {
    font-family: 'LotteMartDream', sans-serif;
  }
</style>

[CSS]

/* 노말라이즈 */
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 커스텀 */
body {
  background-color: #787878;
  color:white;
  margin-top: 48px;
}

.container {
  max-width: 1500px;
  margin: 0 auto;
}

/* 767px 이하에서만 - mobile */
@media ( max-width:767px ) {
  .pc-top-bar {
    display:none;
  }
}

/* 768px 이상에서만 - pc */
@media ( min-width:768px ) {
  .mobile-top-bar {
    display:none;
  }
}

/* 공통 속성 */
/* 공용 탑바 시작 */
.top-bar {
  height: 48px;
  width: 100%;
  background-color: rgb(107, 114, 128);
  color: white;
  position: fixed;
  top: 0;
  left: 0;
}

.top-bar > .container {
  height: 100%;
  display: flex;
}

/* 탑바 로고 시작 */
.top-bar .top-bar__logo {
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}
/* 탑바 로고 끝 */

/* 탑바 grow 부분 */
.top-bar .top-bar__grow {
  flex-grow: 1;
}
/* 공용 탑바 끝*/

/* pc 버전 시작 */
/* pc - 탑바 메뉴 시작 */
.pc-top-bar .top-bar__menu-box-1 > ul {
  height: 100%;
  display: flex;
}

.pc-top-bar .top-bar__menu-box-1 > ul > li > a {
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.pc-top-bar .top-bar__menu-box-1 > ul > li:hover > a {
  color: rgb(107, 114, 128);
  background-color: white;
}

.pc-top-bar .top-bar__menu-box-1 > ul > li > a > span:first-child {
  margin-right: 5px;
}
/* pc - 탑바 메뉴 끝 */
/* pc - 탑바 끝 */
/* pc 버전 끝 */


/* mobile 버전 시작 */
/* mobile - 탑바 메뉴 시작 */
.mobile-top-bar .mobile-side-bar__btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mobile-top-bar .mobile-side-bar__btn > span {
  cursor: pointer;
}
/* mobile - 탑바 메뉴 끝 */
/* mobile 버전 끝 */

 

동영상

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 2, 탑바와, 모바일 탑바 구현 1 pc

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 2, 탑바와, 모바일 탑바 구현 2 mobile