[HTML] 해당 본문으로 바로 이동, 드롭다운 메뉴 만들기

 

HTML 본문으로 바로 이동, 드롭다운 메뉴 만들기!

 

a태그와 href와 id를 이용해서 드롭다운 메뉴를 만들거에요.

 

간략하게 오늘 코딩의 원리를 설명하면 '이걸 클릭하면 href를 통해서 미리 알려준 id로 이동 시키세요' 라고 명령을 걸어 두는거에요. 예를 들어서 '1' 이라고 알려줬다면 본문 내용중에 '1'이라는 id로 설정된 곳으로 이동하는거에요.

 

이걸 해놓으면 바로 글을 읽는 사람들이 바로 원하는 위치로 이동을 할 수 있겠죠?

이를 이용한 곳은 평소 이용하는 웹사이트 들에서 많이 볼 수 있을거에요. 자주 사용하는 방법으로는 다른 웹페이지와 연결을 해주기도 하고, 목차를 설정해서 해당 목차로 바로 이동하여 볼 수 있도록 만들어주는 역할을 수행해요!

(목차 설정과 해당 목차로 이동하는 건 다음 포스팅에서 알려드리도록 할게요!)

 

원리는 이러하고 코딩을 직접해보면서 자세히 알아볼게요.

---

원리가 궁금하다면 이걸 클릭

(위에 링크를 클릭하면 글의 제일 아래부분으로 내려가요)

눌렀다면 댓글과 공감도 한번 부탁해요^^

---

이제 설명을 봅시다!

 

( 사진, '여기'에서 ---------> '여기'로 이동!  페이지 아래로 내려가서 이동)

클릭했을때 이동시키고 싶은 부분의 뒤에 나올 id 값을 #과 함께 적습니다.

---

 

HTML 드롭다운 코딩 방법

 

<p data-ke-size="size16"><a href="#이름붙이기">적고싶은말 적기</a></p>
<p data-ke-size="size16"><a id="앞에붙였던이름"></a></p>

 

원리는 간단해요 위에 적은 것처럼 '이름붙이기'란에 1,2,3... 아무 숫자 혹은 문자를 적어요. 그리고 뒤에 '적고 싶은말 적기'란에는 말 그대로 원하는 텍스트를 넣으면 됩니다. 위에서 예시로 보여줬던 내용을 HTML 코딩 작업을 그대로 보면 아래 그림과 같이 되는거에요.

 

그리고 원하는 위치에 앞에서 붙였던 이름이나 번호와 같은 문자를 입력해주면 앞에서 적용했던 '적고 싶은 말 적기' 란을 클릭하면 해당 위치로 이동하게 됩니다.

 

 

a태그를 이용해서 드롭다운

 

드롭다운 예시를 코드펜(codepen)에서 직접 확인해보세요!

https://codepen.io/hyeongwoo/pen/PojxdMV

드롭다운 예시

 

---

 

HTML a태그 이용해서 링크로 이동 + 새탭을 열기, 현재창에서 열기

 

 

앞에서 '이름 붙이기'라고 이야기 했던 부분에 링크를 넣는다면 해당 링크로 바로가게 만들 수 있어요. 그러면 현재 웹페이지에서 다른 웹페이지로 쉽게 이동할 수 있겠죠?

 

여기서 주의! 따음표 안에 # 대신 https://를 넣어 주어야 해요.

아래의 링크 중 첫번째 링크는 열려있는 창에서 구글로 이동하게 되고 두번째 링크는 새로운 탭에서 구글 창이 열릴거에요. 이건 target="_blank" 를 삽입해주면 됩니다! 위치는 구글 링크를 입력한 바로 뒤에 넣어주면 됩니다.

---

이걸 누르면 바로 구글로 이동해요

이걸 누르면 바로 구글이 새창으로 열려요

---

a태그 이용해서 링크연결

 

여기 제가 설명한 코딩은 해당 문장의 Body에 들어갈 기본적인 내용만 설명한 것이에요!

 

 

참고사항

a태그의 특성상 링크를 한번 누르고 나면 해당 글자의 색깔이 바뀌게 되요. 

 

---

이런거죠

(댓글 안써주면 미워...)

이걸 눌러서 다시 위로 갑시다!

---

 #HTML코딩 #HTML드롭다운 #HTML목차

#a태그 #HTML링크걸기