목차
- 하이퍼링크 태그 <a> </a>
1-1. 하이퍼링크 기본 작성(문자)
1-2. <img> 태그 이용해 링크
1-3. 한 페이지 내에서 점프
1. 하이퍼링크 태그 <a> </a>
| href | 링크한 페이지의 id값이나 사이트 주소 지정 |
| target(_blank or _self) | 링크 페이지에 표시될 위치 지정(새 창 or 현재 창) |
| download | 링크한 페이지를 표시하지 않고 다운로드하도록 지정 |
| rel | 현재 페이지와의 관계 지정 |
| hreflang | 링크한 페이지의 언어를 지정 |
| type | 페이지의 파일유형 지정 |
- <a>는 페이지에서 해당 부분을 클릭하면 지정된 페이지로 이동시키는 태그이다.
- 외부 사이트에 연결하거나 문서 내부간 이동이 가능하다.
1-1. 하이퍼링크 기본 작성(문자)
<a href="1_글자태그.html">글자태그</a>
- 글자태그라는 텍스트 문구에 주소값이 지정된 형태로 출력되며, 클릭 시 같은 경로에 있는 1_글자태그.html 파일로 이동시킨다.
<a href="https://developer-r.tistory.com/">Reminder</a>
- 네트워크가 연결된 상황이라면 현재 서비스되고 있는 웹 페이지로 링크 거는 것도 가능하다.
1-2. <img> 태그 이용해 링크
<body>
<a href="https://www.w3schools.com" target="_blank">
<img src="../sample/image/flower5.PNG" width="150px" height="100px">
</a>
</body>- 이미지를 클릭하면 해당 링크로 이동한다.
1-3. 한 페이지 내에서 점프
❗ 테스트에 필요한 문구를 가져오기 위해 문장 생성기인 한글판 로렘입숨 사이트를 활용한다.
<body>
<h3 id="menu">한 페이지 내에서 점프하기</h3>
<ul>
<li><a href="#contentA">본문내용A</a></li>
<li><a href="#contentB">본문내용B</a></li>
<li><a href="#contentC">본문내용C</a></li>
</ul>
<h4 id="contentA">본문내용A</h4>
<p>..............................</p>
<br><a href="#menu">메뉴로 돌아가기</a><br>
<h4 id="contentB">본문내용B</h4>
<p>..............................</p>
<br><a href="#menu">메뉴로 돌아가기</a><br>
<h4 id="contentC">본문내용C</h4>
<p>..............................</p>
<br><a href="#menu">메뉴로 돌아가기</a><br>
</body>- menu, contentA, contentB, contentC와 같은 각각의 id값으로 연결된 모습이다.
- 각 문단이 끝날 때마다 하단에 한 줄 띄고 '메뉴로 돌아가기' 버튼이 있도록 한다: <br><a href="#menu">메뉴로 돌아가기</a><br>
'Frontend > HTML' 카테고리의 다른 글
| [HTML5] 폼 태그 | form | input | type | button (0) | 2022.02.09 |
|---|---|
| [HTML/수업 과제 practice] 글자 목록 태그, 테이블 태그 (0) | 2022.02.09 |
| [HTML5] 멀티미디어 태그 | img | audio | video (0) | 2022.02.09 |
| [HTML5] 영역 분할 태그 | div | span | iframe | 시맨틱 (0) | 2022.02.09 |
| [HTML5] 테이블 태그 | table | rowspan | colspan | thead (0) | 2022.02.08 |
