✅ Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기
✅ 스크롤 고정 Navigation bar 효과주기
✅ Navigation bar 메뉴 hover시 색상이 바뀌게 효과주기
처음 레이아웃을 구현을 잘 정해놔야 CSS가 깔끔해진다는 글을 보고 최대한 생각하고 생각해서 코드를 짰는데.. 그럼에도 뭔가 지저분(?)해 보인다😱
<header>
<h1><a href="#scroll_intro" class="intro_a">
Inah Page<img src="imgaes/header_name_logo.jpg" alt="namelogo"></a>
</h1>
<ul class="nav">
<li><a href="#scroll_profile">profile</a></li>
<li><a href="#scroll_contact">contact</a></li>
</ul>
</header>
나는 스크롤 고정을 position:pixed
로 했는데,
요새는 sticky
를 많이 쓴다고 한다.
스크립트 없이 css 한줄로 원하는 스크롤 지점에서 pixed
되는 부분이 되게 매력있다고 생각 되어서
sticky
속성을 쓰려고 했으나..
IE, 엣지15 및 이하 버전에서는 sticky
속성을 지원하지 않는다고 한다
header{display: grid; grid-auto-flow: column; grid-template-columns:1fr ; width:100%; position: fixed; top:0; left:0; right:0;}
header 메뉴 정렬에는 grid
속성을 줬다.
grid
속성이 레이아웃의 문제점들을 해결할 수 있는
최초의 CSS 모듈이라고 한다.
grid
'
- 컨테이너 요소
display:grid;
- 열과 행의 크기를 지정하는
grid-template-columns
와grid-template-rows
- 자식 요소
grid-column
과grid-row
나는 header
에 display:grid
를 주고 grid-auto-flow:column;
을 주어 grid
안의 요소들을 자동배치 되게 하였다.
<ul class="nav">
<li><a href="#scroll_profile">profile</a></li>
<li><a href="#scroll_contact">contact</a></li>
</ul>
이 부분이 나의 단촐한 자기소개 메뉴이다😁
메뉴에는 a
태그가 있기 때문에,
a:hover
에 속성을 부여해야 한다.
a
링크에 효과를 주는 데에도 순서가 있는데
a:link
- 클릭 전의 링크 상태a:visited
- 클릭 후의 링크 상태a:hover
- 마우스를 올렸을 때의 링크 상태a:active
- 클릭하는 동안의 링크 상태이 순서를 지켜야 css 오류가 안나고 제대로 구현이 된다.
TMI로 hover를 맨 첫번째에 작성했다가 작동이 안돼서 열심히 구글링 하였다ㅠ
MISSION은 여기까지!
이 이후엔 재미있던 부분을 작성해볼까 한다.
HTML과 CSS 어느 정도 작성한 후
내가 만든 사이트를 설레는 마음으로 쭈~욱 훑어봤다.
근데 생각보다 너무너무 정적인 것 아닌가..
내가 그동안 봐왔던 넷플릭스, 유튜브 기타 등등
좋아하던 동적 사이트들과는 전혀 다른 조용하고
움직임 없는 사이트에 놀랐더랬다🤣
그래서 당장 할 수 있는걸 찾기 시작했는데,
[출처 CSS 스크롤 이동 애니메이션]
열심히 구글링한 결과 빛과 소금같은
스크립트 없이 CSS로 스크롤 이동 애니메이션 속성을 찾아냈다.
클릭 시 이동할 위치에
id
선택자를 주고,
나의 경우 클릭할 네비 메뉴의a
태그에 선택자를 기입했다.
그리고HTML
을 선택자로scroll-behavior:smooth;
작성 해주면 끝!
<h1><a href="#scroll_intro"class="intro_a">
Inah Page<img src="imgaes/header_name_logo.jpg" alt="namelogo"></a>
</h1>
<ul class="nav">
<li><a href="#scroll_profile">profile</a></li>
<li><a href="#scroll_contact">contact</a></li>
</ul>
</header>
<div id="scroll_intro"></div>
<div id="scroll_profile"></div>
<div id="scroll_contact"></div>
위 코드의
a
태그를 클릭할 경우div
태그의 스크롤 위치로 이동한다.
자바스크립트 정복 후 다시 돌아오겠다..😠
내가 구현한 애니메이션은 아주 간단한 편이라
[출처 둘리의 IT Study]
참고할 분이 계시다면..!
쉽고 재밌게 설명해주셔서 아주 도움이 많이 됐다.
<div>
<span class="contact_img2"><img src="imgaes/contact_img2.png" alt="contact_img2"> </span>
</div>
.contact_img2 {
position:fixed; right:280px; z-index: 1;
animation-name:img;
animation: img 5s infinite;
animation-timing-function: ease-in-out;
}
@keyframes img {
0% {top:0;}
50% {top:30px;}
100% {top:0;}
나의 경우 고정된 이미지가 스크롤에 fixed
되는 걸 원했다.
1. 애니메이션을 넣어줄 class
에 animation-name
부여
2. 해당 name의 애니메이션이 몇초의 딜레이로 얼마나 움직일지 설정하면 끝이다.
???:오우 재밌다.
속성 하나 하나씩 알아내며 찾아갈 때 마다 희열이 느껴짐
벌써 할줄 아는게 생겼다는 성취감? 굿굿👍
자바스크립트와 파이썬이 기대된다