본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/port2023

26. 포트폴리오 사이트 만들기 : Vue-Site : 사이트 영역

by @webstoryboy 2023. 7. 31.
Tutorial/portfolio

포트폴리오 사이트 만들기 - Vue

by @webs 2023. 08. 01.
06
포트폴리오 사이트 만들기 : 사이트 영역
난이도 중간
소스 다운로드
완성 화면 완성 코드 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 오늘은 인트로 컴퍼넌트를 작업해보겠습니다. 소스를 직접 치고 만드는 것이 아니라, 기존에 소스를 활용해서 만드는 것이기 때문에 비교적 빨리 만들 수 있을겁니다. 그럼 오늘도 시작해볼까요!! 🥶

포트폴리오 사이트 만들기

VITE SITE

  • 1. 셋팅하기
    • 1_1. vite 설치하기
    • 1_2. vite 폴더 정리하기
    • 1_3. gsap/lenis 설치하기
    • 1_4. git 연동하기
  • 2. 레이아웃
    • 2.1 레이아웃 구조 만들기
    • 2.2 메인 레이아웃 구조 만들기
    • 2.3 CSS 셋팅하기
    • 2.4 JavaScript 셋팅하기
  • 3. 헤더 영역
    • 3.1 헤더 구조 잡기
    • 3.2 헤더 디자인 설정
    • 3.3 반응형 작업하기
    • 3.4 메뉴 자바스크립트 설정
  • 4. 인트로 영역
    • 4.1 인트로 구조 잡기
    • 4.2 인트로 디자인 설정
    • 4.3 반응형 작업하기
  • 5. 스킬 영역
    • 5.1 스킬 구조 잡기
    • 5.2 스킬 디자인 설정
    • 5.3 반응형 작업하기
  • 6. 사이트 영역
    • 6.1 사이트 구조 잡기
    • 6.2 사이트 디자인 설정
    • 6.3 반응형 작업하기
  • 7. 포트폴리오 영역
    • 7.1 사이트 구조 잡기
    • 7.2 사이트 디자인 설정
    • 7.3 반응형 작업하기
    • 7.4 스크립트 작업하기
  • 8. 연락처 영역
    • 8.1 연락처 구조 잡기
    • 8.2 연락처 디자인 설정
    • 8.3 반응형 작업하기
  • 9. 푸터 영역
    • 9.1 푸터 구조 잡기
    • 9.2 푸터 디자인 설정
    • 9.3 반응형 작업하기
  • 10. 마무리
    • 10.1 스무스 효과주기
    • 10.2 링크 연결하기
    • 10.3 netlify에 배포하기

REACT SITE

  • 1. 셋팅하기
    • 1_1. React 설치하기
    • 1_2. React 폴더 정리하기
    • 1_3. 라이브러리 설치하기
    • 1_4. git 연동하기
  • 2. 라우팅 및 컴퍼넌트
    • 2_1. 라우팅 설정하기
    • 2_2. 컴퍼넌트 설정하기
    • 2_3. SCSS 설정하기
  • 3. 헤더 영역
    • 3_1. 헤더 구조잡기
    • 3_2. 헤더 디자인 설정
    • 3_3. 헤더 데이터 작업
    • 3_4. 헤더 토글 메뉴 작업하기
  • 4. 인트로 영역
    • 4_1. 인트로 구조잡기
    • 4_2. 인트로 디자인 설정
    • 4_3. 인트로 데이터 작업
  • 5. 스킬 영역
    • 5_1. 스킬 구조잡기
    • 5_2. 스킬 디자인 설정
    • 5_3. 스킬 데이터 작업
  • 6. 사이트 영역
    • 6_1. 사이트 구조잡기
    • 6_2. 사이트 디자인 설정
    • 6_3. 사이트 데이터 작업
  • 7. 포트폴리오 영역
    • 7_1. 포트폴리오 구조잡기
    • 7_2. 포트폴리오 디자인 설정
    • 7_3. 포트폴리오 데이터 작업
  • 8. 연락처 영역
    • 8_1. 연락처 구조잡기
    • 8_2. 연락처 디자인 설정
    • 8_3. 연락처 데이터 작업
  • 9. 푸터 영역
    • 9_1. 푸터 구조잡기
    • 9_2. 푸터 디자인 설정
    • 9_3. 푸터 데이터 작업
  • 10. 마무리
    • 10_1. 데이터 통합하기
    • 10_2. 스무스 효과 넣어주기
    • 10_3. 가로모드 구현하기
    • 10_4. netlify에 배포하기

