HTML(Hypertext Markup Language)에서 가장 중요한 단어인 H는 하이퍼텍스트로 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 링크하여 이동할 수 있게 해주는 아주 중요한 태그로 앵크태그(Anchor Tag) 또는 <a> 태그로 불리며, 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용하는 역할을 하게 됩니다. 오늘은 페이지 내부이동에 대하여 소개하고자 합니다.
01. HTML_앵커태그(Anchor Tag)란
웹문서가 너무 길 경우 필요한 곳에, 문서안에 이름을 붙여 놓고 그 위치로 한번에 이동하는 링크를 anchor라 하며 <a> 태그로 표시합니다
----------
----------
02. HTML_앵커태그(Anchor Tag) 코딩
링크를 걸려면 <a>태그의 속성인 href에 이동할 경로를 지정해두고 <a>태그와 </a> 사이에 링크를 거는 텍스트나 이미지 태그를 넣어주면 됩니다
<a bref="이동할 주소">텍스트</a>
<a bref="이동할 주소"><img src="이미지경로"</a>
01) 문서의 body안에 작성합니다
02) 메뉴를 제목으로 하여 텍스트 크기가 가장 큰 <h1>태그로 작성한 다음, id 속성값을 "menu"하였습니다
03) <ol>~</ol>태그로 순서가 1. 2. 3으로 시작하는 목록을 만들고, 하위 목록을 <li>~</li> 태그로 녹차의 효능과 콩나물의 효능을 입력합니다 메뉴제목과 하위메뉴를 구분하기 위하여 <hr> 태그로 수평선을 넣습니다
04) 하위 목록으로 링크연결을 위하여 <a>태그를 사용합니다. 이때 링크값은 하위메뉴의 id앞에 #를 붙인 "#tea"와 "#bean"으로 지정해야 합니다
05) 하위메뉴의 첫번째 메뉴인 녹차의 효능에 대하여는 id를 "tea"로 하고, 두번째 메뉴인 콩나물의 효능에 대하여는 id로 "bean"으로 하였습니다. 두개의 하위메뉴의 제목의 텍스트는 <h1>보다 작은<h2>로 하였습니다.
06) 하위문서의 첫번째 메뉴인 녹차의 효능에 대한 내용을 입력하고, 보기 좋게 하기 위하여 문장을 단락<p> 태그로 묶고, 줄바꿈<br> 태그를 사용합니다.
07) 하위문서의 두번째 메뉴인 콩나물의 효능에 대한 내용을 입력하고, 보기 좋게 하기 위하여 문장을 단락<p> 태그로 묶고, 줄바꿈<br> 태그를 사용합니다.
08) 내용이 길기 때문에 매뉴로 돌아가는 링크를 작성합니다. 여기서는 상단의 <h1> 메뉴의 ID를 적용하며, 때 ID 값을 적용할 때는 #를 붙인 "#menu"로 하여야 합니다
- 텍스트 <a href="#menu">[매뉴로]</a> : [메뉴로]클릭하게 되면 상단으로 이동합니다
- 이미지 <a href="#menu"><img src="images/first.jpg" width="100" height="50"></a>
이렇케 작성된 앵커태그인 <a>태그를 하위 메뉴의 끝이나 앵커를 넣기를 원하는 영역에 텍스트나 이미지로 삽입하여 클릭시 원하는 영역인 여기서는 상단의 메뉴로 이동하는 앵커태그인 <a>태그를 삽입 입력합니다.
09) HTML 링크태그코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다
03. 웹브라우저에서 보이는 HTML 앵커태그 <a> 태그
HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. 메뉴로 텍스트나 삽입된 이미지를 클릭하게 되면 상단에 있는 메뉴로 이동이 되는 것을 확인할 수 있습니다
