자기소개 페이지

wecode 에서 1주차 때 만들었던 자기소개 페이지에 사용한 기능을 설명하는게 3주차 미션이다.

이 비루한 자기소개 페이지에 대해 무엇을 설명할게 있느냐마는..ㅠㅠ

나는 자기소개 페이지에 딱 한가지만 자바스크립트를 사용했다. 그리고 나머지는 html, css를 사용했다.

JavaScript

const header = document.querySelector("header");

function scroll () {
    if (window.scrollY >= 530) {
        header.classList.add('active_nav');
    } else {
        header.classList.remove('active_nav');
    }
}

window.addEventListener("scroll",scroll);

CSS

.active_nav {
    background-color: rgb(81, 117, 234);
}

.active_nav .nav_logo {
    color: white;
}
.active_nav .nav_menuList a {
    color: white;
    text-shadow:2px 2px #525151;
}
.active_nav .nav_menuList li :hover {
    color: tomato;
}

scroll을 내릴 때, header의 배경색, 글자색이 변하게 하였다.

이걸 Y축 길이를 계산해서 만들었는데, 이렇게 하기 보다는
스크롤이벤트로 다시 짜야할 것 같다...

만들것을 다시 보면서 수정하고 싶은 것들이 굉장히 많아졌다.

1. 전체 font size 수정할 것.
   => px은 절대적인 단위여서 브라우저의 크기가 크던 작던 사이즈가 고정된다.
   반응형 페이지를 만들기 위해서는 em, rem 등을 사용해야 할 것이다.

2. 자바스크립트를 더 많이 사용할 것.
   역동적인 페이지를 위해서는 JS 사용이 필수적인 것 같다.
   아직 JS를 자유롭게 사용할 실력이 안돼서 재미없는 페이지가 됐다..
   사진을 옆으로 넘길 수 있도록 한다거나,
   타이핑 효과를 만들어보자

3. 반응형 페이지로 만들자.
   현재 구현하고 싶은 것은 웹 페이지 크기가 작아졌을 때, header 부분이 반응했으면 좋겠다.
   logo 가 가운데로 오고, menu가 접어진 상태? 안보이게 숨기고, contact icon 들도 숨겨져서 안보였으면 좋겠다.

4. 내용 추가할 것.

먼저, font size 수정하고 있는데, 어렵다.
분명 사이즈가 바뀌어야하는데 다 고정되어있네..?ㅋㅋ 하아 어렵다
화이팅....

자기소개 페이지