VUE SITE

  • 1. 셋팅하기
    • 1_1. Vue 설치하기
    • 1_2. Vue 폴더 정리하기
    • 1_3. 라이브러리 설치하기
    • 1_4. git 연동하기
  • 2. 라우팅 및 컴퍼넌트
    • 2_1. 라우팅 설정하기
    • 2_2. 컴퍼넌트 설정하기
    • 2_3. SCSS 설정하기
  • 3. 헤더 영역
    • 3_1. 헤더 구조잡기
    • 3_2. 헤더 디자인 설정
    • 3_3. 헤더 데이터 작업
    • 3_4. 헤더 토글 메뉴 작업하기
  • 4. 인트로 영역
    • 4_1. 인트로 구조잡기
    • 4_2. 인트로 디자인 설정
    • 4_3. 인트로 데이터 작업
  • 5. 스킬 영역
    • 5_1. 스킬 구조잡기
    • 5_2. 스킬 디자인 설정
    • 5_3. 스킬 데이터 작업
  • 6. 사이트 영역
    • 6_1. 사이트 구조잡기
    • 6_2. 사이트 디자인 설정
    • 6_3. 사이트 데이터 작업

6. 사이트 영역

6.1 사이트 구조잡기

기존 소스를 뷰 소스로 변경해보겠습니다. 

<template>
    <section id="site">
        <div class="site__inner">
            <h2 class="site__title">
                Site coding <em>나의 작업물</em>
            </h2>
            <div class="site__wrap">
                <article class="site__item s1">
                    <span class="num">1.</span>
                    <div class="text">
                        <div>Make</div>
                        <div>site compliant with</div>
                        <div>webstandard</div>
                    </div>
                    <h3 class="title">웹 표준을 준수한 사이트 제작</h3>
                    <div class="btn">
                        <a href="https://github.com/webstoryboy/port2023-vite">code</a>
                        <a href="https://port2023-vite.netlify.app/">view</a>
                    </div>
                    <div class="info">
                        <span>site coding</span>
                        <span>production period : two days</span>
                        <span>use stack : html5/css3, CSS Variable, Vite</span>
                    </div>
                </article>
                <article class="site__item s2">
                    <span class="num">2.</span>
                    <div class="text">
                        <div>Make</div>
                        <div>site compliant with</div>
                        <div>react.js</div>
                    </div>
                    <h3 class="title">리액트를 이용한 사이트 제작</h3>
                    <div class="btn">
                        <a href="https://github.com/webstoryboy/port2023-react">code</a>
                        <a href="https://port2023-react.netlify.app/">view</a>
                    </div>
                    <div class="info">
                        <span>site coding</span>
                        <span>production period : two days</span>
                        <span>use stack : HTML5/CSS3, CSS Variable, Vite</span>
                    </div>
                </article>
                <article class="site__item s3">
                    <span class="num">3.</span>
                    <div class="text">
                        <div>Make</div>
                        <div>site compliant with</div>
                        <div>vue.js</div>
                    </div>
                    <h3 class="title">뷰를 이용한 사이트 제작</h3>
                    <div class="btn">
                        <a href="https://github.com/webstoryboy/port2023-vue">code</a>
                        <a href="https://port2023-vue.netlify.app/">view</a>
                    </div>
                    <div class="info">
                        <span>site coding</span>
                        <span>production period : two days</span>
                        <span>use stack : vue.js, CSS Variable, vite</span>
                    </div>
                </article>
                <article class="site__item s4">
                    <span class="num">4.</span>
                    <div class="text">
                        <div>Make</div>
                        <div>site compliant with</div>
                        <div>next.js</div>
                    </div>
                    <h3>넥스트를 이용한 사이트 제작</h3>
                    <div class="btn">
                        <a href="https://github.com/webstoryboy/port2023-next">code</a>
                        <a href="https://port2023-next.netlify.app/">view</a>
                    </div>
                    <div class="info">
                        <span>site coding</span>
                        <span>production period : two days</span>
                        <span>use stack : next.js, CSS Variable, Vite</span>
                    </div>
                </article>
            </div>
        </div>
    </section>
</template>

6.2 사이트 디자인 설정

CSS를 SCSS로 변형하여 작업하였습니다. 

<style lang="scss" scoped>
@import "@/assets/scss/mixin";

