[SeSSAC] 웹 풀스택 영등포 5기 과정_ Web Resume만들기

안녕하세요

개인 미니 프로젝트를 후다닥 끝내고 왔습니다.

일단 저는 개인적으로 평소에도 제 이력서를 웹사이트로 구축해보고 싶다는 생각을 했었어요

(요즘 유행이라길래,,,,ㅎ)

 

주말에 스터디공부와 42과제와 정처기를 공부해야하는 전,,,,

수업시간 안에 프로젝트를 다 끝내는 초초초미니 플로젝트로

이 주제(이력서 웹사이트)가 매우 적합하다는 생각을 하였습니다.

 

사실 수업시간 안에 못 끝낼 것같았는데 리더님을 열심히 불러서

팔붙잡고 물어본 덕분에 일찍 끝낸 것 같습니다.

---

 

1. 좋은 디자인 예시를 눈여겨 보기

 

저같은 경우는 아래의 링크에서 자기소개 관련한 템플릿을 보고 이것저것 따왔습니다.

창작은 어렵잖아요!

https://ko.wix.com/website/templates/html/portfolio-cv/personal

자기소개 웹사이트 템플릿 | 포트폴리오 및 이력서 | Wix.com

---

2. 부트스트랩 활용

 

특히 웹페이지의 툴을 잡아주던 헤더는 여기서 가져오니까 너무 편하더라구요

https://getbootstrap.kr/docs/5.3/examples/

예시

이렇게 예시 사이트에 들어가서 헤더를 누르면 냅다 헤더만 나옵니다.

이때 마우스 오른쪽 클릭 - 검사에 들어가서 개발자 도구를 해 갖고 오고싶은 헤더를 선택하면

해당 헤더가 있는  div 요소가 뜹니다.

이걸 복사해서 내  html에 붙여넣기 하면 되어요!

 

이 헤더를 가져오기를 추천드리는 이유는, 헤더에 기본적인 요소가 포함되어있는데

이 헤더를 통해 웹페이지의 전체적인 골격을 잡기가 아주 쉬워요.

제가 가져와서 만진 헤더입니다.

   <header class="p-2 text-bg-dark myhead scroll-header">
        <div class="container" style="font-size: 30px;">Web Developer</div>
        <div class="container">
            <div class="d-flex flex-wrap align-items-center justify-content-start">
                <!-- <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                    <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
                </a> -->
                
                <ul class="nav col-auto me-auto mb-2 justify-content-center mb-md-0">
                    <li><a href="#box1" class="nav-link px-2 text-white">About me</a></li>
                    <li><a href="#box2" class="nav-link px-2 text-white">FAQs</a></li>
                </ul>
        
                <div class="welcome">welcome!</div>
            </div>
        </div>
    </header>

 

일례로 저는 헤더를 가져와서 헤더에 있는 기본 클래스(여기선 container)를 아래 section에도 적용해주니까

웹사이트 정렬이 헤더를 기준으로 완벽하게 되더라구요

---

3. 바디의 첫 섹션 꾸미기

헤더를 넣어주고 이름, 번호, 이메일을 넣어줬어요

그리고 이미지가 있는 쪽이 훨씬 보기가 좋아서 비록 제 사진은 아니지만,,,

개발 관련한 사진을 넣어주었습니다.

 

이때 저는 이 사진과 이름이 적힌 섹션만큼은  flex를 사용해주었는데요,

이 과정을 통해 flex에 대한 개념 한번 더 짚고 넘어갑니다

 <section class="container first">
    <div class="parent">
        <div class="child1 animate__animated animate__backInLeft">
            <span style="font-size: 70px; color: rgb(41, 41, 96);">김00</span><br/>
            <span style="font-size: 30px; font-weight: 500; color: rgb(41, 41, 96);">phone: 010-0000-0000</span><br/>
            <span class="email" style="font-size: 20px;color: rgb(41, 41, 96);">e-mail:0000@naver.com</span><br/>
            <br/>
            <span class="introduce">안녕하세요. 웹 풀스텍 개발자 지망생입니다.</span>
        </div>
        ////////이 부분은 부트스트랩의 캐러셀의 예시를 가져옴/////////
        <div class="child2 animate__animated animate__backInLeft">
              <div id="carouselExampleIndicators" class="carousel slide shadow-sm p-3 mb-5 bg-body-tertiary rounded">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="./img/my_img.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="./img/my_img2.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="./img/my_img3.jpg" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
        </div>
        
    </div>
    </section>

