Anchor
웹페이지에서 특정한 위치로 이동할 때 쓰이는 태그를 Anchor 태그라고 한다. Anchor태그는 현재 위치에서 다른 맥락, 위치로 이동할 때 쓰인다.
<a>를 사용해서 여러가지 동작을 제어할 수 있다.a태그에는 attribute, 속성을 추가해서 사용해야 되는데,
href속성을 반드시기본적으로 추가해줘야 된다.
<a>태그의 사용법
<a href="address"> link </a>
href : hypertext reference
hypertext는 html문서, 웹페이지로 생각하면 쉽다.
reference는 사전적인 의미로는 참조를 뜻하지만, 프로그래밍적인면에서 살펴보면 주솟값을 나타낸다.
href 주솟값 표기 방법 (anchor tag 활용 5가지)
- Web URL
- 페이지 내 이동 (페이지의 한 부분에서 다른 부분으로 이동)
- 메일 주소
- 전화 번호
- target="_blank" (새 탭으로 이동)
1. Web URL로 하는 법
이동하고자 하는 페이지의 주소를 href에 등록하는 방법이 일반적이다.
<a href="https://www.google.com/">Google 페이지로 이동!</a>
혹은 이동하고자하는 문서가 있다면 문서의 상대 경로를 입력해도 된다.
<a href="상대경로">~~ 문서로 이동</a>
2. 페이지 내 이동
페이지의 한 부분에서 다른 한 부분으로 이동할 때 사용할 수 있다.
한 페이지에 내용이 많거나 해당 내용에 관한 문단으로 바로 가고 싶을 경우 이동하고자 하는 해당 태그에 id를 줘서
<a href="">id와 맞춰서 주소를 정해주면 된다.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Anchor</title> </head> <body> <a href="#summary">요약으로 이동</a> <a href="#geography">지리로 이동</a> <a href="#recent">최근의 북극으로 이동</a> <h1>북극</h1> <section id="indexcard"> <h3>목차</h3> <ol> <li>지리</li> <li>생물</li> <li>북극의 자원</li> <li>원주민</li> <li>북극의 정치</li> <li>최근의 북극</li> <li>참고문헌</li> </ol> </section> <br /> <section id="summary"> <h3>요약</h3> <p> 북극은 학자에 따라 정의가 다르다. 예컨대, 하루 24 시간이 밤이거나 낮이 시작하는 북위 66도33분 북극권(北極圈)의 북쪽을 북극으로 정의하기도 한다. 그러나 그보다는 연중 기온이 가장 높은 7월의 평균기온이 10℃보다 낮은 지역을 북극으로 정의하는 학자들이 더 많다1). 수목생장한계선(樹木生長限界線)과 대략 일치하는 이 정의에 따르면, 북극은 시베리아북쪽에서는 북위 70도와 71도를 대강 따라간다. 반면 지역에 따라 오르내리는 곳도 있어, 예컨대, 베링해 남쪽으로는 알류샨열도(Aleutian列島) 남쪽, 북위 50도까지 내려오며 캐나다 북동부지역과 그린란드 남쪽에서도 상당히 남쪽까지 내려온다 </p> </section> <br /> <section id="geography"> <h3>지리</h3> <p> 북극의 대부분은 바다이며, 면적은 1,406만 km2로 전 세계 바다의 3.9%를 차지한다2). 북극의 평균수심은 1,200 m이며 가장 깊은 곳은 5,608 m이다. 북극은 북대서양으로 대서양과 통하며 베링해(Bering Sea)로 북태평양과 통한다. 아시아대륙에서 오브(Ob)강과 예니세이(Yenisey)강과 레나(Rena)강이 흘러들며, 북아메리카대륙에서 유콘(Yukon)강과 매켄지(Mackenzie)강이 흘러든다. 북극의 가장자리는 나무가 자라지 않는 동토(凍土)이다. 또한 연평균강수량이 100 mm도 되지 않아 아주 건조하다. 대부분이 바다인 북극에는 유라시아대륙 쪽으로 스발바르군도(Svalbard Islands), 프란츠 요셉 군도(Franz Josef Islands), 노바야 젬랴(Novaya Zemlya)섬, 뉴 시베리아 군도(New Siberia Islands)가 있다. 캐나다 쪽에는 뱅크스(Banks)섬과 빅토리아(Victoria)섬과 퀸 엘리사베스(Queen Elizabeth)군도와 배핀(Baffin)섬과 멜빌(Melville)섬과 엘레스미어(Ellesmere)섬과 그린란드가 있다. 또한 유라시아대륙 북쪽으로 서쪽부터 그린란드해(Greenland Sea)와 노르웨이해(Norwegian Sea)와 바렌츠해(Barents Sea)가 있으며, 카라해(Kara Sea)와 랍테프해(Laptev Sea)와 동시베리아해(East Siberia Sea)가 있다. 북아메리카대륙 쪽으로는 보퍼트해(Beaufort Sea) 같은 부속된 바다들이 있으며 배핀만(Baffin Bay)도 있다. 북극은 북위 90도, 곧 지리북극점(地理北極點 North Geographical Pole)을 중심으로 한 대양(大洋 Ocean)이다. 북극은 바다이므로 얼고 녹는 것을 되풀이하지만, 지역에 따라 여름에도 다 녹지 않아 다년빙(多年氷)이 생긴다. 그러나 기본이 해빙(海氷)이므로 빙산은 생기지 않거나 생겨도 크기가 아주 작다. 반면 얼음으로 덮인 그린란드에서는 빙하가 흘러내려 불규칙한 빙산을 만든다. 북극에도 남극과 마찬가지로, 지리북극점과 지자기북극점과 자북극점이 있으며 도달불능극이 있다. 북극의 도달불능극은 북극의 해안에서 가장 먼 바다 한 가운데에 있다. </p> </section> <br /> <section id="organism"> <h3>생물</h3> <p> 북극에는 200 종에 가까운 꽃피는 식물이 있다. 식물들은 짧은 북극의 여름에 꽃을 피우고 열매를 맺는다. 북극곰과 북극여우와 사향소와 늑대와 순록과 레밍쥐와 눈토끼를 비롯한 포유류가 있다. 북극뇌조와 북극갈매기와 퍼핀을 비롯한 280 종 정도의 조류(鳥類)가 있다. 여름에는 북극모기를 비롯한 곤충들이 기온이 높은 환경을 이용하여 번식하려고 짧은 기간에 극성을 부린다. 반면 양서류와 파충류는 없다. </p> </section> <br /> <section id="resources"> <h3>북극의 자원</h3> <p> 북극에는 상당한 양의 지하자원과 생물자원이 있다. 전자에는 천연가스, 원유, 광물자원과 담수가 해당된다. 이 가운데 천연가스와 원유는 미국지질조사소의 보고에 따르면 전 세계 매장량의 22%가 있다3). 생물자원에는 어류가 있으며 아북극을 포함하는 경우 삼림자원이 있다. </p> </section> <br /> <section id="native"> <h3>원주민</h3> <p> 북극은 남극과 달리 이누잍(Inuit)을 비롯한 여러 부족의 원주민이 살고 있다. 원주민들이 살았던 시기와 지역은 각각이어서, 예컨대, 시베리아에서는 약 18,000 년 전, 알라스카에서는 10,000∼12,000 년 전, 러시아 북서부 콜라(Kola)반도에서는 9,000 년 전부터 사람이 살았다는 주장이 있다. 원주민들 지역에 따라 독특한 생활을 하며 문화를 만들었다4). </p> </section> <br /> <section id="politics"> <h3>북극의 정치</h3> <p> 북극의 바다와 땅에는 주인이 다 있다. 곧 북극의 해안선이 있는 러시아, 캐나다, 미국, 노르웨이, 덴마크가 그들이다(그린란드가 덴마크에서 최근 독립했다. 그러나 외교권은 덴마크에게 있다). 따라서 A5라고 부르는 이들이 실권을 가지고 있다. 나아가 이들과 북극에 영토가 인접한 스웨덴, 핀란드, 아이슬란드가 가세한다. 이들이 중심이 되어 북극이사회 같은 조직을 통하여 북극의 자원을 비롯해서 연구와 환경과 인간의 행동을 관장한다. 북극에 관심이 있는 나라들이 참가할 수 있지만 아주 제한되어있다. </p> </section> <section id="recent"> <br /> <h3>최근의 북극</h3> <p> 지구가 더워지면서 북극의 기온은 빠르게 올라가, 그린란드의 빙원과 동토(凍土)가 녹고 땅속에 고정되었던 메탄가스가 방출된다. 방출되는 메탄가스는 온난화를 더욱 가속시킨다. 나아가 건물의 기초가 가라앉고 파이프와 도로가 뒤틀린다. 또 그린란드가 녹아 해수면도 상승한다. 북극에서는 해빙(海氷)이 점점 적게 만들어진다. 곧 해빙이 생기는 면적이 좁아지고 기간이 짧아진다. 이런 변화에 따라 북극의 생태계가 변하며 원주민의 생활이 크게 변화되고 있다. 나아가 아시아와 유럽 사이에 새로운 항로가 열려 가까워질 가능성이 있다. </p> </section> <br /> <section id="reference"> <h3>참고문헌</h3> <p> 1. 위키피디어, Arctic Circle, https://en.wikipedia.org/wiki/Arctic_Circle <br /> 2. 위키피디어, Arctic Ocean, https://en.wikipedia.org/wiki/Arctic_Ocean <br /> 3. 위키피디어, Natural resources of the Arctic. https://en.wikipedia.org/wiki/Natural_resources_of_the_Arctic <br />4. 이유경, 2013. 북극을 지켜온 사람들. 극지와 인간, 장순근⎽이재학(엮음), 한국해양과학기술원, p. 88-89. </p> </section> <a href="https://terms.naver.com/entry.nhn?docId=5750347&cid=61234&categoryId=61234" 출처: 네이버 지식백과</a </body> </html>
3. 메일 주소로 이동
메일 쓰기, 메일 보내기라는 부분을 클릭하면 바로 메일 보내는 부분으로 이동하는 것을 할 수 있다.
<a href="mailto:보낼 메일주소"> ~~~에게 메일 보내기 </a>
4. 전화번호 입력을 통해 전화 걸기
웹페이지의 고객센터로 전화를 걸 때를 생각해보면, 전화번호를 클릭하면 바로 통화로 연결되는 경우를 생각할 수 있다.
모바일에서 확인할 경우 바로 전화가 걸린다.
<a href="tel:연결할 전화번호"> ~~고객센터로 전화걸기 </a>인터넷에서 확인할 경우
이러한 창이 뜬다.
5. target="_blank" (새 탭으로 이동)
링크를 눌렀을 때 크롬의 경우 원래 페이지에서 바로 해당 링크로 넘어가는 것을 확인할 수 있다.(설정을 따로 하지 않을 경우)
탭 1개에서 링크로 바로 넘어가는 것인데, 기존에 보고있던 페이지는 그대로 두고 새로운 탭을 열어서 링크를 열게할 수 있다.
<a href="https://www.google.com/" target="_blank"> <h1>Google!</h1> <p>이 배너를 클릭하시면 Google로 이동합니다.</p> </a>위의 코드에서
<a>태그 안에 제목과 설명을 넣은것은 저 부분들을 아무곳이나 클릭해도 이동할 수 있도록 범위를 정해주기 위해서이다.
🌿 주니어 프론트엔드 개발자입니다! 부족하거나 잘못된 정보가 있다면 알려주세요:)