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

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

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

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

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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 푸터 영역을 작업하겠습니다. 어려운 것이 없으니 바로 시작해보겠습니다.

인덱스

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. 푸터 데이터 작업

9. 푸터 영역

9_1. 푸터 구조잡기

기존 소스를 리액트 소스로 변경해보겠습니다. 

import React from "react";

const Footer = () => {
    return (
        <footer id="footer" role="contentinfo">
            <div className="footer__inner">
                <div className="footer__text">
                    <span>webstoryboy</span>
                    <span>© webs</span>
                </div>
                <div className="footer__info">
                    <div className="left">
                        <div className="title">
                            <a href="/">sign up</a>
                        </div>
                        <p>회원가입을 하시면 댓글과 게시판 기능을 이용할 수 있습니다.</p>
                    </div>
                    <div className="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 className="footer__right">
                    © 2023 webstoryboy<br />
                    이 사이트는 리액트를 이용하여 제작하였습니다.
                </div>
            </div>
        </footer>
    );
};

export default Footer;

9_2. 푸터 디자인 설정

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

#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;

        @media (max-width: 800px){
            flex-direction: column;
        }

        .left {
            width: 40%;

            @media (max-width: 800px){
                width: 100%;
            }

            .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;

                &:hover {
                    background-color: var(--black400);
                    padding-left: 10px;
                    border-color: transparent;  
                }
            }
            .desc {
                font-size: 12px;
                padding-top: 20px;

                @media (max-width: 800px){
                    margin-bottom: 40px;
                }
            }
        }

        .right {
            width: 50%;

            @media (max-width: 800px){
                width: 100%;
            }

            h3 {
                border-top: 2px solid var(--black);
                font-size: 10px;
                margin-bottom: 40px;
                padding-top: 10px;
            }
            ul {
                border-top: 1px solid var(--black);

                li {
                    border-bottom: 1px solid var(--black);

                    a {
                        padding: 14px 0;
                        font-size: 14px;
                        display: inline-block;
                        text-transform: uppercase;
                    }
                    em {
                        font-size: 12px;
                        padding-left: 10px;
                        opacity: 0;
                        transition: all 0.3s;
                    }

                    &:hover {
                        em {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }
    .footer__right {
        text-align: center;
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 20px;
    }
}

9.3 푸터 데이터 작업

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

const footerText = [
    {
        title: "youtube",
        desc: "유튜브에 오시면 더 많은 강의를 볼 수 있습니다.",
        link: "https://www.youtube.com/@Webstoryboy",
    },
    {
        title: "github",
        desc: "깃헙에 오시면 더 많은 소스를 볼 수 있습니다.",
        link: "https://github.com/webstoryboy",
    },
    {
        title: "blog",
        desc: "블러그에 오시면 더 많은 정보를 볼 수 있습니다.",
        link: "https://webstoryboy.co.kr",
    },
    {
        title: "gsap",
        desc: "GSAP에 오시면 더 많은 강의를 볼 수 있습니다.",
        link: "https://www.youtube.com/playlist?list=PL4UVBBIc6giL8-6jvrClimg0cFL-Muqiq",
    },
    {
        title: "react",
        desc: "리액트로 만든 사이트를 같이 만들어 봅니다.",
        link: "https://github.com/webstoryboy/port2023-react",
    },
    {
        title: "vue",
        desc: "뷰로 만든 사이트를 같이 만들어 봅니다.",
        link: "https://github.com/webstoryboy/port2023-vue",
    },
    {
        title: "next",
        desc: "넥스트로 만든 사이트를 같이 만들어 봅니다.",
        link: "https://github.com/webstoryboy/port2023-next",
    },
];

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

<div className="right">
    <h3>social</h3>
    <ul>
        {footerText.map((footer, key) => (
            <li key={key}>
                <a href={footer.link}>{footer.title}</a>
                <em>{footer.desc}</em>
            </li>
        ))}
    </ul>
</div>

3. 마무리

이제 깃헙에 올리겠습니다. 

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

이제 기본적인 부분들이 마무리 된것 같습니다. 마지막 마무리만 잘 하면 되니까. 조금 더 힘을 냅시다. 수고하셨어요^^

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

예제 목록

관련글

댓글

티스토리툴바