반응형
Iframes
HTML iframes는 웹페이지내에 웹페이지를 표시하는데 사용한다.
Iframes Sytanx
html <iframe> 태그는 인라인 프레임에서 쓰인다.
인라프레임은 현재의 HTML 문서에 다른 문서를 포함하는데 쓰인다.
Syntax
<iframe src="url" title="description"></iframe>
-> 여기서 팁은 url을 설명하기위해 iframe안에 title을 항상 작성하는것을 연습하는것이다.
Iframes 너비와 높이 설정
height와 width를 사용하여 iframe의 높이와 너비를 설정할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="eximage.jpg" height="200" width="300" title="fish"></iframe>
<p>another example</p>
<iframe src="eximage.jpg" style="width:300px; height:500px" title="fish"></iframe>
</body>
</html>위의 예시처럼 두가지 방법으로 작성할 수 있다.
하나는 height와 width로 정의하는것이고 나머지는 <style>을 사용하는 것이다.
Iframe border제거
기본적으로 Iframe에는 border이 감싸고 있다.
이것을 style 속성 추가 CSS border 성질을 이용해서 제거할 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can change border style and size:</p>
<iframe src="eximage.jpg" style="width:300px; height:500pxl; border:2px solid blue;" title="fish"></iframe>
<p>another example</p>
<iframe src="eximage.jpg" style="width:300px; height:500pxl; border:none;" title="fish"></iframe>
</body>
</html>
위의 예시코드에서 첫번째는 iframe의 border의 크기와 색상을 파란색으로 설정한 것이다.
2번째는 border을 제거했다.
Iframe 링크 타겟(Target for a Link)
iframe은 링크를 타겟하는데 사용된다.
타겟된 링크 속성은 무조건 iframe 안에 name 언급이 있어야한다.
<!DOCTYPE html>
<html>
<body>
<h2>Iframe target for a Link</h2>
<iframe src="eximage.jpg" name="iframe_ex" title="iframe example"></iframe>
<p>
<a href="https://www.nexon.com" target="iframe_ex">FIFA</a>
</p>
</body>
</html>FIFA를 클릭할 경우 iframe에서 넥슨 홈페이지가 실행이 된다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML 텍스트 포멧팅(TEXT Formattiong) <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup> 사용법 (0) | 2023.09.05 |
|---|---|
| HTML Forms (0) | 2023.09.05 |
| HTML 클래스 class (0) | 2023.09.04 |
| HTML 리스트 - Unordered Lists (0) | 2023.09.04 |
| HTML 리스트 list (0) | 2023.09.04 |
댓글