티스토리 뷰

수업/└HTML&CSS

[HTML]링크 태그 <a>

onlyun 2022. 1. 1. 18:50

다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용하는 태그

 

ex) GOOGLE 사이트로 연결되는 링크

<a href="http://www.google.com" target="_self"> GOOGLE </a>

 

-href 속성값 : url 종류_예시

절대경로 URL 표기  :  http://www.w3.org/index.html

상대경로 URL 표기  :  작성 중 html 기준으로 경로 설정

페이지 내 요소 위치 표기  :  #아이디명

프로토콜 URL 표기  :  http://, ftp://, mailto:, file: 등

스크립트 표기 : javascript:alert('hello');

 

 

-target 속성값 : 연결된 링크를 여는 방법 지정

_self  :  현재 웹 브라우저 창에 연다. 기본값(default)

_blank  :  새로운 웹 브라우저 창에 연다.

_parent  :  부모 웹 브라우저 창에 연다.

_top  :  웹 브라우저 전체 영역에 연다.

 

 

 

페이지 내 요소 위치 표기 방법을 이용해

'책갈피'로 활용할 수 있다.

<body>
	<section>
    	<a href="#philosophy">[철학]</a> &nbsp;
        <a href="#religion">[종교]</a> &nbsp;
        <a href="#art">[예술]</a> &nbsp;
    </section>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <section>
    	<h3 id="philosophy"> 철학 </h3>
        <p>이 구역은 철학 관련 서적이 있는 곳입니다.</p>
    </section>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <section>
    	<h3 id="religion"> 종교 </h3>
        <p>이 구역은 철학 관련 서적이 있는 곳입니다.</p>
    </section>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <section>
    	<h3 id="art"> 예술 </h3>
        <p>이 구역은 철학 관련 서적이 있는 곳입니다.</p>
    </section>
</body>

[철학], [종교], [예술] 각 링크는

해당 아이디명이 있는 위치로 이동한다.

 

 

ps 이메일 링크 걸기

<a href="mailto:이메일 주소"> 수신인 이메일 주소 </a>

메일은 네이버나 다음, 구글에서 쉽게 보낼 수 있으니까 그것만 썼지

컴퓨터 메일 기능 써본 적이 없음. 필요한가 싶지만 그래도 배웠으니 적어둠.

 

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[HTML]목록 태그 <ul>, <ol>, <dl>  (0) 2022.01.01
[HTML]<base> 태그  (0) 2022.01.01
[HTML]text tag, 특수문자 입력  (0) 2022.01.01
[HTML]문서 작성할 때  (0) 2022.01.01
[vscode]HTML 기본 구조 자동완성하기  (0) 2022.01.01
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/01   »
일 월 화 수 목 금 토
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
글 보관함