JQ 44~ 47강 개념 - 제이쿼리

44강

문제

문제 - 반응형 모바일메뉴1 구현, 작업 3, 클릭시 모바일 사이드바의 배경 노출

문제 - 정답예시

문제 - 정답 1

문제 - 정답 2(only css)

 

[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 -->

<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>
    <div 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>
    </div>
  </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-top-bar__btn">
        <span>
          <i class="fas fa-bars"></i>
        </span>
      </div>
      <div class="mobile-side-bar"></div>
    </div>
  </div>
</header>

<section class="sec-1 container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tenetur eaque pariatur commodi. Officia et odio quidem repudiandae magni quisquam similique consequuntur voluptate maxime. Voluptas eius sit excepturi provident maxime.
  Voluptatum quae laudantium beatae quos quibusdam sint dolores autem quas aperiam sed unde vel a voluptatem libero vitae est expedita excepturi eligendi, aut iste. Quas natus assumenda libero nihil quae!
  Architecto tempore autem mollitia facere excepturi aliquam ipsum necessitatibus, ipsam illo deleniti est porro quam? Saepe laboriosam eaque nihil nulla provident itaque commodi voluptatum quod? Pariatur assumenda temporibus beatae nemo?
  Quaerat quae corporis optio illo voluptates pariatur minus, quas ab nesciunt tenetur consequuntur velit. Praesentium repellendus atque natus eveniet qui ex nesciunt vel, deleniti tenetur corporis id eius aliquid illum.
  Obcaecati rerum vitae quaerat deserunt labore autem commodi quae et deleniti alias. Non dolor quaerat labore repellendus consequatur, at iste! Corporis mollitia odio suscipit corrupti asperiores ratione ex, nemo ad?
  Voluptate architecto nesciunt, officiis asperiores mollitia quisquam similique, quod ut provident quibusdam reprehenderit ipsum quis repudiandae distinctio sed, suscipit sunt voluptatibus quos. Vitae explicabo illum suscipit sequi dolorem delectus odit?
  Quod expedita quam est commodi suscipit in impedit facere optio. Ducimus dolorum dolores excepturi labore, quo dolorem et ad minima, est at dignissimos fugit, optio iusto non voluptatem officiis modi!
  In expedita ipsum dolores impedit doloremque aliquid minus similique illo natus ipsa odit vitae, consequatur doloribus rem nesciunt. Laborum ullam saepe dolor distinctio itaque delectus! Reiciendis aut harum deleniti tempora!
  Corrupti illo sit rem, ducimus suscipit quae minima dolor ex! Porro modi est distinctio, quia aperiam deserunt tempora ad voluptas eius ab ut nemo neque illo inventore quidem. Perspiciatis, labore.
  Dolores esse sit iure pariatur deleniti quaerat dolore, a est debitis repellendus quia tempora deserunt praesentium illum vitae dolorem dignissimos itaque voluptate quis. Labore rem doloremque ratione, fugit blanditiis quibusdam!
  Veniam repellat quasi officiis alias tenetur velit, accusamus provident tempora nesciunt quaerat, ratione deleniti ipsam? Animi dolorem voluptates eum vel ab cupiditate temporibus, eveniet aliquam esse praesentium labore amet aut.
  Error temporibus illo amet labore explicabo, doloremque, laboriosam obcaecati tempora blanditiis quidem natus consequuntur, saepe aliquam ad necessitatibus atque voluptatum nihil itaque. Iusto, ab? Quas eaque nobis illum sunt voluptatibus.
  Consectetur, excepturi dolorum tempore quos aut quo doloremque veniam quidem quae tempora deleniti laboriosam autem totam reiciendis provident illum fugit ut voluptatum adipisci aliquam natus cumque dignissimos exercitationem odio. Amet.
  Ratione rerum non veritatis ipsa voluptas modi, a provident dolorum quia praesentium autem, molestias reprehenderit unde eos fugiat, aut quos quisquam et numquam repellat! Laborum a molestiae labore dignissimos dolore.
  Aut laudantium placeat magnam eveniet delectus voluptas qui laborum tempore provident totam, asperiores quia ullam voluptatibus corporis eaque numquam maiores quae, ducimus dolorum exercitationem nisi, suscipit neque molestias soluta. Aspernatur!
  Quasi, minus architecto dolorem a aliquam inventore! Delectus, quod minus. Quibusdam officiis sunt, quia quod minus quae quam. Officiis minus quaerat obcaecati illo ratione est ex enim, voluptatem fuga laudantium?
  Eveniet autem fugiat cupiditate repudiandae minus unde dolorem minima itaque voluptates ipsum corrupti, esse voluptatem aperiam id, libero suscipit odit architecto consequatur harum omnis labore. Debitis provident mollitia fuga rerum.
  Ducimus, natus quibusdam dignissimos minima vero maiores accusantium blanditiis doloribus sint asperiores vel cum laboriosam illum consequatur, voluptate est. Nisi repudiandae iste nostrum adipisci tenetur laboriosam numquam officia corrupti. Nihil?
  Adipisci animi dolore ipsa ratione. Optio animi sit assumenda fugit, provident laborum ipsum illo soluta. Velit, rem, qui odio nostrum ab doloremque dolorem, ex deleniti ipsa facilis id libero consectetur!
  Nesciunt tenetur consequatur dolorem atque, dolore omnis quos nostrum? Iste beatae aliquam illum earum consectetur perspiciatis exercitationem voluptas autem aut harum nulla laboriosam, quo natus esse facilis non consequuntur? A!
  Dolorum facilis voluptatem molestiae voluptatum animi unde laboriosam, temporibus iste, hic harum deleniti ea nemo ullam quidem, doloribus nihil perspiciatis laudantium vitae. Delectus molestias cumque cum, exercitationem consectetur distinctio beatae?
  Magni voluptatum, modi enim numquam eius praesentium veritatis. Animi enim similique eaque vel dolor non inventore vero laboriosam quo illum omnis ipsum provident porro, ratione ipsam error quidem nisi libero!
  A laudantium saepe culpa facilis animi laboriosam ut, labore maxime inventore architecto deleniti expedita ratione. In quaerat omnis quas. Officia, labore omnis asperiores voluptas quo vel ut cum rem porro?
  Nisi adipisci dignissimos minima illum debitis? Fugiat, numquam adipisci perferendis explicabo harum facilis veritatis quas alias obcaecati quae voluptatem quisquam, sunt porro consectetur officiis mollitia esse earum ratione! Et, odit.
  Earum quis magni eos illo hic. Voluptate sequi magni mollitia quidem, harum consectetur excepturi recusandae asperiores minima pariatur blanditiis enim illum obcaecati voluptatibus assumenda eaque officia, doloremque doloribus in illo?
  Eos, deserunt? Perferendis fuga corporis minima expedita, magni architecto optio nam praesentium, ullam tempore totam quia commodi fugiat ratione exercitationem quaerat molestiae iste ad ipsam soluta beatae error tenetur! Inventore?
  Similique unde, repudiandae distinctio quos inventore odio incidunt eveniet quo officia, nulla quas ex rerum, ipsa quisquam suscipit dicta animi beatae commodi nesciunt! Deleniti cumque quas ut magni, obcaecati earum!
  Rem harum vel facere, excepturi accusantium, aspernatur impedit cupiditate provident perferendis et placeat ducimus maiores? Perspiciatis, molestias odit laudantium magnam culpa, iure fugit vel labore rem accusamus corrupti ratione eaque.
  Distinctio aliquid esse architecto ab cum, ipsam dicta, velit exercitationem doloribus odit alias sit eius laudantium itaque quis culpa? Nemo ex libero amet suscipit molestias quae eius cumque eum dolores.
  Dicta commodi sequi in praesentium sed animi distinctio, voluptatum corporis, vero doloribus voluptates optio numquam. Quis, repellat ipsa. Neque dicta magnam possimus officia aliquam quo laudantium illo eaque sequi! Rem!
</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;
}

