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

9. 포트폴리오 사이트 만들기 : Vite-Site : 푸터 영역

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

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

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

소개

이번 섹션은 포트폴리오에서 마지막 섹션입니다. 연락처에서 끝낼까 싶었는데. 조금 아쉬워서 전체 목록이나, 연락처 목록을 나타낼 수 있는 영역으로 꾸몄습니다. 이 영역은 세부적인 부분이나 표현하기 어려운 부분을 종합적으로 나타내면 좋을 거 같습니다.

인덱스

1. 포트폴리오 사이트 만들기 : 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 반응형 작업하기

9. 푸터 영역

9.1 푸터 구조 잡기

푸터 영역은 포트폴리오에 대한 세부적인 정보를 보여주기 좋습니다. 현재는 계획 중이지만 로그인과, 로그아웃, 게시판 등도 구성하여 영상을 만들 계획입니다. 반응이 좋거나 관심이 있는 분들은 댓글 달아주세요! 

<footer id="footer" role="contentinfo">
    <div class="footer__inner">
        <div class="footer__text">
            <span>webstoryboy</span>
            <span>© webs</span>
        </div>
        <div class="footer__info">
            <div class="left">
                <div class="title">
                    <a href="#">sign up</a>
                </div>
                <p>회원가입을 하시면 댓글과 게시판 기능을 이용할 수 있습니다.</p>
            </div>
            <div class="right">
                <h3>social</h3>
                <ul>
                    <li>
                        <a href="https://www.youtube.com/@Webstoryboy">youtube</a>
                        <em>유튜브에 오시면 더 많은 강의를 볼 수 있습니다.</em>
                    </li>
                    <li>
                        <a href="https://github.com/webstoryboy">github</a>
                        <em>깃헙에 들어오시면 모든 소스를 볼 수 있습니다.</em>
                    </li>
                    <li>
                        <a href="https://webstoryboy.co.kr">tistory</a>
                        <em>티스토리에 들어오시면 좋은 정보 볼 수 있습니다.</em>
                    </li>
                    <li>
                        <a href="https://www.youtube.com/playlist?list=PL4UVBBIc6giL8-6jvrClimg0cFL-Muqiq">gsap</a>
                        <em>GSAP를 공부하시고 오면 도움이 됩니다.</em>
                    </li>
                    <li>
                        <a href="https://github.com/webstoryboy/port2023-vite">vite</a>
                        <em>비트 강의도 곧 오픈 예정입니다.</em>
                    </li>
                    <li>
                        <a href="https://github.com/webstoryboy/port2023-react">react</a>
                        <em>리액트 강의도 곧 오픈 예정입니다.</em>
                    </li>
                    <li>
                        <a href="https://github.com/webstoryboy/port2023-vue">vue</a>
                        <em>뷰 강의도 곧 오픈 예정입니다.</em>
                    </li>
                    <li>
                        <a href="https://github.com/webstoryboy/port2023-next">next</a>
                        <em>넥스트 강의도 곧 오픈 예정입니다.</em>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer__right">
            © 2023 webstoryboy<br />
            이 사이트는 비트를 이용하여 제작하였습니다.
        </div>
    </div>
</footer>
<!-- //footer -->

9.2 푸터 디자인 설정

푸터 디자인도 특별한 건 없으니 통과하겠습니다. 

#footer {
    font-family: var(--mainKor-font);
}
.footer__inner {
    padding: 16px;
}
.footer__text {
    font-size: 12px;
    text-transform: uppercase;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    display: flex;
    justify-content: space-between;
}
.footer__info {
    display: flex;
    justify-content: space-between;
    margin: 100px 0;
}
.footer__info .left {
    width: 40%;
}
.footer__info .left .title {
    border-top: 2px solid var(--black);
    border-bottom: 1px solid var(--black);
    padding: 20px 0;
    text-transform: uppercase;
    font-weight: 700;
    background: url(../../img/arrow.svg) no-repeat right 20px;
    transition: all 0.3s;
}
.footer__info .left .title:hover {
    background-color: var(--black400);
    padding-left: 10px;
    border-color: transparent;
}
.footer__info .left .desc {
    font-size: 12px;
    padding-top: 20px;
}
.footer__info .right {
    width: 50%;
}
.footer__info .right h3 {
    border-top: 2px solid var(--black);
    font-size: 10px;
    margin-bottom: 40px;
    padding-top: 10px;
}
.footer__info .right ul {
    border-top: 1px solid var(--black);
}
.footer__info .right li {
    border-bottom: 1px solid var(--black);
}
.footer__info .right li a {
    padding: 14px 0;
    font-size: 14px;
    display: inline-block;
    text-transform: uppercase;
}
.footer__info .right li em {
    font-size: 12px;
    padding-left: 10px;
    opacity: 0;
    transition: all 0.3s;
}
.footer__info .right li:hover em {
    opacity: 1;
}
.footer__right {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 20px;
}

9.3 반응형 작업하기

@media (max-width: 800px){
    .footer__info {
        flex-direction: column;
    }
    .footer__info .left {
        width: 100%;
    }
    .footer__info .left .desc {
        margin-bottom: 40px;
    }
    .footer__info .right {
        width: 100%;
    }
}

3. 마무리

깃에 올려주고 마무리 하겠습니다. 

git add .
git commit -m "🤬 푸터 완료"
git push -u origin main

드디여 모든 섹션이 끝났습니다. 쉽지 않죠? 그래도 너무 실망하진 마세요! 아직 이 사이트를 3번 더 만들어야 합니다. 물론 소스는 복사해서 사용하겠지만, 잘 할 수 있을겁니다. 항상 모든지 마무리를 잘 해야 합니다. 이제 마지막으로 스므스 효과를 추가하여 조금 더 퀄리티를 높여주고, 배포까지 마무리 하겠습니다. 그럼 마지막 마무리까지 화이팅!! 🥰

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

예제 목록

관련글

댓글

티스토리툴바