2022.8.30화 Team Project 개인 프로필 결과물

비교적 최근에 생긴 css 기능인 snap scroll을 사용해서 소개 웹페이지를 만들기로 생각하고 실행에 옮겼습니다.

page 1

일반적으로 마우스 스크롤을 계속해서 원하는 만큼 웹페이지의 아래쪽으로 향하게 되는데

Snap scroll 을 활용하여 한번의 스크롤을 입력하고 스크롤을 입력하지 않아도 보이지 않던 아래의 페이지를 모니터화면에 100%로 맞추어 자연스럽게 들고 오게끔 구현했습니다.

 

항상 고정되어있는 네비게이션 바를 투명하게 만들어서 미관상으로도 좋게, 스크롤에 답답함을 느끼는 분들을 위해 바로 이동 할 수 있게끔 실용적인 부분도 만들었습니다.

<ul>
    <li class="ul"><a style="text-decoration-line: none;" href="#home">Home</a></li>
    <li class="ul"><a style="text-decoration-line: none;" href="#about">About</a></li>
    <li class="ul"><a style="text-decoration-line: none;" href="#mbti">mbti</a></li>
    <li class="ul"><a style="text-decoration-line: none;" href="#contact">Contact</a></li>
</ul>

z-index: 1;

네비게이션바가 사진 아래로 지나가면 이상하게 보여서 z-index 를 사용하여 네비게이션바가 제일 위로 오게끔 했습니다.

왼쪽상단 화면에 네비게이션 바와 함께 고정된 팀 로고 SWAEPA 가 있는데  버튼에다 사진을 넣어서 클릭시 넷플릭스 프로필 선택 화면으로 다시 돌아갈 수 있습니다.

<div class="logo">

    <button onclick="window.location.href='#'" type="button" class="button" >
        <img class="button-image" width="150px"
             src="/static/SWAEPA.png"/>
    </button>

</div>

nth-child(N) 선택자 를 활용해서 배경색을 짝수와 홀수 페이지에 따라 반복되게끔 설정했습니다.

.item:nth-child(2n+1) {
  background-color: #4e5a56;
  color: white;
}
.item:nth-child(2n) {
  background-color: teal;
  color: white;
}
.item:nth-child(4) {
  background-color: black;
  color: white;
}
.item:nth-child(5) {
  background-color: teal;
  color: white;
}

마지막 인스타그램과 페이스북은 <a> 안에 <img> 를 넣어서 링크를 만들었습니다. 프로젝트를 진행하며 다 가져와서 쓰기보다는 직접 만들어보고 다양한 방법을 찾아봤습니다.

<a style="text-decoration-line: none;" href="https://www.facebook.com/">
   <img src="/static/facebook.png" width="100px">
</a>
<a style="text-decoration-line: none;" href="https://www.instagram.com/">
    <img src="/static/insta.png" width="100px">
</a>

Feedback

처음 시작할때 아무것도 모르는 상태에서 시작부터 했기 때문에 당연하게도 구도를 잡고 시작하지 않았다.

산전수전을 다 겪고 앞쪽에 아무렇게나 만든 코드들이 생각나서 뒤늦게 바꿨으나 너무 많아 모든걸 마음에 들게 바꾸지는 못했다. 중간을 유지하며 반응형으로 만들려고 노력했으나 실패했고 시간이 있을때 완벽하게 만들어서 사용 할 생각이다.

 

네비게이션바 만들어보겠다고 몇시간을 썼는지 모르겠다. 어떻게 만들어졌는지도 모르겠으니 주말에 또 만들어 볼 예정이다.

 

처음으로 css 를 따로 만들어서 저장했고 사용했는데, 경로를 잘못설정해서 튜터님과 이야기 나눴는데 다른 사람들도 필요한 정보라면서 슬랙에 올려주셨다.

사진은 static 에 넣고 css 파일은 static 안에서도 css 폴더를 따로 만드는게 좋다고 말씀해주셨다

문제가 생기면 침착하게 콘솔창과 파이참 확인하고 구글링을 하는 방법도 배웠다.

 

tip글에 유용한것들 모아두면 사용하긴 하는데 더 좋은 방법 없을까??..