페이지 구성

페이지 구성 튜토리얼

페이지 디렉토리

pages 디렉토리로 이동한 후 관리자, 소개, 포스트 페이지에 해당되는 디렉토리를 생성합니다.

$ cd client/pages
$ mkdir admin/ posts/ about/

About 페이지

client/pages/about/index.vue 파일을 생성한 후, About 콘텐츠를 구성합니다.

client/pages/about/index.vue
<template lang="pug">
.page-about
h1.page-title About
p 블로그 서비스 소개 페이지 입니다.
</template>

localhost:3000/about 경로로 접속하면 생성된 About 페이지가 정상적으로 화면에 표시됩니다.

Posts 페이지

client/pages/posts/index.vue 파일을 생성한 후, Posts 콘텐츠를 구성합니다.

client/pages/posts/index.vue
<template lang="pug">
.page-posts
h1.page-title Posts
p 블로그 포스트 목록이 표시되는 페이지입니다.
.post-list
</template>
<style lang="sass" scoped>
.post-list
display: flex
justify-content: center
align-items: center
</style>

localhost:3000/posts 경로로 접속하면 생성된 Posts 페이지가 정상적으로 화면에 표시됩니다.

싱글 포스트 페이지

client/pages/posts/_id/index.vue 파일을 생성한 후, 싱글 포스트 콘텐츠를 구성합니다.

client/pages/posts/_id/index.vue
<template lang="pug">
.page-single-post
section.post
h1.post-title 포스트 제목
.post-info
span.post-data 작성일자
span.post-author 작성자
p.post-content
| 포스트 내용
section.post-feedback
p
| 해당 포스트에 대해 궁금한 점이 있으면
| 로 문의주세요.
</template>

localhost:3000/posts/1 경로로 접속하면 생성된 싱글 포스트 페이지가 정상적으로 화면에 표시됩니다.

client/pages/posts/_id/index.vue 파일에 스타일 코드를 추가합니다.

client/pages/posts/_id/index.vue
<style lang="sass" scoped>
.page-single-post
padding: 30px
text-align: center
box-sizing: border-box
.post
width: 100%
.post-title
margin: 0
.post-info
display: flex
justify-content: center
align-items: center
flex-direction: column
box-sizing: inherit
border-bottom: 1px solid #ccc
padding: 10px
.post-data,
.post-author
margin: 0 10px
color: #9a9a9a
.post-feedback a
padding:
left: 5px
right: 5px
color: #46b784
text-decoration: none
transition: color 0.4s ease
&:hover,
&:active
color: darken(#46b784, 20%)
@media (min-width: 768px)
.post
width: 600px
margin: auto
.post-info
flex-direction: row