자기소개페이지 제작기

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

🍋완성된 페이지 미리보기

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

📌 사용 기술

HTML CSS JavaScript JQuery

📌 제작 기간

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

만들기 전 목표

  1. 최대한 라이브러리를 사용하지 않고 만들자.
  2. 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>

🍋Header

🔧Navbar 기능

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 animationJavaScript 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로 구현할 수 있는 영역이 넓다는 걸 느꼈다.
  • 원하는 기능을 그때 그때 찾아서 구현하니까 강의를 보고 따라칠때보다 훨씬 머릿속에 잘 들어왔다.

좋은 웹페이지 즐겨찾기