HTML/CSS 자기소개 페이지 구현

Inah-_-·2021년 1월 15일
0

HTML/CSS

목록 보기
3/6
post-thumbnail

😆MISSTION CLEAR😆

✅ Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기
✅ 스크롤 고정 Navigation bar 효과주기
✅ Navigation bar 메뉴 hover시 색상이 바뀌게 효과주기



1. HTML 레이아웃 정하기

처음 레이아웃을 구현을 잘 정해놔야 CSS가 깔끔해진다는 글을 보고 최대한 생각하고 생각해서 코드를 짰는데.. 그럼에도 뭔가 지저분(?)해 보인다😱


MISSION_01 스크롤 고정 네비

<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-columnsgrid-template-rows
  • 자식 요소 grid-columngrid-row

나는 headerdisplay:grid를 주고 grid-auto-flow:column;을 주어 grid안의 요소들을 자동배치 되게 하였다.

MISSION_02 메뉴 hover시 색상 변화 효과주기

    <ul class="nav">
        <li><a href="#scroll_profile">profile</a></li>
        <li><a href="#scroll_contact">contact</a></li>
    </ul>
    

이 부분이 나의 단촐한 자기소개 메뉴이다😁

메뉴에는 a 태그가 있기 때문에,
a:hover 에 속성을 부여해야 한다.
a링크에 효과를 주는 데에도 순서가 있는데

  1. a:link - 클릭 전의 링크 상태
  2. a:visited - 클릭 후의 링크 상태
  3. a:hover - 마우스를 올렸을 때의 링크 상태
  4. a:active - 클릭하는 동안의 링크 상태

이 순서를 지켜야 css 오류가 안나고 제대로 구현이 된다.

TMI로 hover를 맨 첫번째에 작성했다가 작동이 안돼서 열심히 구글링 하였다ㅠ


MISSION은 여기까지!
이 이후엔 재미있던 부분을 작성해볼까 한다.



2. 메뉴 클릭 시 해당 메뉴 스크롤 이동

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 태그의 스크롤 위치로 이동한다.


하지만 IE와 엣지의 경우 아직 지원되지 않는다는 치명적 단점.. 또 속도 조절이 어려워 속도 변경을 원할 경우 네이티브로 구현하거나 라이브러리를 사용해야하는 단점이 있다.

자바스크립트 정복 후 다시 돌아오겠다..😠


CSS 애니메이션 구현하기

재미있어서 넣어본 애니메이션 키프레임..

내가 구현한 애니메이션은 아주 간단한 편이라

[출처 둘리의 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. 애니메이션을 넣어줄 classanimation-name 부여
2. 해당 name의 애니메이션이 몇초의 딜레이로 얼마나 움직일지 설정하면 끝이다.

💻HTML/CSS 페이지 제작을 마치며

???:오우 재밌다.


속성 하나 하나씩 알아내며 찾아갈 때 마다 희열이 느껴짐
벌써 할줄 아는게 생겼다는 성취감? 굿굿👍
자바스크립트와 파이썬이 기대된다



profile
Backend Developer

0개의 댓글