/* 768px 이하 에서만 보임 - 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-top-bar__btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mobile-top-bar .mobile-top-bar__btn > span {
  cursor: pointer;
}

.mobile-top-bar .mobile-side-bar {
  background-color: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  opacity: 0;
  visibility: hidden;
  transition: visibility .3s, opacity.3s;
}

.mobile-top-bar .mobile-side-bar.active {
  opacity: 1;
  visibility: visible;
}

html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
  overflow: hidden;
}
/* mobile - 탑바 메뉴 끝 */
/* mobile 버전 끝 */

[JS]

function MobileTopBar__init() {
  $('.mobile-top-bar__btn').click(function() {
    MobileSideBar__show();
  });
}

function MobileSideBar__init() {
  $('.mobile-side-bar').click(function() {
    MobileSideBar__hide();
  });
}

function MobileSideBar__show() {
  $('.mobile-side-bar').addClass('active');
  $('html').addClass('mobile-side-bar-actived');
}

function MobileSideBar__hide() {
  $('.mobile-side-bar').removeClass('active');
  $('html').removeClass('mobile-side-bar-actived');
}

MobileTopBar__init();
MobileSideBar__init();

동영상

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 3, 클릭시 모바일 사이드바의 배경 노출

45강 - 반응형 모바일메뉴1 구현, 작업 4, 클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴

문제

문제 - 반응형 모바일메뉴1 구현, 작업 4, 클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴

조건

• 우측에서 너비 300px 짜리 .mobile-side-bar__content 엘리먼트가 나타남
• .mobile-side-bar__content 의 높이는 100%
• 배경은 흰색

문제 - 정답예시

문제 - 정답

