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

8. 포트폴리오 사이트 만들기 : Vite-Site : 연락처 영역

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

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

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

소개

이번 섹션은 가로 모드 느낌을 나게 연출하겠습니다. GSAP 라이브러리를 활용하여 작업하겠습니다. 자바스크립트를 작업하여 연출할 수 있지만, 비효율적이고, 애니메이션 효과가 라이브러리보다 훨씬 좋지 않습니다. 좋은 기능들은 갔다 쓰는게 더 효율적일 수 있습니다. GSPA를 처음 듣거나 할 줄 모르다면 gsap 강의를 한번 듣고 오는 것을 추천합니다. 그럼 시작해보겠습니다.

인덱스

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 반응형 작업하기

8. 연락처 영역

8.1 연락처 구조 잡기

이 섹션은 인트로 섹션과 동일합니다. 

<section id="contact">
    <div class="contact__inner">
        <h2 class="contact__title">Contact</h2>
        <div class="contact__lines" aria-hidden="true">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
        <div class="contact__text">
            <div class="text">
                <div>
                    <a href="https://open.kakao.com/o/gM7YLzwf" target="_blank">KAKAO : Webstroyboy</a>
                </div>
                <div>
                    <a href="mailto:webstoryboy@naver.com" target="_blank">mail : WEBSTORYBOY@NAVER.COM</a>
                </div>
            </div>
        </div>
        <div class="contact__lines bottom" aria-hidden="true">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
        </div>
    </div>
</section>
<!-- //contact -->

8.2 연락처 디자인 설정

CSS 역시 인트로 섹션과 비슷합니다. 

#contact {
    height: 100vh;
}
.contact__inner {
    width: 100%;
    height: 100%;
    padding: 16px;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}
.contact__title {
    font-size: 10vw;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    text-indent: -0.5vw;
    letter-spacing: -0.3vw;
}
.contact__text {
    width: 100%;
    height: 40vh;
    background-color: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.contact__text .text {
    font-size: 3vw;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: underline;
    text-align: center;
    position: relative;
    z-index: 100;
    transition: all 0.3s;
    cursor: all-scroll;
}

.contact__lines .line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--black);
    margin-bottom: 0.5vw;
}
.contact__lines.top .line {
    margin-top: 0.5vw;
    margin-bottom: 0;
    display: none;
}
.contact__lines.top .line:nth-child(1){
    height: 1px;
}
.contact__lines.top .line:nth-child(2){
    height: 2px;
}
.contact__lines.top .line:nth-child(3){
    height: 5px;
}
.contact__lines.top .line:nth-child(4){
    height: 9px;
}
.contact__lines.top .line:nth-child(5){
    height: 13px;
}
.contact__lines.top .line:nth-child(6){
    height: 17px;
}
.contact__lines.top .line:nth-child(7){
    height: 25px;
}
.contact__lines .line:nth-child(1){
    height: 25px;
}
.contact__lines .line:nth-child(2){
    height: 17px;
}
.contact__lines .line:nth-child(3){
    height: 13px;
}
.contact__lines .line:nth-child(4){
    height: 9px;
}
.contact__lines .line:nth-child(5){
    height: 5px;
}
.contact__lines .line:nth-child(6){
    height: 2px;
}
.contact__lines .line:nth-child(7){
    height: 1px;
}

8.3 반응형 작업하기

@media (max-width: 800px){
    .contact__title {
        display: none;
    }
    .contact__lines.top .line {
        display: block;
    }
    .contact__text .text {
        font-size: 24px;
        padding: 0 16px;
        word-break: break-all;
    }
}

3. 마무리

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

git add .
git commit -m "🤓 연락처 완료"
git push -u origin main

이 영역은 인트로 영역과 유사하기 때문에 쉽게 했습니다. 크게 어려운 부분은 없죠? 그럼 오늘은 여기까지 하겠습니다.

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

예제 목록

관련글

댓글

티스토리툴바