자기소개 웹사이트 개발(2)

👨‍💻 To do list

1. js 적용해서 contact에 효과 넣기
2. section마다 색깔 다르게 적용하기(파스텔 계열)
3. 위에 nav에서 Home으로 누르면 깔끔하게 이동하게 하기(top이 nav바로 밑인 위치로 이동된다;;)
4. achive에 본문에 내용 추가

👨‍💻 개발 중 습득 지식

1. window.scrollY 값이란?

window.scrollY는 웹페이지에서 수직 스크롤이 얼마나 이동했는지 나타내는 JavaScript의 속성이다.

👨‍💻 오늘 한 것

1. js로 contact section에 효과 넣기

위의 gif에서 보이겠지만 @keyframes와 js를 통해 js에서 css요소(animation) 요소를 추가함으로서 contact section 효과를 넣었다.

/*css*/

@keyframes grow{
	from {
		transform: translateY(1.5rem);
	}
	to {
		transform: translateY(0);
	}
}

@keyframes grow-out {
	from {
		transform: translateY(0);
	}
	to { 
		transform: translateY(1.5rem);
	}
}

// javaScript

const contactElement = document.querySelector("#contact h2");
const velogGithubElement = document.querySelector("#contact ul");

window.addEventListener("scroll", function(){
	let value = window.scrollY;

	if(value > 3100){
		contactElement.style.animation = "grow 0.8s linear";
		velogGithubElement.style.animation = "grow 0.8s linear";
	}else{
		contactElement.style.animation = "grow-out 0.5s linear";
		velogGithubElement.style.animation = "grow-out 0.5s linear";
	}; 
    })

2. section마다 색 다르게 하기

뭐.. ㅎ 여러 색 조합 사이트들 참고해서 파스텔이지만 좀 사무적이고 무게감 있는 색을 사용할려고 했는데 쉽지는 않았고 앞으로 색 감각?을 좀 더 키워야할 필요성을 느낀다.

3. Home으로 정확히 이동

원래는 nav에 home을 누르면 nav 밑에 home section이 있어서 nav를 포함하지 않는 home으로 이동을 했는데 nav와 home section 사이에 span을 넣어서 해결했다.

<nav class="menu">
				<ul>
					<li>
						<a href="#test">💻<span class="tooltip-text">Home</span></a>
					</li>
					<li>
						<a href="#about">💻<span class="tooltip-text">About Me</span></a>
					</li>
					<li>
						<a href="#Achievement">💻<span class="tooltip-text">Achievement</span></a>
					</li>
					<li>
						<a href="#contact">💻<span class="tooltip-text">Contact</span></a>
					</li>
				</ul>
			</nav>
		</header>

		<span id="test"></span>
		
		<main>
			<div class="container">
				<section id="home">

👨‍💻 소감

아직 많이 사이트가 부족한 것들이 보인다. 원래는 좀 더 깔끔하고 예쁜 웹사이트를 만들려고 했는데 실제 다른 웹사이트들에 비해 좀 어색한 부분들이 많아 조금 더 디자인을 만질까라는 생각도 든다.
또한 이미지 화질이나 achive section에 설명, 링크를 거는 것도 매우 좋을 것 같다는 생각이 든다.

더 만지고 수정할 수도 있지만 이 토이 프로젝트를 통해서 많은 것들을 배웠고 이제는 조금 더 javaScript와 backend에 중점을 둔 다른 프로젝트로 넘어갈 시기가 아닌가 싶다.

군대에서의 첫 토이프로젝트 열심히 하나를 만들었다는 것에서는 만족스럽고 결과물에서 불만족스러운 부분들도 있다. 앞으로 더 발전하길 바란다.

코드 보러가기