티스토리 뷰

development/html javascript CSS

[HTML] anchor

Happyoon ~ 2021. 10. 7. 13:25
728x90
반응형

핵심

1. a(anchor) 요소는 하이퍼링크, 책갈피, javascript 등을 수행할 때 사용한다. 

2. 인라인 요소는 원래 블럭 요소를 자식요소로 가질수 없다.

   단 a 요소만 예외적으로 div 같은 블럭요소를 자식요소로 가질수 있다.

3. .container와 같은 클래스 속성은 특정 요소를 그룹으로 묶고 싶을 때 사용한다.

 

 

예제1

<!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>

 

예제2

<!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>

누르면 각각 첫번쨰, 두번쨰, 세번째 글로 이동

 

예제3

alert, tel, mailto를 사용하여 알림창, 전화걸기, 이메일 쓰기 기능 활용

<!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>
        //script 내의 javascript는 내용은 페이지 로딩 말기에 수행됨 
        console.log("페이지 로딩이 완료 됩니다.");
    </script>
</body>
</html>

반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] 함수 이용하기  (0) 2021.10.08
[JavaScript] object와 function  (0) 2021.10.07
[HTML] form  (0) 2021.10.07
[HTML] table  (0) 2021.10.07
[HTML] dl dt dd  (0) 2021.10.06
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함