자기소개페이지 제작기
사전 스터디의 첫 과제로 만든 자기소개 페이지 제작기 입니다😊
🍋완성된 페이지 미리보기
📌 사용 기술
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>
🍋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 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로 구현할 수 있는 영역이 넓다는 걸 느꼈다.
- 원하는 기능을 그때 그때 찾아서 구현하니까 강의를 보고 따라칠때보다 훨씬 머릿속에 잘 들어왔다.
Author And Source
이 문제에 관하여(자기소개페이지 제작기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@remon/자기소개페이지-제작기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)