자기소개페이지 제작기

Lemon·2022년 3월 24일

미니프로젝트 사전스터디

사전 스터디의 첫 과제로 만든 자기소개 페이지 제작기 입니다😊

🍋완성된 페이지 미리보기

완성된 자기소개페이지
코드보기

📌 사용 기술

HTML CSS JavaScript JQuery

📌 제작 기간

22/3/18 ~ 22/3/22 (4일)

만들기 전 목표

최대한 라이브러리를 사용하지 않고 만들자.
CSS 애니메이션을 많이 사용해 보자.

자기소개 페이지 뭐 넣지...?🤔

자기소개 페이지에 어떤 내용을넣어야 할까부터 고민이 되었다.. 내용 구성하는 것부터 엄청오래 걸렸다. 고민 끝에 로딩페이지 - 메인페이지(Home) - 나에 대한 소개페이지(About) - 좋아하는 것들(Favorite) - 목표(Goal) - 링크(Contact) 이렇게 넣기로 결정했다.

레이아웃 구성

우선 섹션 별로 어떤 내용이 들어가면 좋을지 쭉 적어보고 적은 내용들을 어떻게 배치해야 할지 생각하며 레이아웃 구성을 시작했다! 들어갈 내용에 대한 고민만 4-5시간 정도 했다🥲

총 6영역으로 나누어진 웹 페이지이고 각 영역의 레이아웃은 여러 사이트를 참고해서 구성했다. 간단해 보이는 레이아웃이지만 내용 배치하고 정리하는 것만 꼬박 하루가 걸렸다😅 (웹디자이너 분들 정말 존경합니다..)

🍋HTML 구조

레이아웃을 정리하고 바로 HTML을 작성했다. 이 전에 페이지를 만들 때는 레이아웃을 잡지 않고 머릿속으로만 생각하고 작성했었는데, 정리하고 작성하니까 확실히 금방 작성할 수 있었다.
HTML은 <header> > <main> > <footer> 의 시맨틱 태그 구조를 맞춰서 작성하려고 노력했다.

<div class="loading_container"> ..로딩Page.. </div>

<header>
	<h1 class="blind"> 자기소개서 </h1>
	<nav> ...Navigation 내용... </nav>
</header>

<main>
	<div class="container">
    <section id="home"> ..Home Page 내용.. </section>
    <section id="about"> ..About Page 내용.. </section>
    <section id="favorite"> ..Favorite Page 내용.. </section>
    <section id="goal"> ..Goal Page 내용.. </section>
    <section id="contact"> ..Contact Page 내용.. </section>
  </div>
</main>

<footer> ...Footer 내용... </footer>

🍋Detail

1. 파비콘 적용하기

파비콘은 웹페이지 주소창에 표시되는 아이콘이다. 사용방법은 <head>태크 안에 <link>를 넣어 주면 된다.

<link rel="shortcut icon" href="경로/파일명.ico">

파비콘을 직접 만들 경우 16x16 크기의 이미지 파일로 만들며 확장자는 .ico로 생성해야 한다.

무료 아이콘 다운받는 사이트
Free Icons and Stickers - Millions of resources to download
.ico 파일 변환기

2. 링크 공유 시 보이는 미리보기 이미지 및 설명 적용

<head>태크 안에 <meta>속성으로 넣으면 된다.

<head>
	<meta property="og:image" content="./images/home.jpg">  //미리보기 될 이미지
	<meta property="og:title" content="박주영 자기소개페이지"> // 타이틀
	<meta property="og:description" content="Wecode 1주차 [자기소개페이지 만들기] 과제 제출용 페이지입니다."> //페이지 요약
</head>

1. 툴팁 효과
내비게이션 바는 레몬 아이콘으로 보이다 보니 마우스를 올렸을 때 어떤 영역인지 설명글이 나오면 좋겠다고 생각해서 찾아보니 툴팁(tooltip) 이라는 개념을 새롭게 알게 되었다!
툴팁(tooltip) 이란 해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과이다. 적용할 태그에 title=”내용” 만 적으면 된다.

<li><a href="#home" title="Home">🍋</a></li>

처음에 title를 사용해서 만들어줬는데 생각보다 맘에 안 들어서 결국 그냥 CSS로 만들었다.

title 속성적용👇🏻

CSS 적용 👇🏻

2. 클릭 시 원하는 섹션의 위치로 스크롤 이동
<a href=”#id”> 사용했다.

<li><a href=”#home”>🍋<a></li>
<li><a href=”#about”>🍋<a></li>
<li><a href=”#favorite”>🍋<a></li>
<li><a href=”#goal”>🍋<a></li>
<li><a href=”#contact”>🍋<a></li>

뚝뚝 끊기듯이 이동해서 좀 더 부드럽게 넘어가게 하고 싶어서 검색해 보니 CSS에 속성이 있었다🤩 생각보다 CSS로 가능한 영역이 많구나 깨달았다.

html {
	scroll-behavior: smooth;
}

https://www.w3schools.com/cssref/pr_scroll-behavior.asp 에 정의 및 사용방법이 자세히 나와있다. 간단하게 정리하자면 사용자가 스크롤 가능한 상자 내의 링크를 클릭할 때 부드럽게 애니메이션 해준다. css 한 줄만으로 간단하게 스크롤을 부드럽게 할 수 있다는 장점이 있지만 속도 조절은 어렵다.

🍋Home Section

🔧Home Section 기능

1. 텍스트 타이핑 효과

순수 자바스크립트로 만들고 싶었다. 자주 사용하는 기능이다 보니 여러 정보들이 나왔다. 생각보다 간단하게 구현 가능했다.