문제 - 정답 2(only css)

 

[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 -->

<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>
    <div 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>
    </div>
  </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-top-bar__btn">
        <span>
          <i class="fas fa-bars"></i>
        </span>
      </div>
      <div class="mobile-side-bar">
        <div class="mobile-side-bar__content">
        </div>
      </div>
    </div>
  </div>
</header>

<section class="sec-1 container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tenetur eaque pariatur commodi. Officia et odio quidem repudiandae magni quisquam similique consequuntur voluptate maxime. Voluptas eius sit excepturi provident maxime.
  Voluptatum quae laudantium beatae quos quibusdam sint dolores autem quas aperiam sed unde vel a voluptatem libero vitae est expedita excepturi eligendi, aut iste. Quas natus assumenda libero nihil quae!
  Architecto tempore autem mollitia facere excepturi aliquam ipsum necessitatibus, ipsam illo deleniti est porro quam? Saepe laboriosam eaque nihil nulla provident itaque commodi voluptatum quod? Pariatur assumenda temporibus beatae nemo?
  Quaerat quae corporis optio illo voluptates pariatur minus, quas ab nesciunt tenetur consequuntur velit. Praesentium repellendus atque natus eveniet qui ex nesciunt vel, deleniti tenetur corporis id eius aliquid illum.
  Obcaecati rerum vitae quaerat deserunt labore autem commodi quae et deleniti alias. Non dolor quaerat labore repellendus consequatur, at iste! Corporis mollitia odio suscipit corrupti asperiores ratione ex, nemo ad?
  Voluptate architecto nesciunt, officiis asperiores mollitia quisquam similique, quod ut provident quibusdam reprehenderit ipsum quis repudiandae distinctio sed, suscipit sunt voluptatibus quos. Vitae explicabo illum suscipit sequi dolorem delectus odit?
  Quod expedita quam est commodi suscipit in impedit facere optio. Ducimus dolorum dolores excepturi labore, quo dolorem et ad minima, est at dignissimos fugit, optio iusto non voluptatem officiis modi!
  In expedita ipsum dolores impedit doloremque aliquid minus similique illo natus ipsa odit vitae, consequatur doloribus rem nesciunt. Laborum ullam saepe dolor distinctio itaque delectus! Reiciendis aut harum deleniti tempora!
  Corrupti illo sit rem, ducimus suscipit quae minima dolor ex! Porro modi est distinctio, quia aperiam deserunt tempora ad voluptas eius ab ut nemo neque illo inventore quidem. Perspiciatis, labore.
  Dolores esse sit iure pariatur deleniti quaerat dolore, a est debitis repellendus quia tempora deserunt praesentium illum vitae dolorem dignissimos itaque voluptate quis. Labore rem doloremque ratione, fugit blanditiis quibusdam!
  Veniam repellat quasi officiis alias tenetur velit, accusamus provident tempora nesciunt quaerat, ratione deleniti ipsam? Animi dolorem voluptates eum vel ab cupiditate temporibus, eveniet aliquam esse praesentium labore amet aut.
  Error temporibus illo amet labore explicabo, doloremque, laboriosam obcaecati tempora blanditiis quidem natus consequuntur, saepe aliquam ad necessitatibus atque voluptatum nihil itaque. Iusto, ab? Quas eaque nobis illum sunt voluptatibus.
  Consectetur, excepturi dolorum tempore quos aut quo doloremque veniam quidem quae tempora deleniti laboriosam autem totam reiciendis provident illum fugit ut voluptatum adipisci aliquam natus cumque dignissimos exercitationem odio. Amet.
  Ratione rerum non veritatis ipsa voluptas modi, a provident dolorum quia praesentium autem, molestias reprehenderit unde eos fugiat, aut quos quisquam et numquam repellat! Laborum a molestiae labore dignissimos dolore.
  Aut laudantium placeat magnam eveniet delectus voluptas qui laborum tempore provident totam, asperiores quia ullam voluptatibus corporis eaque numquam maiores quae, ducimus dolorum exercitationem nisi, suscipit neque molestias soluta. Aspernatur!
  Quasi, minus architecto dolorem a aliquam inventore! Delectus, quod minus. Quibusdam officiis sunt, quia quod minus quae quam. Officiis minus quaerat obcaecati illo ratione est ex enim, voluptatem fuga laudantium?
  Eveniet autem fugiat cupiditate repudiandae minus unde dolorem minima itaque voluptates ipsum corrupti, esse voluptatem aperiam id, libero suscipit odit architecto consequatur harum omnis labore. Debitis provident mollitia fuga rerum.
  Ducimus, natus quibusdam dignissimos minima vero maiores accusantium blanditiis doloribus sint asperiores vel cum laboriosam illum consequatur, voluptate est. Nisi repudiandae iste nostrum adipisci tenetur laboriosam numquam officia corrupti. Nihil?
  Adipisci animi dolore ipsa ratione. Optio animi sit assumenda fugit, provident laborum ipsum illo soluta. Velit, rem, qui odio nostrum ab doloremque dolorem, ex deleniti ipsa facilis id libero consectetur!
  Nesciunt tenetur consequatur dolorem atque, dolore omnis quos nostrum? Iste beatae aliquam illum earum consectetur perspiciatis exercitationem voluptas autem aut harum nulla laboriosam, quo natus esse facilis non consequuntur? A!
  Dolorum facilis voluptatem molestiae voluptatum animi unde laboriosam, temporibus iste, hic harum deleniti ea nemo ullam quidem, doloribus nihil perspiciatis laudantium vitae. Delectus molestias cumque cum, exercitationem consectetur distinctio beatae?
  Magni voluptatum, modi enim numquam eius praesentium veritatis. Animi enim similique eaque vel dolor non inventore vero laboriosam quo illum omnis ipsum provident porro, ratione ipsam error quidem nisi libero!
  A laudantium saepe culpa facilis animi laboriosam ut, labore maxime inventore architecto deleniti expedita ratione. In quaerat omnis quas. Officia, labore omnis asperiores voluptas quo vel ut cum rem porro?
  Nisi adipisci dignissimos minima illum debitis? Fugiat, numquam adipisci perferendis explicabo harum facilis veritatis quas alias obcaecati quae voluptatem quisquam, sunt porro consectetur officiis mollitia esse earum ratione! Et, odit.
  Earum quis magni eos illo hic. Voluptate sequi magni mollitia quidem, harum consectetur excepturi recusandae asperiores minima pariatur blanditiis enim illum obcaecati voluptatibus assumenda eaque officia, doloremque doloribus in illo?
  Eos, deserunt? Perferendis fuga corporis minima expedita, magni architecto optio nam praesentium, ullam tempore totam quia commodi fugiat ratione exercitationem quaerat molestiae iste ad ipsam soluta beatae error tenetur! Inventore?
  Similique unde, repudiandae distinctio quos inventore odio incidunt eveniet quo officia, nulla quas ex rerum, ipsa quisquam suscipit dicta animi beatae commodi nesciunt! Deleniti cumque quas ut magni, obcaecati earum!
  Rem harum vel facere, excepturi accusantium, aspernatur impedit cupiditate provident perferendis et placeat ducimus maiores? Perspiciatis, molestias odit laudantium magnam culpa, iure fugit vel labore rem accusamus corrupti ratione eaque.
  Distinctio aliquid esse architecto ab cum, ipsam dicta, velit exercitationem doloribus odit alias sit eius laudantium itaque quis culpa? Nemo ex libero amet suscipit molestias quae eius cumque eum dolores.
  Dicta commodi sequi in praesentium sed animi distinctio, voluptatum corporis, vero doloribus voluptates optio numquam. Quis, repellat ipsa. Neque dicta magnam possimus officia aliquam quo laudantium illo eaque sequi! Rem!
</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;
}

