본문 바로가기
Projects/개인 프로필 사이트

[개인 프로필 사이트] 3. 허브 페이지 작성

by DevJaewoo 2021. 6. 1.
반응형

Intro

이 프로젝트의 첫 페이지인 허브 페이지를 개발할 차례다.

프로젝트의 UI는 저번에 정한 그대로 개발할 예정이다.

 

2. 프로젝트 기획

프로젝트 기획 저번 시간에 프로젝트 주제와 세부 테마를 정하고, 참고할 만한 사이트들을 찾아봤었다. 이번엔 메인 페이지와 각 세부 테마가 포함할 내용을 정하는 시간을 갖겠다. 메인 페이지

devjaewoo.tistory.com

 

모든 코드는 Github에 업로드 해두었습니다.

아래의 링크를 클릭하여 소스코드를 보실 수 있습니다.

https://github.com/DevJaewoo/DevJaewoo.github.io

 

DevJaewoo/DevJaewoo.github.io

Contribute to DevJaewoo/DevJaewoo.github.io development by creating an account on GitHub.

github.com

HTML

우선 HTML을 통해 대략적인 구조를 먼저 잡았다.

페이지 전체를 감싸는 wrap 클래스 내부에 Logo, Section, Menu, Nav 영역을 만들었다.

각 영역의 의미는 다음과 같다.

  • Logo: 단어 그대로 페이지 로고이다.
  • Section: 세부 테마에 해당하는 페이지로 이동할 수 있는 사각형 영역이다. 내부에 이미지를 넣어 허전함을 채울 예정이다.
  • Menu: 클릭 시 Nav 영역을 활성화 하는 버튼으로 사용할 예정이다.
  • Nav: nav 태그를 사용했지만 사실상 이 페이지의 메뉴 역할을 한다.

flex 속성을 갖는 컨테이너들에게 속성을 쉽게 부여할 수 있도록 flex 클래스를 정의하였다.

jQuery 라이브러리를 사용할 수 있도록 head 영역에 jQuery URL을 등록하였다.

 

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>DevJaewoo</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" charset="utf-8"></script>
    </head>
    <body>
        <div class="wrap">
            <!-- LOGO -->
            <div class="logo">
                <h1><a href="#">DevJaewoo</a></h1>
            </div>

            <!-- SECTION -->
            <section class="flex portfolio">
                <a href="#"><img src="./images/dummy.jpg"></a>
                <div class="content">
                    <a href="#">
                        <h3>PORTFOLIO</h3>
                        <p>Introduce · Strength · Skills · Projects · Contact</p>
                    </a>
                </div>
            </section>
            <section class="flex hobby">
                <a href="#"><img src="./images/dummy.jpg"></a>
                <div class="content">
                    <a href="#">
                        <h3>HOBBY</h3>
                        <p>Games · Study</p>
                    </a>
                </div>
            </section>
            <section class="flex feedback">
                <a href="#"><img src="./images/dummy.jpg"></a>
                <div class="content">
                    <a href="#">
                        <h3>FEEDBACK</h3>
                        <p>Personal projects & Feedback</p>
                    </a>
                </div>
            </section>

            <!-- MENU -->
            <div class="menu">
                <div class="bar one"></div>
                <div class="bar two"></div>
                <div class="bar three"></div>
                <div class="bar four"></div>
            </div>

            <!-- NAV -->
            <nav class="flex">
                <div class="flex foreground">
                    <div class="flex link">
                        <div class="title">
                            <span>NAVIGATION</span>
                        </div>
                        <div class="link-item">
                            <a href="#">Portfolio</a>
                        </div>
                        <div class="link-item">
                            <a href="#">Hobby</a>
                        </div>
                        <div class="link-item">
                            <a href="#">Feedback</a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>

        <script src="./scripts/index.js" charset="utf-8"></script>
    </body>
</html>

CSS

그 다음 CSS를 통해 구성 요소들의 위치를 잡아주고, 글자 색, 배경 색 등을 지정했다.

배경 색은 아래의 사이트를 참고했다.

https://www.webdesignrankings.com/resources/lolcolors/

 

LOL Colors - Curated color palette inspiration

 

www.webdesignrankings.com

 

내가 사용한 색 조합이다.

색조합

