본문 바로가기
WEB

[HTML] a / anchor / 하이퍼링크 / 책갈피 / 전화, 메일 화면 이동

yo~og 2021. 10. 7. 17:05

<a></a> 태그는 하이퍼링크를 걸어주는 태그다.

a 속성

href - 클릭시 이동 할 링크
target - 링크를 여는 방법

  • _self : 현재 페이지 (기본값)
  • _blank : 새 탭
  • _parent : 부모 페이지로, iframe 등이 사용된 환경에서 쓰인다.
  • _top : 최상위 페이지로, iframe 등이 사용된 환경에서 쓰인다.
  • 프레임 이름 : 직접 프레임을 명시해서 사용할 수도 있다.
<a href="hello.html">hello.html 로 이동</a>
<a href="https://daum.net" target=_blank>daum 으로 이동</a>
<a href="https://naver.com">naver 로 이동</a>
<a href="hello.html"><img src="images/kim1.png"></a>

책갈피 설정

a의 속성을 이용해서 책갈피를 만들 수 있다.

<ul>
	<li><a href="#one">one</a></li>
	<li><a href="#two">two</a></li>
	<li><a href="#three">three</a></li>
</ul>
<p id="one">one Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae quibusdam eveniet tempore, necessitatibus provident ratione aut alias quo deserunt fugiat magnam ea nesciunt libero. Aspernatur quo nemo nulla fuga praesentium!</p>
<p id="two">two Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tenetur minima voluptatum ratione quam dolorem perferendis tempore optio animi, nesciunt cupiditate a quos iste eum vero est! Provident, cupiditate neque.</p>
<p id="three">three Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ad commodi nesciunt nihil earum atque, aperiam ipsam quibusdam ab quod voluptate facilis, ut, saepe voluptatem nemo incidunt fugiat labore sed!</p>

id를 설정해주고(one, two..) 설정해준 id를 href에 사용한다. 이때 id앞에는 #을 붙인다.

 

전화, 메일 화면 이동

<ul>
	<!-- 모바일 기기에서 테스트 가능한 기능 -->
	<li><a href="tel:010-1111-2222">전화 걸기</a></li>
	<li><a href="mailto:aaa@naver.com">이메일 쓰기</a></li>
</ul>

href에 mailto, tel을 사용하면된다.

 

href에서 자바스크립트 사용

<a href="javascript:alert('고만좀 눌러라!');">눌러 보셈</a>

 

 

예제

Step10_anchor.html

<!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>Step10_anchor.html</title>
</head>
<body>
    <h1>a(anchor) 요소는 하이퍼링크, 책갈피, javascript 등을 수행할때 사용한다.</h1>
    <a href="hello.html">hello.html 로 이동</a>
    <a href="https://daum.net">daum 으로 이동</a>
    <a href="https://naver.com">naver 로 이동</a>
    <a href="hello.html"><img src="images/kim1.png"></a>
    <!-- 
        인라인 요소는 원래 블럭 요소를 자식요소로 가질수 없다.
        단 a 요소만 예외적으로 div 같은 블럭요소를 자식요소로 가질수 있다.
    -->
    <a href="hello.html">
        <div>
            <h3>어쩌구 저쩌구</h3>
            <p>
                <img src="images/kim1.png">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, cupiditate qui quaerat magnam necessitatibus nemo illo at reprehenderit adipisci rem tempore libero nostrum laboriosam perferendis maiores! Asperiores, dolores illo. Iste.
            </p>
        </div>
    </a>
</body>
</html>

 

Step10_anchor2.html

<!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>Step10_anchor2.html</title>
    <style>
        .container{
            width: 768px;
            margin-left: auto;
            margin-right: auto;
            background-color: yellow;
        }
        .spacer{
            height: 500px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>동일한 페이지 내에서의 이동(책갈피)</h1>
        <ul>
            <li><a href="#one">one</a></li>
            <li><a href="#two">two</a></li>
            <li><a href="#three">three</a></li>
        </ul>
        <div class="spacer"></div>
        <p id="one">one Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae quibusdam eveniet tempore, necessitatibus provident ratione aut alias quo deserunt fugiat magnam ea nesciunt libero. Aspernatur quo nemo nulla fuga praesentium!</p>
        <div class="spacer"></div>
        <p id="two">two Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tenetur minima voluptatum ratione quam dolorem perferendis tempore optio animi, nesciunt cupiditate a quos iste eum vero est! Provident, cupiditate neque.</p>
        <div class="spacer"></div>
        <p id="three">three Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam ad commodi nesciunt nihil earum atque, aperiam ipsam quibusdam ab quod voluptate facilis, ut, saepe voluptatem nemo incidunt fugiat labore sed!</p>
        <div class="spacer"></div>
    </div>
</body>
</html>

 

 

Step10_anchor3.html

<!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>Step10_anchor3.html</title>
    <script>
        //페이지 로딩 초기에 수행되는 javascript
        alert("페이지가 로딩 됩니다.");
    </script>
</head>
<body>
    <h1>anchor 의 또 다른 기능</h1>
    <ul>
        <li><a href="javascript:alert('고만좀 눌러라!');">눌러 보셈</a></li>
        <!-- 모바일 기기에서 테스트 가능한 기능 -->
        <li><a href="tel:010-1111-2222">전화 걸기</a></li>
        <li><a href="mailto:aaa@naver.com">이메일 쓰기</a></li>
    </ul>
    <script>
        //페이지 로딩 말기에 수행되는 javascript
        console.log("페이지 로딩이 완료 됩니다.");
    </script>
</body>
</html>

저작자표시 비영리 변경금지

'WEB' 카테고리의 다른 글

[JavaScript] 데이터 타입 / let / object / delete  (0) 2021.10.07
[JavaScript] 함수  (0) 2021.10.07
[HTML] form 폼 / 폼 요소 작성하기 / form, label, input  (0) 2021.10.07
[CSS] border-collapse (collapse, separate)  (0) 2021.10.07
[HTML] table의 모든 것 - <tr>,<th>,<td>,<thead> , <tbody>,<tfoot>,<caption>,<colgroup>,colspan, rowspan  (0) 2021.10.06

'WEB' Related Articles

티스토리툴바