/* 768px 이하 에서만 보임 - 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-top-bar__btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mobile-top-bar .mobile-top-bar__btn > span {
  cursor: pointer;
}

.mobile-top-bar .mobile-side-bar {
  background-color: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  opacity: 0;
  visibility: hidden;
  transition: visibility .3s, opacity.3s;
}

.mobile-top-bar .mobile-side-bar.active {
  opacity: 1;
  visibility: visible;
}

html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
  overflow: hidden;
}

.mobile-side-bar .mobile-side-bar__content {
  width: 320px;
  height: 100%;
  background-color: white;
  margin-left: auto;
  transform: translateX(100%);
  transition: transform .3s;
}

.mobile-side-bar.active .mobile-side-bar__content {
  transform: translateX(0);
}
/* mobile - 탑바 메뉴 끝 */
/* mobile 버전 끝 */

[JS]

function MobileTopBar__init() {
  $('.mobile-top-bar__btn').click(function() {
    MobileSideBar__show();
  });
}

function MobilesideBar__init() {
  $('.mobile-side-bar').click(function() {
    MobileSideBar__hide();
  });
}

function MobileSideBar__show() {
  $('.mobile-side-bar').addClass('active');
  $('html').addClass('mobile-side-bar-actived');
}

function MobileSideBar__hide() {
  $('.mobile-side-bar').removeClass('active');
  $('html').removeClass('mobile-side-bar-actived');
}

MobileTopBar__init();
MobilesideBar__init();

동영상

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 4, 클릭시 사이드바 노출시 콘텐트가 화면 우측에서 나옴

46강  - 반응형 모바일메뉴1 구현, 작업 5, 닫기 버튼, pc 화면에서 사이드바 숨기기

문제

문제 - 반응형 모바일메뉴1 구현, 작업 5, 닫기 버튼, pc 화면에서 사이드바 숨기기

조건

