비교적 최근에 생긴 css 기능인 snap scroll을 사용해서 소개 웹페이지를 만들기로 생각하고 실행에 옮겼습니다.
일반적으로 마우스 스크롤을 계속해서 원하는 만큼 웹페이지의 아래쪽으로 향하게 되는데
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글에 유용한것들 모아두면 사용하긴 하는데 더 좋은 방법 없을까??..
'Programming > TIL' 카테고리의 다른 글
2022.9. 5월 강민철 튜터님, 이창호 튜터님 특강 (2) | 2022.09.06 |
---|---|
2022.9.6 TIL 백준 3일, 파이썬 특강 + 계산기 실습 (0) | 2022.09.06 |
2022.8.30화 TIL 네비게이션 바, 팀프로젝트 (0) | 2022.08.30 |
2022.8.29월 내일배움캠프 AI 시작! (2) | 2022.08.30 |
계산기 만들기 (0) | 2022.08.23 |