티스토리 뷰

Programming/HTML

HTML #6 : <link> 태그

copotter 2019. 5. 1. 19:23

190423


<link>태그

<a> 태그를 사용하면 하이퍼링크를 만들 수 있다.


- <a href="연결한 문서의 주소" target="링크내용이 표시될 위치">링크명</a>

        

target의 속성값


_blank : 링크된 문서가 새로운 창이나 새로운 탭에서 열린다.

_self : 링크된 문서가 현재 창에서 열린다(기본값)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>링크 만들기</h1>
    
    <h2>프로젝트 내의 문서에 링크 연결하기</h2>
    <p>
        <a href="views/about.html">회사소개</a>
        <a href="views/help.html">고객지원</a>
        <a href="views/help.html"><img src="images/02.jpg" width="70" height="70"></a>
    </p>
    
    <h2>외부 문서에 링크 연결하기</h2>
    <p>
        <a href="http://www.daum.net" target="_blank">다음</a>
        <a href="http://www.naver.com">네이버</a>
        <a href="http://www.google.com">구글</a>
    </p>
</body>
</html>
cs


>> 아래 실행결과와 같이 출력되고, 각 링크마다 소스에서 지정해준 경로로 이동하게 된다.

      다음 버튼은 target에 _blank를 줘서 새 탭이 열리게 된다.

<실행 결과>



* 웹 사이트에서 보면 페이지의 내용들이 길때 중간 중간 단락이나 top으로 가는 버튼이 있는 것을 볼 수 있다.

  그 기능 역시, <link>태그를 이용하여 구현할 수 있다.


        각각의 섹션마다 id를 부여하고,

        a태그에서 href의 속성값으로 id값을 지정하면

        해당 섹션부분으로 점프할 수 있다.

        <a href="#아이디">링크명</a>


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
29
30
31
32
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>한 페이지내에서 특정 위치로 이동하는 링크 만들기</h1>
 
    <h2>링크</h2>
    <p id="menu">
        <a href="#p1">IT</a>
        <a href="#p2">넷플릭스</a>
        <a href="#p3">정부</a>
    </p>
    <p id="p1">
        '아이스크림 홈런'을 만든 아이스크림에듀가 창립 6주년을 맞아 에듀테크기업으로 새로운 미래 비전을 공유했다.
        아이스크림에듀는 22일 임직원 350여명이 참석한 가운데 창립 6주년 기념행사를 개최했다. 한 해 동안 높은 성과를 달성한 임직원을 위한 시상식과 박기석 아이스크림미디어 회장 축사, 임직원이 함께하는 영화 감상이 이어졌다.
  <a href="#menu">top</a>
    </p>
    <p id="p2">
        지난 3월 한달간 넷플릭스가 국내에서 벌어들인 돈은 200억원이라는 조사결과가 나왔다.
        23일 앱분석업체 와이즈앱에 따르면 지난 3월 넷플릭스 국내 유료 이용자는 153만명, 결제금액은 200억원에 달하는 것으로 나타났다. 
        지난해 12월 90만명 수준이던 넷플릭스 유료 이용자 수는 1월 107만명, 2월 114만명으로 꾸준히 증가한 데 이어 지난달 153만명으로 39만명 급증했다.     
        <a href="#menu">top</a>
    </p>
    <p id="p3">
        정부가 거제·목포 등 지난해 5월 '산업위기 대응 특별지역'으로 선정된 5개 지역의 지정 기간을 2년 연장키로 했다. 23일 산업통상자원부는 산업경쟁력 강화 관계 장관회의를 거쳐 산업위기대응 특별지역으로 지정된 ▶울산 동구▶경남 통영·고성▶거제▶창원 진해구▶전남 영암·목포·해남에 대해 지정 기간을 2년간 연장키로 했다. 연장된 기간은 이달 29일부터 2021년 5월 28일까지다. 
       <a href="#menu">top</a>
    </p>
</body>
</html>
cs


< 실행 결과 >


( 안에 글들을 길게 해서 스크롤이 생기게 한후에 실습 해보는 것이 좀더 와닿을 것이다. )




저작자표시 (새창열림)

'Programming > HTML' 카테고리의 다른 글

HTML #8 : Element ( 엘리먼트 )  (0) 2019.05.01
HTML #7 : 텍스트 강조 태그 (<strong>, <em>, <i>, <b> 태그)  (0) 2019.05.01
HTML #5 : <img>태그  (0) 2019.04.26
HTML #4 : <li>태그, <ul>태그, <ol>태그, <table>태그  (0) 2019.04.26
HTML #3 : <p> 태그, <h#>태그, 기본 태그  (0) 2019.04.26
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
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 29 30 31
글 보관함