• .mobile-side-bar__content 의 자식으로 .mobile-side-bar__head 와 .mobile-side-bar__body
• .mobile-side-bar__head 의 자식으로 닫기 버튼
• pc 화면에서 사이드바 숨기기

문제 - 정답예시

문제 - 정답

문제 - 정답 2(only css)

 

[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 -->

<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>
    <div 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>
    </div>
  </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-top-bar__btn">
        <span>
          <i class="fas fa-bars"></i>
        </span>
      </div>
      <div class="mobile-side-bar">
        <div class="mobile-side-bar__content">
          <div class="mobile-side-bar__head">
            <div class="mobile-side-bar__btn-close"></div>
          </div>
          <div class="mobile-side-bar__body"></div>
        </div>
      </div>
    </div>
  </div>
</header>

<section class="sec-1 container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis tenetur eaque pariatur commodi. Officia et odio quidem repudiandae magni quisquam similique consequuntur voluptate maxime. Voluptas eius sit excepturi provident maxime.
  Voluptatum quae laudantium beatae quos quibusdam sint dolores autem quas aperiam sed unde vel a voluptatem libero vitae est expedita excepturi eligendi, aut iste. Quas natus assumenda libero nihil quae!
  Architecto tempore autem mollitia facere excepturi aliquam ipsum necessitatibus, ipsam illo deleniti est porro quam? Saepe laboriosam eaque nihil nulla provident itaque commodi voluptatum quod? Pariatur assumenda temporibus beatae nemo?
  Quaerat quae corporis optio illo voluptates pariatur minus, quas ab nesciunt tenetur consequuntur velit. Praesentium repellendus atque natus eveniet qui ex nesciunt vel, deleniti tenetur corporis id eius aliquid illum.
  Obcaecati rerum vitae quaerat deserunt labore autem commodi quae et deleniti alias. Non dolor quaerat labore repellendus consequatur, at iste! Corporis mollitia odio suscipit corrupti asperiores ratione ex, nemo ad?
  Voluptate architecto nesciunt, officiis asperiores mollitia quisquam similique, quod ut provident quibusdam reprehenderit ipsum quis repudiandae distinctio sed, suscipit sunt voluptatibus quos. Vitae explicabo illum suscipit sequi dolorem delectus odit?
  Quod expedita quam est commodi suscipit in impedit facere optio. Ducimus dolorum dolores excepturi labore, quo dolorem et ad minima, est at dignissimos fugit, optio iusto non voluptatem officiis modi!
  In expedita ipsum dolores impedit doloremque aliquid minus similique illo natus ipsa odit vitae, consequatur doloribus rem nesciunt. Laborum ullam saepe dolor distinctio itaque delectus! Reiciendis aut harum deleniti tempora!
  Corrupti illo sit rem, ducimus suscipit quae minima dolor ex! Porro modi est distinctio, quia aperiam deserunt tempora ad voluptas eius ab ut nemo neque illo inventore quidem. Perspiciatis, labore.
  Dolores esse sit iure pariatur deleniti quaerat dolore, a est debitis repellendus quia tempora deserunt praesentium illum vitae dolorem dignissimos itaque voluptate quis. Labore rem doloremque ratione, fugit blanditiis quibusdam!
  Veniam repellat quasi officiis alias tenetur velit, accusamus provident tempora nesciunt quaerat, ratione deleniti ipsam? Animi dolorem voluptates eum vel ab cupiditate temporibus, eveniet aliquam esse praesentium labore amet aut.
  Error temporibus illo amet labore explicabo, doloremque, laboriosam obcaecati tempora blanditiis quidem natus consequuntur, saepe aliquam ad necessitatibus atque voluptatum nihil itaque. Iusto, ab? Quas eaque nobis illum sunt voluptatibus.
  Consectetur, excepturi dolorum tempore quos aut quo doloremque veniam quidem quae tempora deleniti laboriosam autem totam reiciendis provident illum fugit ut voluptatum adipisci aliquam natus cumque dignissimos exercitationem odio. Amet.
  Ratione rerum non veritatis ipsa voluptas modi, a provident dolorum quia praesentium autem, molestias reprehenderit unde eos fugiat, aut quos quisquam et numquam repellat! Laborum a molestiae labore dignissimos dolore.
  Aut laudantium placeat magnam eveniet delectus voluptas qui laborum tempore provident totam, asperiores quia ullam voluptatibus corporis eaque numquam maiores quae, ducimus dolorum exercitationem nisi, suscipit neque molestias soluta. Aspernatur!
  Quasi, minus architecto dolorem a aliquam inventore! Delectus, quod minus. Quibusdam officiis sunt, quia quod minus quae quam. Officiis minus quaerat obcaecati illo ratione est ex enim, voluptatem fuga laudantium?
  Eveniet autem fugiat cupiditate repudiandae minus unde dolorem minima itaque voluptates ipsum corrupti, esse voluptatem aperiam id, libero suscipit odit architecto consequatur harum omnis labore. Debitis provident mollitia fuga rerum.
  Ducimus, natus quibusdam dignissimos minima vero maiores accusantium blanditiis doloribus sint asperiores vel cum laboriosam illum consequatur, voluptate est. Nisi repudiandae iste nostrum adipisci tenetur laboriosam numquam officia corrupti. Nihil?
  Adipisci animi dolore ipsa ratione. Optio animi sit assumenda fugit, provident laborum ipsum illo soluta. Velit, rem, qui odio nostrum ab doloremque dolorem, ex deleniti ipsa facilis id libero consectetur!
  Nesciunt tenetur consequatur dolorem atque, dolore omnis quos nostrum? Iste beatae aliquam illum earum consectetur perspiciatis exercitationem voluptas autem aut harum nulla laboriosam, quo natus esse facilis non consequuntur? A!
  Dolorum facilis voluptatem molestiae voluptatum animi unde laboriosam, temporibus iste, hic harum deleniti ea nemo ullam quidem, doloribus nihil perspiciatis laudantium vitae. Delectus molestias cumque cum, exercitationem consectetur distinctio beatae?
  Magni voluptatum, modi enim numquam eius praesentium veritatis. Animi enim similique eaque vel dolor non inventore vero laboriosam quo illum omnis ipsum provident porro, ratione ipsam error quidem nisi libero!
  A laudantium saepe culpa facilis animi laboriosam ut, labore maxime inventore architecto deleniti expedita ratione. In quaerat omnis quas. Officia, labore omnis asperiores voluptas quo vel ut cum rem porro?
  Nisi adipisci dignissimos minima illum debitis? Fugiat, numquam adipisci perferendis explicabo harum facilis veritatis quas alias obcaecati quae voluptatem quisquam, sunt porro consectetur officiis mollitia esse earum ratione! Et, odit.
  Earum quis magni eos illo hic. Voluptate sequi magni mollitia quidem, harum consectetur excepturi recusandae asperiores minima pariatur blanditiis enim illum obcaecati voluptatibus assumenda eaque officia, doloremque doloribus in illo?
  Eos, deserunt? Perferendis fuga corporis minima expedita, magni architecto optio nam praesentium, ullam tempore totam quia commodi fugiat ratione exercitationem quaerat molestiae iste ad ipsam soluta beatae error tenetur! Inventore?
  Similique unde, repudiandae distinctio quos inventore odio incidunt eveniet quo officia, nulla quas ex rerum, ipsa quisquam suscipit dicta animi beatae commodi nesciunt! Deleniti cumque quas ut magni, obcaecati earum!
  Rem harum vel facere, excepturi accusantium, aspernatur impedit cupiditate provident perferendis et placeat ducimus maiores? Perspiciatis, molestias odit laudantium magnam culpa, iure fugit vel labore rem accusamus corrupti ratione eaque.
  Distinctio aliquid esse architecto ab cum, ipsam dicta, velit exercitationem doloribus odit alias sit eius laudantium itaque quis culpa? Nemo ex libero amet suscipit molestias quae eius cumque eum dolores.
  Dicta commodi sequi in praesentium sed animi distinctio, voluptatum corporis, vero doloribus voluptates optio numquam. Quis, repellat ipsa. Neque dicta magnam possimus officia aliquam quo laudantium illo eaque sequi! Rem!
</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;
}