---

5. 이력서 구체적인 사항 넣기

 

이때 저는 스크롤을 내려도 헤더를 고정하도록 헤더의 css에

positive:fixed를 넣어주었습니다. 그래서 스크롤을 내려도 헤더가 보이는 거예요!

 

섹션 하나는 저 파란줄 시작부터 다음 파란줄 전까지 한 섹션으로 잡았습니다.

내부는 이런 모습이에요

    <section class="container" id="box1">
        <br/>
        <div class="line" ></div>
        <div class="pointname">학력 사항</div>
        <br/>
        <div class="parent1">
        <div class="point">00고등학교</div>
        <div></div>
        <div class="point">2012.03 - 2015.02</div>
        </div>
        <div style="font-size: 20px;">경기도 00시</div>
        <br/>
        <br/>
        <div class="parent1">
        <div class="point">00대학교</div>
        <div class="point">2015.03 - 2020.02</div>
        </div>
        <div style="font-size: 20px;">000000학부 학사</div>
        <div style="font-size: 20px;">서울 00구</div>
    </section>

여기서 첫째줄 보시면 id="box" 라고 되어있는데, 이 id 를 통해

헤더에 있는 버튼을 누르게되면 이 id 가 위치한 곳으로 페이지뷰가 자동으로 위치하게 됩니다.

 

이렇게 헤더에 넣게 되면

<a href="#box1">about me</a>

이 about me를 누르면 제가 넣어놓은 box1로 위치 이동을 하게 됩니다.

---

6. 페이지 풋터처리

페이지 풋터가 없으면 정말 어색한 것같아요

있으면 있는지 모르지만 없으면 이상한 존재

여기 맨 밑에 있는 2023  by 어쩌고 되어있는 부분을 footer라고 하는데요,

이 부분도 부트스트랩의 예시에서 가져왔습니다.

    <footer class="footer mt-auto py-3 bg-body-tertiary">
        <div class="container ">
          <span class="text-body-secondary">© 2023 by 김지형. my website Resume</span>
        </div>

---

7. 에니메이션 처리

제가 가장 시간을 많이 들이고 어려워한 부분인데요

이 애니메이션은 css 애니메이션의 대표 라이브러리인 animate를 사용하였습니다.

제가 구현하고자 하는 애니메이션이 간단해서 이 라이브러리가 적합해보였습니다.

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

헤더에  animate.css에 해당하는 CDN을 가져옵니다.

    <!-- animate.css -->
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />

그리고 사이트에 나와있는대로 class에

원하는 애니메이션 속성을 추가해주면 됩니다.

<div class="child1 animate__animated animate__backInLeft">

제가 앞서 3번과정 첫 섹션바디에서 올렸던 코드의 일부분인데,

class에 animate__animated animate__backLeft를 입력하니, 웹페이지가 로드될 때 첫 섹션에 있는 요소가

왼쪽에서 부터 등장해서 도착하는 애니메이션 효과가 들어갔습니다.

 

그리고 자격사항과 같은 요소들도 스크롤을 했을 때 '페이드인' 애니메이션을 넣어주었습니다.

이 과정에서 처음이자 마지막으로 자바스크립트를 쓰게 됩니다 ㅎ

// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', function () {
  // 요소가 뷰포트 안에 들어왔는지 체크하여 애니메이션을 주고자 하는 요소 선택
  const elements = document.querySelectorAll('.point');

  elements.forEach((element) => {
    const elementTop = element.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (elementTop < windowHeight) {
      // 뷰포트 안에 요소가 들어왔을 때 애니메이션을 주는 클래스 추가
      element.classList.add('animate__animated', 'animate__fadeIn', 'animate__delay-1s');
    }
  });
});

  제가  point 라고 클래스를 주었던 요소들이 스크롤이 내려졌을 때

뷰포트 안쪽에 요소가 들어오게 된다면  class를 추가해서 해당 효과를 내는 것입니다.

 

---

나름 배운지 이제 2~3주가 되었는데 이 정도의 결과를 낸 것에

매우 만족합니다 :)

끝