Toy Project | 자기소개 페이지 만들기

Saemsol Yoo·2020년 12월 12일

Toy Projects 🧸

목록 보기

1/2

자기소개 페이지 만들기 Review ✨

HTML 과 CSS 를 공부하고 자기소개 페이지를 만들었습니다.
만들었던 과정을 기억해보려고 리뷰를 작성합니다. 중간중간 생겼던 문제와,
앞으로 보완해서 수정하고 싶은 부분도 정리해서 업데이트를 할 예정입니다. 😊

1. 페이지 계획하기

1-1. 페이지 구성 스케치

왼쪽 위에는 로고를 두어 홈버튼 역할을 하게 하고, 그 옆으로 네이비이션 바를 두어 페이지 이동을 할 수 있도록 계획했습니다. 그리고 한 페이지 안에서 여러가지 내용이 들어갈 것 같아 사이드바를 추가했습니다.

1-2. 해야할 것

Navigation bar 상단에 고정하기
Menu 클릭하면, 색상 바뀌게 하기
Menu 누르면 해당 섹션으로 이동하기

2. HTML & CSS

2-1. title & favicon

HTML

<head> 에 <link> 와 <title> 태그를 이용해서 작성했습니다.

  <title>yoo saemsol</title>

  <link rel="icon" type="image/png" href="imgs/favicon.png" />

2-2. header

header 부분은 크게 logo | navigation bar | link 로 나눴습니다.

HTML

navigation bar 는 ul,li 태그를 이용해서 작성했고,
github, blog link는 fontawesome 에서 아이콘을 불러왔습니다.
그리고 <a target="_blank"> 속성을 추가해서 새 탭으로 링크가 열리도록 했습니다.

 <header>
      <a href="index.html" class="logo">SAEMSOL</a>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Project</a></li>
        </ul>
      </nav>
      <div class="link">
        <ul>
          <li>
            <a href="https://github.com/yoosaemsol" target="_blank"
              ><i class="fab fa-github-square"></i
            ></a>
          </li>
          <li>
            <a href="https://velog.io/@saemsol" target="_blank"
              ><i class="fab fa-bootstrap"></i
            ></a>
          </li>
        </ul>
      </div>
    </header>

CSS

flexbox 를 이용한 가로배치
list-style-type: none; 으로 리스트 불릿 제거
position: fixed; 로 top : 0 에 고정
:hover ; 를 이용해 폰트 색상 변경

2-3. 메인 페이지

About

소개 문구들을 작성했고, 각 키워드를 클릭하면 해당 섹션으로 넘어갑니다.

🚨 이동한 페이지에서 다른 섹션으로 넘어갈 때 home 으로 돌아갔다가 다시 다른 섹션 으로의 이동이 번거로워서 side bar 를 추가했습니다.

HTML

키워드 속 a 링크 에다가, 섹션에 주었던 id 값을 넣어 페이지 이동이 되게 했습니다.

    <section class="home">
       <div class="home__text eng">
          <img class="click-me-eng" src="./imgs/clickme-eng.png" alt="click me" />
          <p>
            hello! my name is <a href="#me"><span>saemsol yoo</span></a>
          </p>
          <p>
            I am <a href="#about__age"><span>26 years old</span></a>
          </p>
          <p>
            I love <a href="#about__traveling"><span>traveling</span></a> and going to <a href="#about__concert"><span>concerts</span></a>!
          </p>
          <p>
            I studied<a href="#about__major"><span>Urban planning and Engineering</span></a>
          </p>
          <p>
            I finally <a href="#about__graduate"><span>graduated</span></a> this year. 🥳
          </p>
          <p>
            And now I start studying again to become a <a href="#about__wecode"><span>developer</span></a>.
          </p>
       </div>
       <img class="home__picture" src="./imgs/main-pic.png" alt="my-picture" />
       <div class="home__text kor">
          <img class="click-me-kor" src="./imgs/clickme-kor.png" alt="click me" />
          <p>
            안녕하세요! 저는 <a href="#me"><span>유샘솔</span></a>이에요
          </p>
          <p>
            2020년, 저는 <a href="#about__age"><span>27살</span></a> 이에요!
          </p>
          <p><a href="#about__traveling"><span>여행</span></a>다니기, <a href="#about__concert"><span>공연</span></a>보러가기를 정말 좋아해요!</p>
          <p>
            저는 <a href="#about__major"><span>도시계획과 도시공학</span></a>을 공부했고
          </p>
          <p>
            올해 드디어 <a href="#about__graduate"><span>졸업</span></a>을 했답니다 🥳
          </p>
          <p>
            그리고 이제 <a href="#about__wecode"><span>개발자</span></a>가 되기 위해 다시 공부를 시작해요
          </p>
       </div>
    </section>