<div class="title">
    <h1></h1>
    <p>안녕하세요 제 이름은 박주영 입니다. 33기 여러분 만나서 반가워요 :)</p>
</div>

const content = "Hello, I’m Jooyoung!";
const text = document.querySelector(".title h1");
let textIdx = 0;

function typing(){
    let txt = content[textIdx++];
    text.innerHTML += txt;

    if (textIdx > content.length) {
        text.textContent = "";
        textIdx = 0;
    }
}

🍋About Section

🔧About Section 기능

1. 스크롤에 반응하는 슬라이딩 애니메이션

CSS @keyframs animation과 JavaScript scroll 이벤트를 사용해서 구현했다. 먼저 CSS에 애니메이션을 만들었다.

/* 카드가 내려갔다가 올라오는 애니메이션 */
@keyframes about_slide { 
    from {
        opacity: 0;
        transform: translateY(300px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* 카드가 다시 내려가는 애니메이션 */
@keyframes about_backslide {
    from{
        opacity: 1;
        transform: translateY(0px);
    }
    to{
        opacity: 0;
        transform: translateY(300px);

    }
}

애니매이션을 만든 이후에 JavaScript scroll 이벤트로 해당 스크롤 위치에 도달하면 CSS에 해당 animation 속성을 넣어주도록 구현했다.

let aboutCard = document.querySelector(".about_profile");

window.addEventListener("scroll", function(){
    let value = window.scrollY;
    console.log("scrollY", value);
    if (value < 400){
      	// 스크롤 높이가 400보다 작으면 카드가 다시 내려가도록
        aboutCard.style.animation = "about_backslide 1s ease-out forwards";
    } else {
      	// 스크롤 높이가 400보다 크면 카드가 올라도록
        aboutCard.style.animation = "about_slide 1s ease-out"
    }
})

2. CSS 3D 카드

CSS로 3D 공간으로 만들어주는 perspective 속성을 사용해서 구현했다.

👇🏻 유튜브 1분코딩님이 올려주는 강의를 응용해서 만들었다.
오브젝트가 둥둥 떠있는 CSS 3D 카드 만들기

만들면서 정말 재밌고 신기했다. 왠만하면 디자인적인 요소는 JavaScript 없이 CSS로 가능하구나를 느꼈던 작업이다.

🍋Favorite Section

🔧Favorite Section 기능

1. 멀티 슬라이드

순수 JavaScript로 작업하고 싶었다.. 처음에는 구글링 했을 때 대부분 JQuery로 만드는 것만 나오기도 했고, JavaScript로 작성된 글이 간혹 나와도 이해가 어려워서 굉장히 많은 시간을 소모했다.🥲 그러다가 유튜브 찾아보니 딱 원하는 강의를 발견했다. 강의에서 나온 내용을 응용해서 적용했다.

Javascript 29 [ Slideshow ] 순수 자바스크립트 멀티 슬라이드, 하나씩 이동하는 슬라이드 구현하기

🍋Contact Section

간단하게 Instagram / Velog / Github 만 넣었고 <ul> <li> 태그 안에 <a>링크를 넣어서 작성했다. <a target="_blank"> 속성을 추가해서 새 탭으로 링크가 열리도록했다.

처음에는 모든 텍스트들이 뭉텅이로 올라오는게 했는데, 맘에 안들어서 한줄씩 올라오게 수정했다.

한줄씩 올라오는 효과는 CSS @keyframes를 사용했고, 스크롤에 반응해서 올라오도록 JavaScript scroll 이벤트를 사용했다.

🍋Loading Page

라이브러리를 사용하지 말자는 목표를 실패하게 만든 페이지였다🥲 구글링을 아무리해봐도 나오지않아서 jQuery로 구현했다. 근데 정말 jQuery를 사용하니까 매우 간단하게 구현 가능했다.

$(window).load(function(){
    $('.loading_container').delay(2000).fadeOut();
})

화면이 load되고 2초동안은 남아있도록 delay 속성을 추가로 넣었다.

페이지 내에 있는 컨텐츠들의 애니메이션은 CSS @keyframes animation속성을 이용해서 이미지는 무한으로 돌아가도록, 글씨는 점점 선명해지도록 했다.

.loading_box p {
    animation: opacity 1s ease-in infinite;
}

.loading_box .loading {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform:translate(-50%,-50%) rotate(0deg); }
    100% { transform:translate(-50%,-50%) rotate(360deg); }
}

@keyframes opacity{
    0% {opacity: 0;}
    100% {opacity: 1;}
}

😭아쉬웠던점

접근성 고려하지 못했다.
반응형 제작하지 못했다. 반응형 적용하는 연습하자!!🔥
코드가 너무 지저분하다.. 내가 치면서도 정리가 잘 안되는 느낌이었다ㅠㅠ 좀 더 깔끔하게 작성할 수 있도록 연습해야겠다..

🌟느낀점

컨텐츠에 이미지를 어떤걸 넣지 고민하는 것에서 굉장한 시간소모와 피로감을 느꼈다! 기획자 분들 디자이너 분들이 얼마나 중요한 존재인지 다시한번 깨닫는 계기가 되었다...
정말 세세하게 신경쓸게 많다. 링크를 보낼때 나오는 이미지나 파비콘도 신경써야하고, .blind aria-label 같은 접근성도 고려해야 한다.
생각보다 CSS로 구현할 수 있는 영역이 넓다는 걸 느꼈다.
원하는 기능을 그때 그때 찾아서 구현하니까 강의를 보고 따라칠때보다 훨씬 머릿속에 잘 들어왔다.