🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• 메가공무원 메인 구조의 전체 레이아웃을 Vue 컴포넌트로 분리하여 퍼블리싱한다.
• 화면 상단부터 하단까지의 고정/유동 레이아웃과 좌우 사이드, 슬라이드 구조를 구현한다.

🧱 실습 개요

이번 강의에서는 다음과 같이 전체 레이아웃을 구성하고 실제 코드로 구현합니다.

• Header: 상단 고정 메뉴
• LeftQuickMenu, RightQuickMenu: 좌우 사이드 고정 메뉴
• MainSlide: 좌측 콘텐츠 슬라이드
• MainTabs: 탭 + 슬라이드 섹션
• StickyPanel: 우측 콘텐츠 고정
• HomePage.vue: 전체 페이지 레이아웃 통합

🛠 실습 코드: HomePage.vue 레이아웃 구성

<template>
  <div class="home-page">
    <div class="layout-container">
      <LeftQuickMenu />
      <main class="main-content">
        <section class="main-left">
          <MainSlide />
          <MainTabs />
        </section>
        <aside class="main-right">
          <StickyPanel />
        </aside>
      </main>
      <RightQuickMenu />
    </div>
  </div>
</template>

<script>
import LeftQuickMenu from "@/components/LeftQuickMenu.vue";
import RightQuickMenu from "@/components/RightQuickMenu.vue";
import MainSlide from "@/components/MainSlide.vue";
import MainTabs from "@/components/MainTabs.vue";
import StickyPanel from "@/components/StickyPanel.vue";

export default {
  components: {
    LeftQuickMenu,
    RightQuickMenu,
    MainSlide,
    MainTabs,
    StickyPanel,
  },
};
</script>

<style lang="scss" scoped>
.layout-container {
  display: flex;
  position: relative;
}

.main-content {
  display: flex;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px;
}

