<SWF> 반응형 웹페이지 만들기 (2)

<<style.css>>

기존의  커서모양인 pointer가 아닌 hover상태에서는 grab, active상태에서는 grabbing 형태로 나타나도록 바꿔 주었다.

 

<<index.html>>

사진과 같이 위쪽 모양의 화살표 아이콘을 두어 스크롤을 내렸을 때 한번에 맨 위쪽으로 올라갈 수 있도록 하는 아이콘을 만들었다.

 

<footer> 아래쪽에 id "backtotop"과 class "show"를 가지는 a태그를 추가

 

<<style.css>>

border-radius: 20px;

border-radius의 값을 width,height 값의 1/2로 설정하게 되면 원 모양

 

position: fixed;   

bottom: 30px;

right: 30px;

position을 fixed로 설정했기 때문에 bottom과 right가 반드시 필요하고,

이 때 id "backtotop"을 가지는 아이콘은 문서 흐름에서 벗어나 밑에서 30px, 오른쪽에서 30px 떨어진 곳에 만들어 진다.

 

z-index: 999;

다른 내용들보다 가장 위쪽에 나타날 수 있도록 설정

 

show 클래스까지 만들어 주고 나면 오른쪽 아래에 원 모양의 아이콘을 보여지게 된다.

이제 원모양안에 가상 요소 셀렉터를 이용해 위로 가는 화살표 모양을 넣어주려고 한다.

 

가상 요소와 가상 클래스

가상 요소(Pseudo-Element) : 선택자에 추가하는 키워드로, 선택한 요소의 지정된 부분에 스타일을 입힐 수 있다.
- 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능

ex) 
요소의 첫 글자 또는 줄 스타일 지정
요소의 내용 앞 또는 뒤에 내용 삽입

문법
선택자 :: 가상요소 {
속성: 속성 값;
}

 

- before 와 after를 사용할 때에는 content라는 속성이 필요

content : HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 가짜 속성

 

가상 클래스(Pseudo-Class) : 별도의 class를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있는 것
- 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용

 

 #backtotop::after {

    content: "\f077";

    font-family: FontAwesome;

}

/* 아이콘 넣는 방법

    1. ::after (요소 뒤에 content 추가) 가상 요소에서

    2. content: "폰트어썸 유니코드"

    3. font-family : FontAwesome */

 

<<main.js>>

이제 javascript를 이용해

1. 웹페이지가 아래로 스크롤 되어있지 않은 경우에는 아이콘이 사라지도록

2. 클릭할 경우 가장 위쪽으로 이동하는

기능을 추가한다.

 

function checkScroll()

: 페이지가 y축으로 얼만큼 스크롤 되어있는지에 따라 'show'클래스를 추가하거나 제거해준다.

 

https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset

 

Window.pageYOffset - Web API | MDN

 

function moveBackToTop()

: 가장 위쪽으로 smooth하게 스크롤 해준다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll

Element.scroll() - Web APIs | MDN

 

window.addEventListener('scroll', checkScroll);

/* window 어느부분에서든 scroll을 할 때마다 checkScroll 함수 호출 */

backToTop.addEventListener('click', moveBackToTop);

/* backToTop을 click 할 때마다 moveBckToTop 함수 호출 */

아래의 그림과 같이 pageYOffset 값이 0인 경우에는 아이콘이 사라진다.