/* 768px 이하 에서만 보임 - 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-top-bar__btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.mobile-top-bar .mobile-top-bar__btn > span {
  cursor: pointer;
}

.mobile-top-bar .mobile-side-bar {
  background-color: rgba(0, 0, 0, .3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  opacity: 0;
  visibility: hidden;
  transition: visibility .3s, opacity.3s;
}

.mobile-top-bar .mobile-side-bar.active {
  opacity: 1;
  visibility: visible;
}

html.mobile-side-bar-actived,
html.mobile-side-bar-actived > body {
  overflow: hidden;
}

.mobile-side-bar .mobile-side-bar__content {
  width: 320px;
  height: 100%;
  background-color: white;
  margin-left: auto;
  transform: translateX(100%);
  transition: transform .3s;
}

.mobile-side-bar.active .mobile-side-bar__content {
  transform: translateX(0);
}

/* 모바일 버전 헤더 시작 */
.mobile-side-bar .mobile-side-bar__head {
  padding: 10px;
}

.mobile-side-bar .mobile-side-bar__btn-close {
  width: 30px;
  height: 30px;
  position: relative;
  margin-left: auto;
  cursor: pointer;
}

.mobile-side-bar .mobile-side-bar__btn-close::before,
.mobile-side-bar .mobile-side-bar__btn-close::after {
  content: "";
  width: 100%;
  height: 5px;
  background-color: black;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(45deg);
}

