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

4. 포트폴리오 사이트 만들기 : Vite-Site : 인트로 영역

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

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

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

소개

이번 섹션은 웹 페이지의 인트로(소개) 섹션을 구성하는 부분입니다. "Port developer"라는 텍스트를 강조하여 표시하여 개발자 포트폴리오라는 느낌을 주었습니다. 가로로 놓인 줄들로 꾸며진 배경은 깔끔하고 세련된 느낌을 주도록 하였습니다. 또한 "Talent is found at the end of the effort"라는 메세지를 부여하여 노력에 대한 중요성을 강조하였습니다. 배경 이미지는 꾸밈 요소로 사용되었기 때문에, 웹 접근성을 위해 "aria-hidden" 속성을 사용하였습니다.

인덱스

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

4. 인트로 영역

4.1 인트로 구조 잡기

라인 효과를 주기 위해 span을 사용했습니다. 의미가 있는 요소가 아니기 때문에 aria-hidden 속성을 사용하였습니다. 이미지를 나타내는 부분도 백그라운드로 이미지를 넣었기 때문에 의미 전달을 할 수 없어 aria-hidden를 사용하였습니다. 

<section id="intro">
    <div class="intro__inner">
        <h1 class="intro__title">
            port developer
        </h1>
        <div class="intro__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="intro__text">
            <div class="text">
                <div>talent is</div>
                <div>found at the end of the</div>
                <div>effort</div>
            </div>
            <div class="img">
                <img src="assets/img/about.jpg" alt="어바웃" />
            </div>
        </div>
        <div class="intro__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>
<!-- //intro -->
  • <div class="intro__lines">와 <div class="intro__lines bottom"> : 이 두 개의 <div> 요소들은 CSS 스타일링을 위한 장식적인 역할을 하므로, aria-hidden="true" 속성을 추가하여 스크린 리더에게 이 요소들을 읽지 않도록 설정합니다.

4.2 인트로 구조 잡기

CSS 작업을 할 때 단위 선택은 매우 중요합니다. 하지만 단위를 선택하는 것은 절대적인 규칙이 딱히 없기 때문에 개발자들이 많은 시행착오를 겪는 경우가 종종 있습니다. 일반적으로 px, vw, rem을 사용하여 크기를 지정할 수 있습니다. 각각의 특징과 사용 사례에 대해 간단히 설명드리겠습니다.

  • px (픽셀): px은 절대적인 단위로, 고정 크기를 나타냅니다. 즉, 브라우저의 크기나 디바이스의 해상도에 관계없이 항상 동일한 크기로 표시됩니다. px은 주로 글꼴 크기와 같이 크기가 고정되어야 하는 요소에 사용됩니다.
  • vw (뷰포트 너비의 비율): vw는 뷰포트 너비의 비율을 나타내는 상대적인 단위입니다. 뷰포트란 사용자의 화면에 표시되는 영역을 말합니다. 예를 들어 1vw는 뷰포트 너비의 1%를 의미합니다. vw은 반응형 디자인에서 주로 사용되며, 화면 크기에 따라 요소의 크기가 자동으로 조정되는 효과를 얻을 수 있습니다.
  • rem (루트 글꼴 크기의 비율): rem은 루트(html) 요소의 글꼴 크기를 기준으로한 상대적인 단위입니다. 예를 들어, 1rem은 루트 요소의 글꼴 크기와 동일하게 설정됩니다. rem은 주로 반응형 디자인에서 사용되며, 루트 요소의 글꼴 크기를 조정하여 모든 요소의 크기가 자동으로 조정되도록 만들 수 있습니다.

이러한 단위를 적절하게 조합하여 사용하면 유연하고 반응형인 웹 페이지를 개발할 수 있습니다. 예를 들어, 글꼴 크기와 같이 고정 크기가 필요한 요소는 px를 사용하고, 반응형인 요소는 vw 또는 rem을 사용하는 방식으로 접근할 수 있습니다.