.site__inner {
    padding: 16px;

    .site__title  {
        position: sticky;
        top: 70px;
        left: 0;
        width: 70%;
        height: 5vw;
        font-size: 4vw;
        font-weight: 900;
        line-height: 1.6;
        font-family: var(--mainKor-font);
        text-transform: uppercase;
        color: var(--black100);
        border-bottom: 0.4vw solid var(--black100);
        margin-bottom: 100px;

        @media (max-width: 800px){ 
            width: 100%;
            margin-bottom: 10vw;
            font-size: 30px;
            height: auto;
            top: 68px;
            z-index: 1000;
            background-color: var(--mainBg-color);
        }

        em {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 2;
        }
    }
    .site__wrap {
        .site__item {
            height: 70vh;
            @include flex-center;
            flex-direction: column;
            position: sticky;
            left: 0;

            &:nth-child(1) {
                background-color: var(--subBg100);
                top: 180px;

                @media (max-width: 800px){ 
                    top: 140px;
                }
            }
            &:nth-child(2) {
                background-color: var(--subBg200);
                top: 200px;

                @media (max-width: 800px){ 
                    top: 160px;
                }
            }
            &:nth-child(3) {
                background-color: var(--subBg300);
                top: 220px;

                @media (max-width: 800px){ 
                    top: 180px;
                }
            }
            &:nth-child(4) {
                background-color: var(--subBg400);
                top: 240px;

                @media (max-width: 800px){ 
                    top: 200px;
                }
            }
            .num {
                font-size: 5vw;
                line-height: 1;
                font-weight: 900;
                font-family: var(--mainNum-font);
                position: absolute;
                left: 1vw;
                top: 1vw;

                @media (max-width: 800px){ 
                    font-size: 80px;
                    left: 20px;
                    top: 20px;
                }
            }
            .text {
                text-align: center;
                margin-bottom: 1rem;

                > div {
                    font-size: 3vw;
                    line-height: 1;
                    font-weight: 900;
                    text-transform: uppercase;
                    text-decoration: underline;
                    font-family: var(--mainEng-font);

                    @media (max-width: 800px){ 
                        font-size: 26px;
                    }
                }
            }
            .title {
                font-family: var(--mainKor-font);
                margin-bottom: 1rem;
            }
            .btn {
                a {
                    text-decoration: underline;
                    text-transform: uppercase;
                    color: var(--black200);
                    font-size: 1rem;
                    transition: all 0.3s;
                    margin: 0 2px;

                    &:hover {
                        color: var(--black);
                    }
                }
            }
            .info {
                position: absolute;
                left: 0;
                bottom: 3%;
                width: 98%;
                margin-left: 1%;
                border-top: 1px solid var(--black);
                border-bottom: 1px solid var(--black);
                display: flex;
                justify-content: space-between;

                @media (max-width: 800px){ 
                    flex-direction: column;
                    width: 90%;
                    margin-left: 5%;
                    padding: 5px 0;
                }

                span {
                    font-family: var(--mainKor-font);
                    font-size: 12px;
                    padding: 3px 0;
                    text-transform: uppercase;
                }
            }
        }
    }
}
</style>

6.3 사이트 데이터 작업

핵심 데이터는 따로 작업하였습니다. 

export const siteText = [
    {
        text: ["make", "site compliant with", "webstandard"],
        title: "비트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-vite",
        view: "https://port2023-vite.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, CSS Variable, Vite",
        ],
    },
    {
        text: ["make", "site compliant with", "react.js"],
        title: "리액트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-react",
        view: "https://port2023-react.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, CSS Variable, Vite",
        ],
    },
    {
        text: ["make", "site compliant with", "vue.js"],
        title: "뷰를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-vue",
        view: "https://port2023-vue.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, Scss Variable, vue",
        ],
    },
    {
        text: ["make", "site compliant with", "next.js"],
        title: "넥스트를 이용한 사이트 제작",
        code: "https://github.com/webstoryboy/port2023-next",
        view: "https://port2023-next.netlify.app",
        info: [
            "site coding",
            "production period : two days",
            "use stack : HTML5/CSS3, Scss Variable, next.js",
        ],
    },
];

해당 부분만 변경해주었습니다. 

<script setup>
import { siteText } from "@/constants/index";
</script>

<template>
    <section id="site">
        <div class="site__inner">
            <h2 class="site__title">
                Site coding <em>나의 작업물</em>
            </h2>
            <div class="site__wrap">
                <div class="site__item" v-for="(site, key) in siteText" :key="key">
                    <span class="num">{{ key + 1 }}.</span>
                    <div class="text">
                        <div>{{ site.text[0] }}</div>
                        <div>{{ site.text[1] }}</div>
                        <div>{{ site.text[2] }}</div>
                    </div>
                    <h3>
                        {{ site.title }}
                    </h3>
                    <div class="btn">
                        <a :href="site.code">code</a>
                        <a :href="site.view">view</a>
                    </div>
                    <div class="info">
                        <span>{{ site.info[0] }}</span>
                        <span>{{ site.info[1] }}</span>
                        <span>{{ site.info[2] }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

3. 마무리

사이트 섹션도 가볍게 성공했습니다. 수고하셨습니다. 🤥

완성 화면 소스 보기 영상 보기

예제 목록

관련글

댓글

티스토리툴바