하이퍼링크(HyperLink)

 

- 링크를 클릭하면 다른 문서로 이동할 수 있다.

- 링크 위로 마우스를 이동하면 마우스 화살표가 작은 손모양으로 변한다.

 

<a> 태그

 

- 하이퍼링크를 정의하는 HTML 태그

예시 : <a href = "url"> Link text </a>

 

실습 - basic9.html

 

첫번째 a태그 :  네이버로 이동하는 링크를 만든다.

두번째 a태그 : 이미지를 클릭하면 지정된 링크로 이동한다.

세번째 a태그 : mailto(메일 전송 프로그램)를 사용하여 지정된 이메일로 메일을 보낼 수 있게 아웃룩 프로그램이 실행한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="http://www.naver.com">네이버</a><br>
    <a href="">
        <img src="image/sample.jpg" alt="이미지입니다" width = "100" height = "100">
    </a><br>
    <!-- 메일전용 프로그램 보내는 거 maillto -->
    <a href="mailto:rorrxr@naver.com" title="아웃룩 프로그램 사용">인사 담당자</a>
</body>
</html>

 

Document 네이버
이미지입니다
인사 담당자

 

실습 - basic10.html

 

a 태그에 id 값을 지정해서 href 속성으로 이동시키는 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <!-- id로 값을 정해두고 href 속성을 통해 이동시킬 수 있다. -->
        <a href = "#C1">HTML5</a> | <a href = "#C2">CSS3</a> |
        <a href = "#C3">javascript</a> | <a href = "#C4">java</a> |
        <a href = "#C5">spring</a>
    </p>
    <h2 id = "C1">HTML5</h2>
    <p>html5는 웹페이지 제작언어이다.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id = "C2">css3</h2>
    <p>html5로 생성된 태그에 효과, 스타일을 적용하는 언어이다.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id = "C3">javascript</h2>
    <p>웹페이지에 동작/기능을 적용하는 언어이다.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id = "C4">java</h2>
    <p>객체지향 언어이며, 스프링 프레임워크를 사용 시 기반이되는 언어이다.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>

    <h2 id = "C5">spring</h2>
    <p>자바 기반의 웹 프레임워크이다.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
</body>
</html>

 

Document

HTML5 | CSS3 | javascript | java | spring

HTML5

html5는 웹페이지 제작언어이다.





















css3

html5로 생성된 태그에 효과, 스타일을 적용하는 언어이다.





















javascript

웹페이지에 동작/기능을 적용하는 언어이다.





















java

객체지향 언어이며, 스프링 프레임워크를 사용 시 기반이되는 언어이다.





















spring

자바 기반의 웹 프레임워크이다.





















 

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

'Devlopment > HTML & CSS' 카테고리의 다른 글

[HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습  (2) 2024.01.04
[HTML] Form 태그 (1) - 이론 및 간단한 예제 실습  (0) 2024.01.04
[HTML] Tables <table> 태그, Ifames 태그 이론 및 실습  (2) 2024.01.04
[HTML] Image/Image Map 이론 및 실습  (0) 2024.01.04
[HTML] HTML 시작 - 기본 이론 및 간단한 예제 실습  (2) 2024.01.03

티스토리툴바