[HTML] 링크 관련 <a> <link> <iframe> 태그
by mini_min[HTML]
링크 관련 <a> <link> <iframe> 태그
✔️ <a> ~ </a> 태그
: 앵커 태그라고 불린다.
: a 요소는 페이지에서 다른 페이지로 이동하는데 사용되며, 하이퍼링크라고도 한다.
📓 속성
- href : 이동할 URL 을 지정한다.
- target : 이동시 사용되는 콘텍스트 이름이나 키워드를 지정한다.
(특정 창 이름 지정 : 이미 정의되어 있는 특별한 창으로 연결)
(_blank : 특정한 이름이 없는 새로운 브라우저 창에 연결)
(_parent : 현 문서의 상위 문서 창에 연결)
(_self : 현 문서가 나타나 있는 창에 연결)
(_top : 현재 창 전체에 링크)
📓 속성2
- rel : 링크 대상과의 관계를 지정한다.
- media : 링크 대상을 출력하는 매체를 지정한다. (all=모든 장치. 기본) 등
-hreflang : 링크 대상의 언어 코드를 지정한다.
- type : 링크 대상의 MIME 타입을 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> a 태그 </h3>
<p>
<!-- 현재 브라우저 창에 표시 -->
<a href="web.html">CSS</a>
</p>
<p>
<!-- 새로운 창에 표시 -->
<a href="https://www.google.com" target="_blank">구글</a>
</p>
<p>
<a href="bear.jpg" type="image/jpg">배경이미지</a>
</p>
</body>
</html>
✔️ <iframe> ~ </iframe> 태그
: inline frame
: 현재의 HTML 문서 내에서 다른 문서를 포함할 때 사용한다.
: 자식 요소로 아무것도 나타내지 않는다.
📓 속성
- src : 포함할 페이지에 대한 URL 을 지정한다.
- srcdoc : 중첩된 문맥이 포함된 내용을 정의한다.
- name : 중첩된 문맥의 이름을 정의한다.
- sandbox : iframe 요소에 위치한 내용의 제한을 설정한다.
- seamless : iframe 요소의 문맥이 문서의 일부분인 것처럼 렌더링한다.
- width : 요소의 너비를 정의
- height : 요소의 높이를 정의
<h3>iframe 예제</h3>
<iframe src="web.html" width="500" height="300"></iframe>
<hr>
<iframe src="web2.html" width="500" height="300" style="border: none"></iframe>
<hr>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> iframe 예제 </h3>
<p>
<a href="web.html" target="box">CSS</a>
<a href="web2.html" target="box">HTML</a>
</p>
<hr>
<iframe src="web.html" width="500" height="300"
style="border: none;" name="box"></iframe>
</body>
</html>
💡 web2.html 과 web.html 문서를 만들어둔 상태로, 위에 ex03.html 문서를 실행했을 때 CSS 와 HTML 버튼을 누르면, 각각의 내용이 아래 <iframe> 에 뜬다.
'HTML' 카테고리의 다른 글
| [HTML] <button> 태그 type / value, readonly, disable, hidden, image (0) | 2022.09.13 |
|---|---|
| [HTML] 폼 관련 태그 <form> / <input> type 속성값 (0) | 2022.09.13 |
| [HMTL] <nav> 태그와 <ul>, <li> 태그로 메뉴 만들기 (0) | 2022.09.12 |
| [HTML] 리스트 관련 <ol> <ul> <menu> <li> 태그 (0) | 2022.09.12 |
| [HTML] valign 태그 (0) | 2022.09.09 |
블로그의 정보
개발자 미니민의 개발로그
mini_min