728x90
더보기
Day36. 230620
링크만들기
<a> 태그
<a href="링크할 주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크할 주소" [속성="속성 값"]><img src="이미지 파일 경로"> 텍스트 </a>
<a>태그 안에서 사용할 수 있는 속성
href 속성
:링크한 문서나 사이트의 주소를 입력한다.
target 속성
새 탭에서 링크 열기
_blank : 링크 내용이 새 창이나 새 탭에서 열린다.
_self : target 속성의 기본 값으로 링크가 있는 화면에서 열린다.
아이프레임 <iframe>
프레임의 일종으로 프레임 중에서 문서 본문에 액자처럼 삽입하는 것.
a href #
- href 태그 안에 기입한 주소 값으로 다른 문서로의 이동, 또는 같은 문서내의 이동을 위해 사용한다.
- 창을 이동해야하는 html 요소 ID를 지정하여 이동하거나 주소를 입력하여 이동한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<h2>LINK</h2>
<xmp><a href="url" taget="_self _blank_top 프레임이름 등">text,이미지,또 다른 요소
기준위치 http://localhost:8081/ourPro/ch03/link_p106.html
./
http://localhost:8081/ourPro/ch03/image_p94.html
http://localhost:8081/ourPro/ch02/myFirst.html
. 현재위치
./ 현재위치
.. 현재위치의 상위
../.. 현재위치의 상위의 위
../../..
</xmp>
<hr/>
<ul>
<li><a href="https://daum.net" target="_self">다음(_self)</a></li>
<li><a href="https://google.co.kr" target="_blank">구글(_blank)</a></li>
<li><a href="https:www.youtube.com">유튜브</a></li>
<li><a href="https://www.nate.com" target="myFrame"> 네이트(myFrame)</a></li>
<li><a href="http://localhost:8081/ourPro/ch03/image_p94.html" target="myFrame">image_p94.html(절대경로)</a></li>
<li><a href="image_p94.html" target="myFrame">image_p94.html(상대경로)</a></li>
<li><a href="./image_p94.html" target="myFrame">image_p94.html(상대경로)</a></li>
<li><a href="../ch03/image_p94.html" target="myFrame">image_p94.html</a></li>
<li><a href="http://localhost:8081/ourPro/ch02/myFirst.html" target="myFrame">myFirst.html(절대경로)</a></li>
<li><a href="../ch02/myFirst.html" target="myFrame">myFirst.html(상대경로)</a></li>
</ul>
<iframe src="https://vitala.co.kr/" title="iframe연습" name="myFrame" width="500"></iframe>
<hr/>
<a href="#INFP">INFP</a>
<a href="#ENFP">ENFP</a>
<a href="#ISFP">ISFP</a>
<pre>
INFP
<span id="INFP">인프피</span>
I N F P
ENFP
<span id="ENFP"> 엔프피</span>
E N F P
ISFP
<span id="ISFP"> 잇스피</span>
I S F P
</pre>
</body>
</html>
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [HTML] 표만들기 예제 (0) | 2023.06.20 |
|---|---|
| [HTML] 이미지, 절대경로와 상대경로 (0) | 2023.06.20 |
| [HTML] table 태그 (0) | 2023.06.20 |
| [HTML] 표를 만드는 태그 (0) | 2023.06.19 |
| [HTML] HTML 기본 구조,텍스트 관련 태그들 (0) | 2023.06.19 |