.main-left {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.main-right {
  flex: 1;
  position: sticky;
  top: 100px;
}
</style>

🧩 src/assets/base.scss

메가공무원의 베이스 scss를 가져옵니다.

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

:root {
  --font-noto: "Noto Sans KR";
  --font-gothic: "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;

  --gong-menuIcn-color1: #2642d1;
  --gong-menuIcn-color2: #0082ff;
  --sobang-menuIcn-color1: #b95253;
  --sobang-menuIcn-color2: #ff4141;
  --army-menuIcn-color1: #7a8e53;
}

/* reset */
html,
body {
  font-family: var(--font-gothic);
  font-size: 13px;
  color: #000;
  letter-spacing: -0.05em;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: 0;
}
div,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  position: relative;
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border: 0;
  table-layout: fixed; /*border-spacing:0px; zoom:1; empty-cells:show; width:100%; */
}
th,
td {
  word-wrap: break-word;
  line-height: 1.3;
  padding-left: 3px;
  padding-right: 3px;
}
img {
  vertical-align: top;
  max-width: 100%;
}
input[type="text"],
input[type="password"],
input[type="number"] {
  max-width: 100%;
  font-family: var(--font-gothic);
}
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
}
textarea {
  font-family: var(--font-gothic) !important;
  font-size: 13px;
  color: #000;
}
#accessibility,
.skip,
legend,
caption {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}
button {
  padding: 0;
  margin: 0;
  border: 0;
  background: 0;
  line-height: normal;
  cursor: pointer;
  font-family: var(--font-gothic);
}
button:focus {
  outline: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
a:link,
a:hover,
a:active {
  text-decoration: none;
  outline: none !important;
  color: inherit;
}
.clearfix {
  /**zoom:1*/
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
.d_flex {
  display: flex;
}
.clearfix:after {
  display: block;
  content: "";
  clear: both;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 90%;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
*:focus {
  outline: none;
}
del {
  text-decoration: line-through;
  color: #aeaeae;
}
.blindw {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

@-webkit-keyframes skeleton-gradient {
  0% {
    background-color: rgba(165, 165, 165, 0.1);
  }
  50% {
    background-color: rgba(165, 165, 165, 0.3);
  }
  100% {
    background-color: rgba(165, 165, 165, 0.1);
  }
}

@keyframes skeleton-line {
  100% {
    background-position: -100% 0;
  }
}

/*layout*/
html {
  margin: 0 auto;
}
#mWrap {
  position: relative;
}
.darkmask {
  position: absolute;
  z-index: 9998;
  background: #000;
  left: 0;
  top: 0;
}

/* Noto Sans KR Settings */

.mt10 {
  margin-top: 10px;
}
.mb0 {
  margin-bottom: 0px !important;
}
.mb30 {
  margin-bottom: 30px;
}

/* responsive */
/* [class*="show-"] { display: none !important; }  */
.show-1200,
.show-1024,
.show-992,
.show-768,
.show-640,
.show-576,
.show-460 {
  display: none !important;
}

@media all and (max-width: 1200px) {
  /* responsive */
  .hide-1200,
  br.hide-1200 {
    display: none !important;
  }
  .show-1200 {
    display: inherit !important;
  }
  .show-1200.block,
  br.show-1200 {
    display: block !important;
  }
  .show-1200.flex {
    display: flex !important;
  }
}

@media screen and (max-width: 1024px) {
  /* responsive */
  .show-1024 {
    display: inherit !important;
  }
  .show-1024.block,
  br.show-1024 {
    display: block !important;
  }
  .show-1024.flex {
    display: flex !important;
  }
  .hide-1024,
  br.hide-1024 {
    display: none !important;
  }
}

@media screen and (max-width: 992px) {
  /* responsive */
  .show-992 {
    display: inherit !important;
  }
  .show-992.block,
  br.show-992 {
    display: block !important;
  }
  .show-992.flex {
    display: flex !important;
  }
  .hide-992,
  br.hide-992 {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* responsive */
  .show-768 {
    display: inherit !important;
  }
  .show-768.block,
  br.show-768 {
    display: block !important;
  }
  .show-768.flex {
    display: flex !important;
  }
  .hide-768,
  br.hide-768 {
    display: none !important;
  }
}

@media screen and (max-width: 640px) {
  /* responsive */
  .show-640 {
    display: inherit !important;
  }
  .show-640.block,
  br.show-640 {
    display: block !important;
  }
  .show-640.flex {
    display: flex !important;
  }
  .hide-640,
  br.hide-640 {
    display: none !important;
  }
}

@media all and (max-width: 576px) {
  /* responsive */
  .show-576 {
    display: inherit !important;
  }
  .show-576.block,
  br.show-576 {
    display: block !important;
  }
  .show-576.flex {
    display: flex !important;
  }
  .hide-576,
  br.hide-576 {
    display: none !important;
  }
}

@media all and (max-width: 460px) {
  /* responsive */
  .show-460 {
    display: inherit !important;
  }
  .show-460.block,
  br.show-460 {
    display: block !important;
  }
  .show-460.flex {
    display: flex !important;
  }
  .hide-460,
  br.hide-460 {
    display: none !important;
  }
}

🧩 src/components/MainSlide.vue

<template>
  <div class="main-slide">
    <div class="slide-banner">[ 여기에 슬라이드 배너가 들어갑니다 ]</div>
  </div>
</template>

<style scoped>
.main-slide {
  background: #eaf3ff;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
</style>

🧩 src/components/Header.vue

<template>
  <header class="header">
    <div class="top-bar">
      <div class="top-inner">
        <div class="hcode_wrap">
          <router-link to="/" class="on">공무원</router-link>
          <router-link to="/sobang">소방</router-link>
        </div>
        <div class="login_wrap">
          <div class="util">
            <span class="day">D-100</span>
            <router-link to="/academy" class="link">학원 전체보기</router-link>
            <router-link to="/mypage/playground" class="link">플레이그라운드</router-link>
            <router-link to="/help/faq/" class="link">학습지원센터</router-link>
            <router-link to="/my_study" class="link">내 강의실</router-link>
            <router-link to="/mypage" class="link">MY</router-link>
          </div>
          <div class="auth">
            <router-link to="/login" class="login">로그인</router-link>
            <router-link to="/register" class="join">회원가입</router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="gnb-area">
      <div class="gnb">
        <h1 class="logo">
          <router-link to="/">
            <img src="https://img.megagong.net/s/gong/logo_nextgong.png" alt="넥스트공무원" />
          </router-link>
        </h1>
        <nav class="nav">
          <ul>
            <li><router-link to="/pass">넥스트패스</router-link></li>
            <li><router-link to="/vod/vod_chr_list">수강신청</router-link></li>
            <li><router-link to="/teacher">선생님</router-link></li>
            <li><router-link to="/fullservice">합격예측 풀서비스</router-link></li>
            <li><router-link to="/lab">수험정보</router-link></li>
            <li><router-link to="/event">이벤트</router-link></li>
            <li><router-link to="/book">교재</router-link></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "AppHeader",
};
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid #ddd;
  background-color: white;

  .top-inner {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

  .hcode_wrap {
    display: flex;
    gap: 10px;
    a.on {
      color: #0055ff;
    }
  }

  .login_wrap {
    display: flex;
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 10px 20px;
    background: #f8f8f8;
    color: #555;

    .util {
      display: flex;
      gap: 12px;

      .day {
        color: #0055ff;
        font-weight: bold;
      }

      .link {
        color: #333;
        text-decoration: none;
      }
    }

    .auth {
      display: flex;
      gap: 12px;

      a {
        color: #333;
        text-decoration: none;
      }
    }
  }
  .gnb-area {
    max-width: 1200px;
    margin: 0 auto;
    .gnb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 0px;

      .logo img {
        height: 28px;
      }

      .nav ul {
        display: flex;
        gap: 24px;

        li a {
          text-decoration: none;
          color: #111;
          font-weight: 500;
          font-size: 15px;

          &:hover {
            color: #0055ff;
          }
        }
      }
    }
  }
}
</style>

🧩 src/components/Footer.vue

<template>
  <footer class="footer">
    <div class="footer-inner">
      <ul class="footer-links">
        <li><a href="#">회사소개</a></li>
        <li><a href="#">이용약관</a></li>
        <li><a href="#">개인정보처리방침</a></li>
        <li><a href="#">고객센터</a></li>
      </ul>
      <div class="footer-info">
        <p>
          서울특별시 구로구 경인로 662, 타워동 31층(신도림동, 디큐브시티) ㈜넥스트스터디 대표이사
          윤훈희 개인정보보호책임자 윤훈희 (keeper@megagong.net)
        </p>
        <p>
          메가스터디교육 원격평생교육시설(제434호) (주)넥스트스터디 사업자등록번호 : 561-81-03379
          통신판매업신고번호 : 제2025-서울구로-1079호
        </p>
        <p>신고기관명 : 서울시 강남구 호스팅제공자 : (주)케이티</p>
        <p class="copyright">Copyright © nextstudy.co.,Ltd. All rights reserved.</p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: "AppFooter",
};
</script>

<style scoped lang="scss">
.footer {
  background-color: #f5f6f7;
  border-top: 1px solid #ddd;
  font-size: 13px;
  color: #666;

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 0;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;

    li {
      list-style: none;

      a {
        color: #444;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  .footer-info {
    line-height: 1.6;
  }

  .copyright {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
  }
}
</style>

🧩 src/components/LeftQuickMenu.vue

<template>
  <div class="left-quickmenu">
    <div>[ 좌측 사이드 고정 메뉴 ]</div>
  </div>
</template>

🧩 src/components/RightQuickMenu.vue

<template>
  <div class="right-quickmenu">
    <div>[ 우측 사이드 고정 메뉴 ]</div>
  </div>
</template>

🧩 src/components/StickyPanel.vue

<template>
  <div class="sticky-panel">
    <div>[ 우측 콘텐츠 고정 ]</div>
  </div>
</template>

🧩 src/components/MainTabs.vue

<template>
  <div class="main-tabs">
    <div class="slide-banner">[ 탭 + 슬라이드 섹션 ]</div>
  </div>
</template>

🧩 src/App.vue

<template>
  <div>
    <MainHeader />
    <router-view />
    <MainFooter />
  </div>
</template>

<script>
import MainHeader from "@/components/Header.vue";
import MainFooter from "@/components/Footer.vue";

export default {
  components: {
    MainHeader,
    MainFooter,
  },
};
</script>

정상적으로 잘 따라왔다면 위와 같은 화면을 확인하실 수 있습니다.

저장소

GitHub - heroyooi/vue2-megagong at ch2

📘 과제

1. 상단 메인 슬라이드 (MainVisual.vue) 완성
   1. Slick or Swiper 로 구현