Front-end/HTML&CSS

HTML&CSS) HyperLink 링크 이동 <a href>

luana_eun 2022. 1. 18. 16:20
728x90

<a>태그에 href="주소" 속성을 주면 해당 주소로 이동한다. 

 

 

1. url 이동

<a href="https://www.naver.com">네이버</a>

 

2. 파일로 이동

<a href="../html01/test01.html">html01폴더 안의 Test01</a>

 

3. 사진 연결

<a href="4.jpg">사진 연결</a>

 

4. 다운로드

download 속성 사용.

<a href="4.jpg" download>사진다운로드</a>

 

 

5. 새창열기

target="_blank" 속성 사용.

원래 링크를 누르면 해당 페이지가 변하면서 이동이됐는데, 새창과 함께 이동하는 옵션이다. 

<a href="Ex04.html" target="_blank">새창으로 열기</a><br>
<a href="3.jpg" target="_blank">사진을 새창으로 열기</a><br>

 

 

6. 문서 내의 특정 위치로 이동

가고싶은 위치에 id="이름" 을 지정하고

<a>에 href="#이름">을 하면 해당 id이름을 가진 태그로 이동한다. 

<a href="#today">12월 3일로 이동</a>

<div id="today">12월 3일</div>

 

728x90