StartMenuMate.vue 파일 정리

1. StartMenuMate.vue 화면 구성

2.StartMenuMate.vue 기초구성

<template>
    <div class="StartMenuMate">
        <AdBanner/>
        <div class="StartMenuMate_welcome_container">
            <span class="StartMenuMate_welcome_text"> 메뉴메이트에 오신걸 환영합니다</span>
            <span class="StartMenuMate_welcome_slogan">더 쉬운 주문, 더 쉬운 매출 관리</span>
            <button type="button" class="start_button">시작하기</button>
        </div>
      
    </div>
</template>
<script>
import Adbanner from '.AdBanner.vue';
export default {
    name:'StartMenuMate',

    components:{
        AdBanner
    }
    
}
</script>
<style>
    
</style>

• • • AdBanner.vue 컴포넌트 포함 절차
      1. 컴포넌트 파일 생성
      2. 컴포넌트 이름 설정 (선택 사항)
      3. 포함할 컴포넌트 import 처리
      4. export default 안에 components 객체에 import한 컴포넌트 포함

---

3.StartMenuMate.vue 파일 스타일

.StartMenuMate_welcome_container{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.StartMenuMate_welcome_text{
    font-size: 35px;
    margin-top: 30px;

}
.StartMenuMate_welcome_slogan{
    font-size: 25px;
    margin-top: 30px;
}
.start_button{
    background-color:#DF3A01;
    color: white;
    padding: 15px 30px;
    font-size: 25px;
    border: none;
    border-radius: 5px;
    margin-top:30px;
    cursor:pointer;
    transition: background-color 0.3s ease;
}

.start_button:hover{
    background-color:#FF4000;
}

1. .StartMenuMate_welcome_container

컨테이너의 레이아웃과 스타일 정의.

• display: flex;: 컨테이너를 Flexbox로 설정하여 자식 요소들을 유연하게 배치.
  • 다른 옵션:
    • block: 블록 레벨 요소로 설정.
    • inline: 인라인 레벨 요소로 설정.
    • grid: CSS Grid 컨테이너로 설정하여 2차원 레이아웃 사용.
• flex-direction: column;: 자식 요소들을 세로 방향으로 나열.
  • 다른 옵션:
    • row: 자식 요소들을 가로 방향으로 나열.
    • row-reverse: 자식 요소들을 가로 방향으로 역순 나열.
    • column-reverse: 자식 요소들을 세로 방향으로 역순 나열.
• align-items: center;: 자식 요소들을 수평 중앙에 정렬.
  • 다른 옵션:
    • flex-start: 요소들을 시작점에 정렬.
    • flex-end: 요소들을 끝점에 정렬.
    • baseline: 자식 요소의 텍스트 기준선을 기준으로 정렬.
    • stretch: 자식 요소들을 컨테이너 높이에 맞게 늘림.

2. .StartMenuMate_welcome_text

환영 텍스트의 스타일 정의.

• font-size: 35px;: 텍스트 크기를 35픽셀로 설정.
  • 다른 옵션:
    • em, rem, %: 다른 단위를 사용하여 상대적인 크기로 설정.
    • larger, smaller: 기본 폰트 크기를 기준으로 상대적인 크기 설정.
• margin-top: 30px;: 위쪽 여백을 30픽셀로 설정.
  • 다른 옵션:
    • 0px: 위쪽 여백 없음.
    • auto: 자동으로 여백 설정.
    • 10%: 부모 요소의 높이에 비례한 여백 설정.

3. .StartMenuMate_welcome_slogan

슬로건 텍스트의 스타일 정의.

• font-size: 25px;: 텍스트 크기를 25픽셀로 설정.
  • 다른 옵션:
    • em, rem, %: 다른 단위를 사용하여 상대적인 크기로 설정.
    • larger, smaller: 기본 폰트 크기를 기준으로 상대적인 크기 설정.
• margin-top: 30px;: 위쪽 여백을 30픽셀로 설정.
  • 다른 옵션:
    • 0px: 위쪽 여백 없음.
    • auto: 자동으로 여백 설정.
    • 10%: 부모 요소의 높이에 비례한 여백 설정.

4. .start_button

시작 버튼의 스타일 정의.

• background-color: #DF3A01;: 배경색을 주황색으로 설정.
  • 다른 옵션:
    • 모든 색상 이름 또는 HEX 값 사용 가능 (예: blue, #0000FF).
    • rgba(223, 58, 1, 0.5): 투명도를 포함한 색상 설정.
• color: white;: 텍스트 색상을 흰색으로 설정.
  • 다른 옵션:
    • 모든 색상 이름 또는 HEX 값 사용 가능 (예: black, #FFFFFF).
    • rgba(255, 255, 255, 0.7): 투명도를 포함한 색상 설정.
• padding: 15px 30px;: 텍스트 주변에 세로 15픽셀, 가로 30픽셀의 내부 여백 설정.
  • 다른 옵션:
    • 단일 값: 10px (모든 방향에 10픽셀 여백).
    • 축약형: 10px 20px (상하 10픽셀, 좌우 20픽셀).
    • 개별 설정: padding-top, padding-right, padding-bottom, padding-left.
• font-size: 25px;: 버튼 텍스트 크기를 25픽셀로 설정.
  • 다른 옵션:
    • em, rem, %: 다른 단위를 사용하여 상대적인 크기로 설정.
• border: none;: 테두리를 제거하여 버튼을 매끄럽게 설정.
  • 다른 옵션:
    • 1px solid black;: 단색의 1픽셀 테두리 설정.
    • 2px dashed red;: 빨간색 점선 테두리 설정.
• border-radius: 5px;: 모서리를 둥글게 설정.
  • 다른 옵션:
    • 0px: 모서리를 둥글게 하지 않음.
    • 50%: 원형으로 설정 (아이콘 등에서 사용).
• margin-top: 30px;: 위쪽 여백을 30픽셀로 설정.
  • 다른 옵션:
    • 0px: 위쪽 여백 없음.
    • auto: 자동으로 여백 설정.
    • 10%: 부모 요소의 높이에 비례한 여백 설정.
• cursor: pointer;: 마우스를 올렸을 때 커서를 포인터로 변경.
  • 다른 옵션:
    • default: 기본 화살표 커서.
    • text: 텍스트 입력 커서 (I-beam).
• transition: background-color 0.3s ease;: 배경색이 0.3초 동안 부드럽게 전환되도록 설정.
  • 다른 옵션:
    • all 0.5s linear: 모든 속성을 0.5초 동안 선형으로 전환.
    • transform 0.2s ease-in-out: 변형 속성을 0.2초 동안 부드럽게 전환.

5. .start_button:hover

버튼에 마우스를 올렸을 때의 스타일 정의.

• background-color: #FF4000;: 마우스를 올렸을 때 배경색을 진한 주황색으로 변경.
  • 다른 옵션:
    • 모든 색상 이름 또는 HEX 값 사용 가능.
    • rgba(255, 64, 0, 0.8): 투명도를 포함한 색상 설정.
    •  

---

MainPage에 StartMenuMate를 라우터로 추가

1. router.js 에 StartMenuMate 컴포넌트 Import

1. • StartMenuMate.vue 컴포넌트를 라우터에서 사용할 수 있도록 router.js 파일 상단에 임포트합니다.

 

2. 네스티드 라우트 설정

MainPage내부에 사용할 컴포넌트 StartMenuMate를 추가하기

Children 배열 사용

import { createWebHistory, createRouter } from "vue-router";
import MainPage from "./components/Home/MainPage.vue";
import LoginPage from "./components/Home/LoginPage.vue";
import SignupPage from "./components/Home/SignupPage.vue";
import StartMenuMate from "./components/Home/innerComponents/StartMenuMate.vue";

const routes = [
  {
    path:'/',
    component:MainPage,
    children:[
      {
      path:'',
      component:StartMenuMate,
      },
    ]
  },
  {
    path:'/login',
    component:LoginPage,
  },
  { path:'/signup',
    component:SignupPage,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;