[과제] 자기소개 페이지 제작

2주차 마지막 날의 과제로 HTML, CSS, JavaScript를 이용해서 자기소개 페이지를 제작하는 과제가 주어졌다.

멋사에서 활동했을 때도 HTML/CSS를 배우고 가볍게 자기소개 페이지 제작 과제를 했었는데, 확실히 그 때보다 이런저런 요소들을 제법 다룰 수 있게 된 것을 느꼈다.

그 때 같이 활동했던 동아리원 중, 웹 화면에 페이지를 꽉 채워서 여러 페이지들을 스크롤 하는 방식으로 제작하신 분이 계셨는데, 당시 웹 개발 햇병아리였던 나는 그런 신세계(?) 디자인은 처음 접해봤었고 다음에 한 번 저렇게 만들어 보고싶다는 생각을 했었다.

그 외에도 능력이 부족해서 해보고는 싶지만 구현을 못했던 것들이 많았어서, 이번 과제의 페이지 디자인은 당시를 회상하면서 했다.

과제의 주제가 필수 내용들을 삽입하되, 지금까지 배운 HTML/CSS, JavaScript를 활용해서 자신을 소개하는 페이지를 만드는 것이었기 때문에 간단하게 JavaScript를 응용해보는 페이지도 하나 만들어보기로 했다.

 

navbar는 위치를 고정하기 위해서 position: relative / absolute를 사용했다. 또 ul과 li를 이용해서 탭을 만들었고, flex 속성을 통해 가로정렬을 해줬다. 각 li는 해당 페이지로 이동하는 기능을 구현하기 위해서 텍스트를 a태그로 감쌌다.

<ul>
	<li><a href="" class="menu1" onclick="location.replace(location.href);"><span>HOME</span></a></li>
	<li><a href="#section2" class="menu2"><span>ABOUT</span></a></li>
	<li><a href="#section3" class="menu3"><span>INTEREST</span></a></li>
	<li><a href="#section4" class="menu4"><span>GOAL</span></a></li>
	<li><a href="#section5" class="menu5"><span>FAVORITE</span></a></li>
	<li><a href="#section6" class="menu6"><span>CHANGE</span></a></li>
	<li><a href="#section7" class="menu7"><span>END</span></a></li>
</ul>

내가 작성한 방식은 html의 a태그를 이용해서 각 페이지로 이동하는 방식인데, 지금 보니 JavaScript window 객체의 scrollTo 메서드 같은 것으로 구현해 보았다면 더 좋지 않았을까 하는 아쉬움이 든다.

 

메인 페이지의 타이핑 효과는 JavaScript의 innerHTML을 이용해서 구현했다. 이 블로그의 글을 참고했고, 정말 많은 도움이 되었다!

const content = "Welcome!";
const text = document.querySelector(".welcome");
let i = 0;

function typing() {
  if (i < content.length) {
    let txt = content.charAt(i);
    text.innerHTML += txt;
    i++;
  }
}
setInterval(typing, 300)

 

그리고 각 페이지를 스크롤하며 이동할 때, Scroll snap을 이용해서 일정 부분 이상이 스크롤되면 다음 페이지가 자동으로 화면 상단으로 스냅되는 효과를 구현했다.

.container {
  width: 100%;
  height: 100vh;
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

.section {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  background-color: #ffecb3;
}

 

각 페이지 오른쪽 하단에는 scroll back to top 버튼을 생성해서, 어느 페이지에서든 웹 페이지의 최상단으로 이동할 수 있게 했다. 이 때의 스크롤 기능 또한 a태그를 이용했다.

<a href="#top_line"><span><img class="top_img" src="top-icon.jpg"></span></a>

 

내가 좋아하는 것들을 나타내는 페이지는, 좋아하는 것들을 암시하는 대표 이미지들을 삽입하고 해당 이미지들에 마우스를 올렸을 때 텍스트가 나타나도록 구현했다. CSS의 hover로 간단히 구현될 줄 알았는데, 이미지와 텍스트가 각각 다른 태그로 작성되어 있어서, 이미지가 hover 되었을 때 텍스트의 display를 none에서 block으로 변경하는 것이 생각보다 까다로웠다. 그래서 JavaScript를 이용해서 효과가 작성된 class를 추가하는 방식으로 구현했다.

const fav_image = document.querySelectorAll('.fav_image');

fav_image.forEach((fav) => fav.addEventListener('mouseover', hoverEvent));
fav_image.forEach((fav) => fav.addEventListener('mouseout', hoveroutEvent));

function hoverEvent() {
  this.querySelector('.fav_image > img').classList.add('hovered_img');
  this.querySelector('.img_title').classList.add('hovered_front');
}

function hoveroutEvent() {
  this.querySelector('.fav_image > img').classList.remove('hovered_img');
  this.querySelector('.img_title').classList.remove('hovered_front');

 

마지막으로 JavaScript 응용 페이지는 다음주에 학습하는 이벤트를 예습하는 차원에서, e.target을 이용해서 만들었다. 방문자의 이름을 받아와서 출력하고, 6자리의 색상 코드를 입력받아서 자기소개 페이지의 배경 색상을 변경하는 기능이 있다.

const color_input = document.querySelector('.color_input');
const section = document.querySelectorAll('.section');
const section6_mid = document.querySelector('.section6_mid');

color_input.addEventListener('change', (e) => {
  section.forEach((s) => s.style.setProperty("background", `#${e.target.value}`));
  section6_mid.innerHTML = `<span>입력하신 색상 코드는 #${e.target.value} 입니다.</span>`;
});

const reset_btn = document.querySelector('.reset_btn');

reset_btn.addEventListener('click', () => {
  section.forEach((s) => s.style.setProperty("background", `#ffecb3`));
  section6_img.src = "2.png";
  section6_bubble.innerHTML = `<input type="text" class="name_input" placeholder="방문자님, 당신의 이름은 무엇인가요?">`;
  section6_mid.innerHTML = `<input type="text" class="color_input" placeholder="원하는 색상코드 여섯자리를 입력해보세요! 예) e9e9e9">`;
});

const name_input = document.querySelector('.name_input');
const section6_img = document.querySelector('.section6_img');
const section6_bubble = document.querySelector('.section6_bubble');

name_input.addEventListener('change', (e) => {
  section6_img.src = "3.png";
  section6_bubble.innerHTML = `
  <span>안녕하세요, ${e.target.value} 님!
  <br>
  아래의 입력칸을 통해 제 홈페이지 색을 변경해보세요 🎨
  </span>`;
});

 

 

🌠 최종적으로 완성된 결과물은 여기에서 볼 수 있다.

 

---

 

과제를 수행하면서 과거에 비해 많이 발전된 것을 느낄 수 있었지만, 한편으로는 아직도 부족함이 많이 느껴지기도 했다.

CSS의 position이나 transform을 사용하는 데에 있어서 아직 미숙한 점이 있었고, JavaScript를 생각만큼 자유자재로 다루는 것은 여전히 쉽지 않았다. 아직도 갈 길이 멀다😂

자기소개 페이지에 적힌 것 처럼 열심히 배우며, 성장을 거듭하는 개발자가 되기 위해 꾸준히 노력해야겠다.