[html] a태그를 이용한 스크롤다운

안녕하세요. 플입니다.

오늘은 a태그를 이용해 스크롤 다운을 해볼게요.

 

---

 1.  스크롤다운

스크롤 다운이라는 것은 간단히 말해 상단에서 특정 메뉴를 눌렀을 때 

그 메뉴가 있는 곳으로 스크롤이 이동하는 것을 말합니다.

보통 세로로 긴 홈페이지에 많이 사용해요. 

 

그리고 보통은 jQuery로 적용해주지만 오늘은 a태그를 이용해서 스크롤다운 기능을 만들어볼 거예요.

---

 2.  id 넣기

스크롤을 멈추게 하고 싶은 영역에 id를 만들어줍니다.

class가 있더라도 추가로 넣어주셔도 상관없어요. class는 적용이 안되기 때문에 id로 꼭 넣어주셔야 합니다.

 

---

 3.  a태그에 적용

<a href="#cha"> </a>

메뉴로 돌아와 a태그 href 부분에 #+id명을 적어줍니다. 

그러면 끝입니다. 간단하죠? jQuery는 엄청 오래 걸리는데.. ㅠㅠ

다만 jQuery만큼 부드럽게 이동하지는 않아요.

 

여기서 #은 id 선택자에요. 이름을 부를 때 id인지 class인지 구별을 해주기 위한 장치라고 생각해주세요.

 

 

직접 클릭해서 확인해 보고 싶으신 분들은 아래 링크에서 확인해주세요~

 

https://ssimplay.github.io/paintdrop

paint drop

 

 

---

그럼 이만.

총총.