CSS

각 섹션마다 height : 100vh 로 설정하여 슬라이드가 넘어가는(?) 것처럼 보이게 했습니다.
스크롤을 내려서 화면을 움직일 땐, 섹션구분이 되지않아 border-top 과 border-bottom 을 주어 영역을 구분해 주었습니다.
사이드바는 position: fixed 를 이용해 고정했습니다.
🚨 첫 화면(home) 에서는 키워드를 눌러서 이동할 수 있기 때문에, 사이드바를 없앴다가 섹션으로 넘어갔을때만 보여지게 하려고 했지만 아직 html css 단계에서는 구현하기가 힘들어서 JavaScript 단계에서 수정해보려고 합니다!
사이드바 링크들도, ul li a 로 작성했고 list-stlye-type: none 설정했습니다.
섹션 속 이미지들은 border-radius: 5px 설정했습니다.
이미지는 flexbox 로 center / 가로배치 했습니다.

HTML

ul li 를 이용해 구조를 만들었습니다.
email은 maileto: 속성을 추가해 메일 작성으로 이동할 수 있도록 했습니다.

<footer>
      <ul>
        <li><p>copyright ⓒ 2020 All rights reserved by saemsol.</p></li>
        <li>
          <a href="mailto:yoosaemsol@gmail.com" target="_top">
            📧 Mail me : yoosaemsol@gmail.com
          </a>
        </li>
      </ul>
</footer>

🚨 footer가 보이면, sidebar가 사라지도록 수정할 예정입니다. (수정완료 ✨ )

3. project 페이지

(20년 12월 15일 추가 ✨ )

header > navigation bar 에 있는 Project 에 project.html 을 새로 만들어서 연결했습니다.

project의 header는 index.html 과 동일합니다.
각각의 프로젝트는 div 안에 a 태그를 넣어 display를 block 으로 바꿔줬습니다.
(a 태그의 inline 속성상 css property 설정이 안돼서 변경)
프로젝트 이미지는 div에 background-image 를 설정했습니다.

그리고 다시 About 을 통해 페이지 이동을 할 수 있습니다.

4. JavaScript

(20년 12월 25일 추가 ✨ )

4-1. 현재 페이지 표시

About의 section 영역이 넘어갈때마다 해당 section의 아이콘에 표시가 들어오도록 했습니다.

CSS

스타일적인 요소이기 때문에, HTML은 그대로 두고 CSS 가상요소 를 이용했습니다.
평소에는 아무런 색이 없다가, 해당 section이 될 때 icon-active class가 추가될 때 빨간색이 표시되도록 했습니다.

.quick-icons li {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.quick-icons li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 10px;
}

.quick-icons li.icon-active::before {
  background-color: #e24849;
}

JavaScript

브라우저에서 제공하는 Intersection Observer API 를 이용했습니다.
섹션이 화면안에 들어오는것을 감지해서, 섹션이 들어올 때 해당 주제 아이콘에 icon-active class값이 추가되도록 했습니다.
그리고 섹션이 화면에서 벗어나면, 추가된 class 값이 제거시켜 active 상태를 리셋해줬습니다.
🚨 맨 위에있는 홈화면은 section 들과는 다른 컨테이너에 있기 때문에 🙋🏻‍♀️ 이 아이콘을 클릭해서 이동했을때는 섹션들의 이동이 감지가 되지 않아서 아이콘 활성화가 자동으로 풀어지지 않았습니다. 그래서 🙋🏻‍♀️ 이 아이콘에는 click 이벤트를 주어 class 값들이 제거되도록 해줬습니다.

👏🏻 Intersection Observer API 에 대해서는 자세하게 다시 정리해서 추가할 예정입니다.

Home과 Footer 에서는 sidebar icons 를 감춰지도록 했습니다.