[실습] 뷰(Vue)로 웹 어플리케이션 레이아웃(Web layout) 구현하기

제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 

제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.

 

혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!

---

Vue.js 개발하기 전 목표를 잡아두는 것이 중요합니다.

오늘의 목표는 "기본적인 웹 어플리케이션 구조(Web aApplication Layout)을 만들어보기!" 입니다.

 

---

웹 어플리케이션 구조/레이아웃(Web Layout) 구현하기

웹 어플리케이션 레이아웃이 정말 다양한 종류가 있지만 일반적으로 관리자가 사용하는 웹 홈페이지 레이아웃으로 만들어보려고 합니다.

 

사전 준비

Vue 프로젝트가 생성되어 있어야 합니다. 

혹시라도 뷰 프로젝트가 생성되어 있지 않으신 분들은 아래 링크를 참조해서 뷰 프로젝트를 생성하시면 됩니다!

https://logs-jejustone.tistory.com/5

[Vue] VSCode로 Vue.js 프로젝트 생성 및 구동하기

 

파일 구조

웹 어플리케이션의 기본적인 레이아웃을 구현하기 위해서 수정하거나 새로 생성해야하는 파일은 총 5개입니다.

기본적으로 main.js와 index.html, 마지막으로 App.vue는 파일이 생성되어 있습니다.

위 이미지에서 파란색으로 표시한 파일은 수정할 파일들이고 초록색으로 표시한 파일들은 신규 추가할 파일입니다.

신규 추가할 파일인 "The%.vue" 파일은 src 하위 component 폴더 하위에 생성합니다.

 

작업할 파일에 대해 간략한 설명은 아래를 참고하시면 됩니다. 

• App.vue: 최상위 컴포넌트를 관리하는 파일
• TheHeader.vue: Web Header 영역을 정의하는 파일
• TheSidebar.vue: Web Sidebar이자 Menu 영역을 정의하는 파일
• TheContent.vue: Web Content 영역으로 Sidebar에 해당하는 콘텐츠를 정의하는 파일
• TheFooter.vue: Web Footer 영역을 정의하는 파일

 

결과 이미지

구현하기에 앞서 본 글을 따라하시면 아래와 같은 레이아웃을 구현하실 수 있습니다.

• 각 영역을 가시적으로 구분지을 수 있도록 영역 별로 배경색을 설정하였습니다.
• 중간의 Menu와 Content(Home) 영역이 가로 너비에 비례하게 영역이 바뀌도록 구현하였습니다.

좌: 가로가 짧은 화면 우: 가로가 긴 화면

 

소스 코드

src\component\TheHeader.vue

위 결과 이미지에서 'Header'로 상단부에 위치한 영역을 정의하고 관리하는 코드를 구현합니다.

본 글에서는 기본적인 웹 레이아웃에 대한 구조만 잡는 것을 목표로 하기 때문에 상세 구현은 제외합니다.

<!-- TheHeader.vue -->

<template>
    <header>
        Header
    </header>
</template>

<script>
export default {};
</script>

<style scoped>
header {
    background-color: red;
}
</style>

 

src\component\TheFooter.vue

위 결과 이미지에서 'Footer'로 하단부에 위치한 영역을 정의하고 관리하는 코드를 구현합니다.

본 글에서는 기본적인 웹 레이아웃에 대한 구조만 잡는 것을 목표로 하기 때문에 상세 구현은 제외합니다.

<!-- TheFooter.vue -->

<template>
    <footer>
        Footer
    </footer>
</template>

<script>
export default {};
</script>

<style scoped>
footer {
    background-color: red;
}
</style>

 

 

src\component\TheSidebar.vue

위 결과 이미지에서 'Menu'로 좌측에 위치한 메뉴이자 사이드바 영역을 정의하고 관리하는 코드를 구현합니다.

본 글에서는 기본적인 웹 레이아웃에 대한 구조만 잡는 것을 목표로 하기 때문에 상세 구현은 제외합니다.

 

앞서 언급한 브라우저의 너비에 비례하여 영역의 크기가 변경되도록 CSS 정의 영역인 <style>에 구현하였습니다.

취상위 Element인 div에 float와 width로 해당 영역을 좌측에 위치시키고, 브라우저의 너비에 15%만 영역으로 잡도록 구현하였습니다.

<!-- TheSidebar.vue -->

<template>
    <div>
        Menu
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
div {
    background-color: green;
    float: left;
    height: 100%;
    width: 15%;
}
</style>

 

src\component\TheContent.vue

위 결과 이미지에서 'Content'로 우측에 위치한 콘텐츠가 보여지는 영역을 정의하고 관리하는 코드를 구현합니다.

본 글에서는 기본적인 웹 레이아웃에 대한 구조만 잡는 것을 목표로 하기 때문에 상세 구현은 제외합니다.

 

앞서 언급한 브라우저의 너비에 비례하여 영역의 크기가 변경되도록 CSS 정의 영역인 <style>에 구현하였습니다.

취상위 Element인 div에 float와 width로 해당 영역을 우측에 위치시키고, 브라우저의 너비에 85%만 영역으로 잡도록 구현하였습니다.

<!-- TheContent.vue -->

<template>
    <div>
        content
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
div {
    background-color: yellow;
    float: right;
    height: 100%;
    width: 85%;
}
</style>

 

src\App.vue

신규 추가한 src\component 폴더 하위 4개의 파일인 'TheHeader.vue', 'TheFooter.vue', 'TheSidebar.vue', 'TheContent.vue'를 최상위 컴포넌트인 App.vue에 연결하는 코드를 구현합니다.

<!-- App.vue -->

<template>
  <div id="wrap">
    <Header />

    <div id="container">
      <Sidebar />
      <Content />
    </div>
    
    <Footer />
  </div>
</template>

<script>
import Header from "./components/TheHeader.vue";
import Sidebar from "./components/TheSidebar.vue";
import Content from "./components/TheContent.vue";
import Footer from "./components/TheFooter.vue";

export default {
  name: 'App',
  components: {
    Header
  , Sidebar
  , Content
  , Footer
  }
};
</script>

<style>
* {
  box-sizing: border-box;
  overflow: hidden;
}

#wrap {
  height: 100vh;
}

#wrap Header {
  height: 10%;
}

#container {
  height: 80%;
}

#wrap Footer {
  height: 10%;
}
</style>

• <script>: 신규 구현한 The*.vue 파일인 4개의 파일에 대해서 App.vue에서 사용할 수 있도록 import하고 뷰 인스턴스의 컴포넌트로 정의합니다.
• <template>: 뷰 인스턴스에 정의한 컴포넌트를 배치할 영역을 정의합니다.
  • 크게 세로 기준으로 Header, Footer 그리고 Header와 Footer 사이의 중간 영역으로 나뉘어집니다. 
  • 중간 영역에는 TheSidebar.vue와 TheContent.vue에서 정의한 float 속성이 정상적으로 동작하도록 div로 영역을 한 번 더 묶어줍니다. 
• <style>:
  • 구현 영역이 브라우저의 높이 전체를 차지할 수 있도록 최상위 Element의 height를 100vh로 설정합니다.  
  • header와 footer, 중간 영역의 크기가 브라우저의 크기에 맞게 자동으로 변경될 수 있도록 height를 %로 구현합니다. 

 

---

References

• HTML Tutorial: https://www.w3schools.com/html/default.asp

HTML Tutorial

• CSS Tutorial: https://www.w3schools.com/css/default.asp

CSS Tutorial

• Vue.js 공식 사이트: https://vuejs.org/guide/quick-start.html

Quick Start | Vue.js