또한, 코딩 스타일과 개발 환경에 따라 선호하는 단위가 다를 수 있으므로, 개발자들이 자신만의 규칙과 패턴을 만들어 사용하는 것이 바람직합니다. 이러한 경험과 시행착오를 통해 더욱 효율적인 개발 방법을 발견할 수 있고, 결국 개발자 개개인의 창의성과 능력이 발휘될 수 있는 분야입니다. 따라서, 맘대로 사용하고 실험하며 개인적인 코딩 스타일을 만들어가는 것이 중요하고 유익합니다. 

#intro {
    height: 100vh;
}
.intro__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    padding: 16px;
}
.intro__title {
    font-size: 10vw;
    text-transform: uppercase;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    text-indent: -0.5vw;
    letter-spacing: -0.3vw;
}
.intro__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;
}
.intro__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;
}
.intro__text .img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    overflow: hidden;
    filter: grayscale(100%);
    transition: all 0.3s;
}
.intro__text:hover .text {
    opacity: 0;
}
.intro__text:hover .img {
    filter: grayscale(0);
}
.intro_lines {
    width: 100%;
}
.intro_lines .line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--black);
    margin-bottom: 0.5vw;
}
.intro_lines.bottom .line {
    margin-top: 0.5vw;
    margin-bottom: 0;
    display: none;
}
.intro_lines .line:nth-child(1){
    height: 1px;
}
.intro_lines .line:nth-child(2){
    height: 2px;
}
.intro_lines .line:nth-child(3){
    height: 5px;
}
.intro_lines .line:nth-child(4){
    height: 9px;
}
.intro_lines .line:nth-child(5){
    height: 13px;
}
.intro_lines .line:nth-child(6){
    height: 17px;
}
.intro_lines .line:nth-child(7){
    height: 25px;
}
.intro_lines.bottom .line:nth-child(1){
    height: 25px;
}
.intro_lines.bottom .line:nth-child(2){
    height: 17px;
}
.intro_lines.bottom .line:nth-child(3){
    height: 13px;
}
.intro_lines.bottom .line:nth-child(4){
    height: 9px;
}
.intro_lines.bottom .line:nth-child(5){
    height: 5px;
}
.intro_lines.bottom .line:nth-child(6){
    height: 2px;
}
.intro_lines.bottom .line:nth-child(7){
    height: 1px;
}

4.3 반응형 작업하기

반응형 작업시 라인을 밑에도 생기게 작업했습니다. 피시 화면과 다르게 작업하여 모바일 느낌이 나도록 작업했습니다. 

@media (max-width: 800px){
    .intro__inner {
        justify-content: center;
    }
    .intro_lines.bottom .line {
        display: block;
    }
    .intro__text .text {
        font-size: 24px;
    }
}
@media (max-width: 320px){
    .intro__title {
        display: none;
    }
}

3. 마무리

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

git add .
git commit -m "🧐 인트로 완료"
git push -u origin main

포트폴리오 페이지의 핵심이 되는 인트로 페이지를 완성하였습니다. 라인과 글씨의 조화를 통해 메인다운 느낌을 주도록 하였습니다. 모바일 화면에서도 이질감을 덜 주기 위하여 디자인을 변경하고, 모든 디바이스에서 잘 나올 수 있도록 작업하였습니다.

인트로 페이지는 웹사이트의 첫 인상을 결정짓는 매우 중요한 부분입니다. 여러분들도 포트폴리오 만들때 폰트에 많이 신경을 쓰시면 좀 더 열정적인 포폴을 연출할 수 있습니다. 여러분들의 노력과 열정이 담긴 멋진 인트로 페이지를 만들어 보면서, 더욱 향상된 개발자로 성장해나가길 기대합니다! 수고하셨습니다! 😊🚀

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

예제 목록

관련글

댓글

티스토리툴바