.mobile-side-bar .mobile-side-bar__btn-close:after {
  transform: rotate(-45deg);
}
/* mobile - 탑바 메뉴 끝 */
/* mobile 버전 끝 */

[JS]

function MobileTopBar__init() {
  $('.mobile-top-bar__btn').click(function() {
    MobileSideBar__show();
  });
}

function MobilesideBar__init() {
  $('.mobile-side-bar, .mobile-side-bar__btn-close').click(function() {
    MobileSideBar__hide();
  });
  
  $('.mobile-side-bar__content').click(function() {
    return false;
  });
}

function MobileSideBar__show() {
  $('.mobile-side-bar').addClass('active');
  $('html').addClass('mobile-side-bar-actived');
}

function MobileSideBar__hide() {
  $('.mobile-side-bar').removeClass('active');
  $('html').removeClass('mobile-side-bar-actived');
}

MobileTopBar__init();
MobilesideBar__init();

동영상

2603, JS, jQuery, 반응형 모바일메뉴1 구현, 작업 5, 닫기 버튼, pc 화면에서 사이드바 숨기기

47강

문제

문제 - 반응형 모바일메뉴1 구현, 작업 6, 3차 메뉴

조건

3차 메뉴까지 생성

단계적 아이템 활성화`

overflow-y-auto

문제 - 정답예시

문제 - 정답, 단계 1, BEM, 격리

문제 - 정답, 단계 2, 메뉴 마크업

문제 - 정답, 단계 3, not, only-child

문제 - 정답, 단계 4, 반투명 배경중첩

문제 - 정답, 단계 5, 아이템 클릭시 active 토글

문제 - 정답, 단계 6, n차 메뉴 아이템에도 이벤트

문제 - 정답, 단계 7, 클릭시 활성화된 형제 active 제거

문제 - 정답, 단계 8, 클릭시 활성화된 형제의 후손들에 active 제거

문제 - 정답, 단계 9, 활성된 아이템 클릭시, 해당 아이템의 후손에 active 제거

문제 - 정답, 단계 10, 모바일 메뉴 박스 끄고, 켜는 기능 구현

문제 - 정답, 단계 11, 모바일 메뉴 박스를 끌 때, 모든 active 제거

문제 - 정답, 단계 12, 기존소스에 병합, overflow-y-auto

 

[HTML]

<!-- 모바일에서 기기의 해상도 능력에 상관없이 절대적인 크기로 나오도록 -->
<!-- 예를들어, pc에서의 300px이 모바일 에서도 똑같은 크기로 나오도록 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 제이쿼리 -->
<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 -->

<!-- 모바일 탑바와 사이드바의 높이만큼 여백처리 -->
<div class="h-12"></div>

<!-- 탑바 시작 -->
<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-4">
      <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 cursor-pointer flex items-center mr-3">
        <i class="fas fa-bars"></i>
      </span>
    </div>
  </div>
</header>
<!-- 모바일 탑바 끝 -->

<!-- 모바일 사이드바 시작 -->
<div class="mobile-side-bar md:hidden fixed inset-0 z-50 invisible opacity-0 text-black">
  <div class="mobile-side-bar__content flex flex-col w-80 h-full bg-white ml-auto">
    <div class="mobile-side-bar__head flex-shrink-0 p-3">
      <div class="mobile-side-bar__btn-close ml-auto w-8 h-8 relative cursor-pointer">
        <div class="absolute bg-black inset-x-0 h-1/5"></div>
        <div class="absolute bg-black inset-x-0 h-1/5"></div>
      </div>
    </div>
    <div class="mobile-side-bar__body flex-grow overflow-y-auto">
      <nav class="mobile-menu-box-1">
        <ul>
          <li>
            <a href="#">1차 메뉴 아이템 01</a>
            <ul>
              <li><a href="#">2차 메뉴 아이템 1</a></li>
              <li><a href="#">2차 메뉴 아이템 2</a></li>
              <li><a href="#">2차 메뉴 아이템 3</a></li>
              <li>
                <a href="#">2차 메뉴 아이템 4</a>
                <ul>
                  <li>
                    <a href="#">3차 메뉴 아이템 1</a>
                  </li>
                  <li><a href="#">3차 메뉴 아이템 2</a></li>
                  <li><a href="#">3차 메뉴 아이템 3</a></li>
                  <li><a href="#">3차 메뉴 아이템 4</a></li>
                  <li><a href="#">3차 메뉴 아이템 5</a></li>
                </ul>
              </li>
              <li>
                <a href="#">2차 메뉴 아이템 5</a>
                <ul>
                  <li><a href="#">3차 메뉴 아이템 1</a></li>
                  <li><a href="#">3차 메뉴 아이템 2</a></li>
                  <li><a href="#">3차 메뉴 아이템 3</a></li>
                  <li><a href="#">3차 메뉴 아이템 4</a></li>
                  <li><a href="#">3차 메뉴 아이템 5</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">1차 메뉴 아이템 02</a>
            <ul>
              <li><a href="#">2차 메뉴 아이템 1</a></li>
              <li><a href="#">2차 메뉴 아이템 2</a></li>
              <li><a href="#">2차 메뉴 아이템 3</a></li>
              <li><a href="#">2차 메뉴 아이템 4</a></li>
              <li><a href="#">2차 메뉴 아이템 5</a></li>
            </ul>    
          </li>
          <li>
            <a href="#">1차 메뉴 아이템 03</a>    
          </li>
          <li><a href="#">1차 메뉴 아이템 04</a></li>
          <li><a href="#">1차 메뉴 아이템 05</a></li>
          <li><a href="#">1차 메뉴 아이템 06</a></li>
          <li><a href="#">1차 메뉴 아이템 07</a></li>
          <li><a href="#">1차 메뉴 아이템 08</a></li>
          <li><a href="#">1차 메뉴 아이템 09</a></li>
          <li><a href="#">1차 메뉴 아이템 10</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
<!-- 모바일 사이드바 끝 -->

<!-- 섹션1 시작 -->
<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>
<!-- 섹션1 끝 -->

<!-- 폰트 -->
<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;
}

/* 모바일 사이드바 시작 */
@media (max-width: 767px) {
  html.mobile-side-bar-actived,
  html.mobile-side-bar-actived > body {
    overflow:hidden;
  }
}

.mobile-side-bar {
  transition: visibility 0.3s, opacity 0.3s;
  background-color:rgba(0,0,0,0.5);
}

.mobile-side-bar.active {
  visibility:visible;
  opacity:1;
}

.mobile-side-bar__content {
  transform:translateX(100%);
  transition: transform 0.3s;
}

.mobile-side-bar.active .mobile-side-bar__content {
  transform:translateX(0);
}

.mobile-side-bar__btn-close > div {
  top:40%;
  transform:rotate(-45deg);
}

.mobile-side-bar__btn-close > div:last-child {
  transform:rotate(45deg);
}
/* 모바일 사이드바 끝 */

/* 모바일 메뉴 박스 1 시작 */
.mobile-menu-box-1 > ul ul {
  display:none;
  background-color:rgba(120,120,120,0.3);
}

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

.mobile-menu-box-1 ul > li > a {
  display:block;
  padding:20px;
}

.mobile-menu-box-1 ul > li.active > a:not(:only-child) {
  color:red;
  text-decoration:underline;
}

.mobile-menu-box-1 ul > li > a::after {
  float:right;
}

.mobile-menu-box-1 ul > li > a:not(:only-child)::after {
  content:"[+]";
}

.mobile-menu-box-1 ul > li.active > a:not(:only-child)::after {
  content:"[-]";
}

.mobile-menu-box-1 ul > li > a:only-child::after {
  content:">";
}
/* 모바일 메뉴 박스 1 끝 */

[JS]
console.clear();

/* 모바일 탑바 시작 */
// 모바일 탑바 초기화
function MobileTopBar__init() {
  $('.mobile-top-bar__btn-show-side-bar').click(function() {
    MobileSideBar__show();
  });
}
/* 모바일 탑바 끝 */

/* 모바일 사이드바 시작 */
// 모바일 사이드바 초기화
function MobileSideBar__init() {
  $('.mobile-side-bar, .mobile-side-bar__btn-close').click(function() {
    MobileSideBar__hide();
  });
  
  $('.mobile-side-bar__content').click(function() {
    return false;
  });
}

// 모바일 사이드바 숨김
function MobileSideBar__hide() {
  $('.mobile-side-bar').removeClass('active');
  $('html').removeClass('mobile-side-bar-actived');
  MobileMenuBox1__hide();
}

// 모바일 사이드바 노출
function MobileSideBar__show() {
  $('.mobile-side-bar').addClass('active');
  $('html').addClass('mobile-side-bar-actived');
}
/* 모바일 사이드바 끝 */

/* 모바일 메뉴박스 시작 */
function MobileMenuBox1__init() {
  // 메뉴 아이템이 클릭되면 할일
  $('.mobile-menu-box-1 ul > li').click(function() {
    let $this = $(this);
    
    $this.siblings('.active').find('.active').removeClass('active');
    $this.siblings('.active').removeClass('active');
    
    if ( $this.hasClass('active') ) {
      $this.find('.active').removeClass('active');
      $this.removeClass('active');
    }
    else {
      $this.addClass('active');
    }
  });
  
  $('.mobile-menu-box-1 ul').click(function() {
    return false;
  });
}

function MobileMenuBox1__hide() {
  $('.mobile-menu-box-1 .active').removeClass('active');
}
/* 모바일 메뉴박스 끝 */

MobileTopBar__init();
MobileSideBar__init();
MobileMenuBox1__init();