하이퍼링크
- 하이퍼링크 기능은 웹문서가 다른 문서와 구분되는 가장 핵심적인 기능이다.
- 클릭을 통해 연결된 곳으로 이동하여 사용을 편리하게 하는 기능으로, ① 텍스트를 클릭해 이동하는 방법, ② 이미지를 클릭해 이동하는 방법 등이 존재한다.
- ③ 또한 페이지 내에서 링크를 통한 이동도 가능하다.
<a>
<a href="링크주소|#id명" target="_blank|_self"> 텍스트|이미지... </a>
1. 파일 연결?
<!-- ul>(li>a)*6 -->
<ul>
<li><a href="./01_글자관련태그.html">글자 관련 태그들</a></li>
<li><a href="./02_목록관련태그.html">목록 관련 태그들</a></li>
<li><a href="./03_표관련태그.html">표 관련 태그들</a></li>
<li><a href="./04_영역관련태그.html">영역 관련 태그들</a></li>
<li><a href="./05_이미지관련태그.HTML">이미지 관련 태그들</a></li>
<li><a href="./06_미디어관련태그.html">미디어 관련 태그들</a></li>
</ul>
- 참고로
target="_self"가 디폴트
2. 웹페이지 연결
<!-- ul*(li>a)*3 -->
<ul>
<li><a href="https://www.naver.com" target="_blank">네이버</a></li>
<li><a href="https://www.google.com" target="_self">구글</a></li>
<li><a href="https://www.daum.net">다음</a></li>
</ul>
3. <img> 를 이용한 링크 만들기
- 이미지를 클릭하면 링크로 이동하기
<!-- a>img -->
<a href="https://www.w3schools.com" target="_blank">
<img src="../resources/image/forest1.PNG" width="150px" height="100px">
</a>
4. 속성 id를 이용한 페이지 내에서 점프하는 앵커 만들기
<a href="#id명"> ... </a>
<h3 id="menu">한 페이지 내에서 점프하는 앵커 만들기</h3>
<ul>
<!-- (li>a)*3 -->
<li><a href="#content1">기사 내용 1</a></li>
<li><a href="#content2">기사 내용 2</a></li>
<li><a href="#content3">기사 내용 3</a></li>
</ul>
<hr>
<h4 id="content1">기사 내용 1</h4>
<p>
온라인동영상서비스(OTT) 업체 넷플릭스가 2일(미국 현지시간) 첫 모바일 게임을 출시했다........
</p>
<br>
<a href="#menu">메뉴로 돌아가기</a>
<hr>
<h4 id="content2">기사 내용 2</h4>
<p>
LG유플러스가 보안전문기업 ICTK 홀딩스와 손잡고 ‘물리적 복제 방지 기능(PUF)’을 적용한 초소형 내장형 가입자식별모듈(eSIM)을 세계 최초로 개발하는 데 성공했다.......
</p>
<br>
<a href="#menu">메뉴로 돌아가기</a>
<hr>
<h4 id="content3">기사 내용 3</h4>
<p>
플로와 SM C&C는 서울 마포구에 위치한 플로 콘텐츠 제작 스튜디오인 ‘스튜디오돌핀’에서 업무협약을 체결했다고 4일 밝혔다. 협약식에는.............
</p>
<br>
<a href="#menu">메뉴로 돌아가기</a>
-
'기사 내용 1' .. 등을 누르면 기사 내용 1.. 로 이동한다.
-
'메뉴로 돌아가기' 를 누르면 '한 페이지 내에서 점프하는 앵커 만들기'로 이동한다.