HTML에서 정의한 flex 클래스에 수직/수평 중앙 정렬 속성을 부여하였다.

Javascript에서 마우스 클릭 시 쉽게 메뉴 창이 나올 수 있도록 on 클래스만 추가/제거 하면 자동으로 애니메이션 되도록 작성했다.

 

style.css

@charset "utf-8";

/********init********/
* {
    margin: 0;
    padding: 0;
    color: #333;
    font-family: '맑은 고딕', sans-serif;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

a {
    text-decoration: none;
}

body {
    min-width: 280px;
    min-height: 500px;
}

.wrap {
    position: relative;
    overflow: hidden;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex.row {
    flex-direction: row;
}

/*********main*********/
.logo {
    position: absolute;
    top: 50px;
    left: 5%;
    z-index: 1;
}

.logo h1 {
    font-size: 70px;
    font-weight: 800;
    color: #333333;
}

section {
    position: relative;
}

lottie-player {
    cursor: default;
}

.portfolio {
    width: 70%;
    height: 100vh;
    background: #A5DFF9;
    float: left;
}

.hobby {
    width: 30%;
    height: 50vh;
    background: #FFDE8A;
    float: left;
}

.feedback {
    width: 30%;
    height: 50vh;
    background: #60C5BA;
    float: left;
}

.content {
    position: absolute;
    left: 5%;
    bottom: 5%;
}

.content h3 {
    margin-bottom: 10px;
    font-size: 40px;
    font-weight: 800;
    color: #FFFFFF;
}

.content p {
    font-size: 30px;
    font-weight: 400;
    color: #FFFFFF;
}

/* menu */
.menu {
    position: absolute;
    top: 40px;
    right: 5%;

    width: 30px;
    height: 25px;

    z-index: 100;

    cursor: pointer;
}

.menu .bar {
    position: absolute;

    width: 30px;
    height: 5px;
    background: #FFFFFF;

    transition: all 0.5s;
}

.menu .bar.one {
    top: 0;
    left: 0;
    opacity: 1;
}

.menu.on .bar.one {
    opacity: 0;
}

.menu .bar.two {
    top: 10px;
    left: 0;
    opacity: 1;
}

.menu.on .bar.two {
    transform: rotate(-45deg);
}

.menu .bar.three {
    top: 10px;
    left: 0;
    opacity: 1;
}

.menu.on .bar.three {
    transform: rotate(45deg);
}

.menu .bar.four {
    top: 20px;
    left: 0;
    opacity: 1;
}

.menu.on .bar.four {
    opacity: 0;
}

/* nav */
nav {
    position: absolute;
    top: 0;
    right: -30%;

    width: 30%;
    height: 100vh;
    background: #6d3cd6;

    z-index: 2;
    text-align: center;

    transition: all 0.3s;
}

nav.on {
    right: 0;
}

nav .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

nav .foreground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000066;
}

.link {
    z-index: 3;
}

.title {
    padding-bottom: 10vh;
}

.title span {
    font-size: 35px;
    font-weight: 600;
    color: #FFFFFF;
}

.link-item {
    height: 7vh;
}

.link-item a {
    font-size: 30px;
    font-weight: 400;
    color: #FFFFFF;
}

Javascript

Javascript에선 별로 추가해줄게 없다.

CSS에서 메뉴 클릭 시 on 속성만 부여하면 메뉴 버튼, 창이 애니메이션 되도록 설정 해놓았기 때문에 클래스를 toggle 해주기만 하면 된다.

 

index.js

$(".menu").click(function() {
    $(".menu").toggleClass('on');
    $("nav").toggleClass('on');
})

결과

실행 결과는 다음과 같다.

실행 결과

 

반응형

'Projects > 개인 프로필 사이트' 카테고리의 다른 글

[개인 프로필 사이트] 6. 포트폴리오 페이지 기능 구현  (0) 2021.06.15
[개인 프로필 사이트] 5. 포트폴리오 페이지 작성  (0) 2021.06.02
[개인 프로필 사이트] 4. 허브 페이지 기능 구현  (0) 2021.06.02
[개인 프로필 사이트] 2. 프로젝트 기획  (0) 2021.06.01
[개인 프로필 사이트] 1. 프로젝트 준비  (0) 2021.05.31

관련글

티스토리툴바