웹 페이지를 제작하다 보면, 한 페이지 안에서 다른 웹 페이지를 삽입해야 할 때가 있습니다. 이를 가능하게 해주는 요소가 바로 iframe입니다. 이번 글에서는 iframe의 기본 사용법, 테두리 스타일 변경 방법, 페이지 변경 방법 등 실무에 유용한 내용을 다루고, 과거 사용되던 frameset 요소에 대한 정보까지 정리해보겠습니다.
1. iframe이란?
iframe은 "inline frame"의 약자로, 현재 웹 페이지 내에 다른 웹 페이지를 삽입할 수 있게 해주는 HTML 요소입니다. 독립적으로 동작하는 창처럼 사용 가능하며, 삽입된 콘텐츠는 지정된 크기에 고정됩니다.
iframe의 기본 문법
<iframe src="삽입할페이지주소"></iframe>
iframe은 종료 태그를 반드시 포함해야 하며, src 속성에 삽입할 페이지의 URL을 입력합니다.
2. iframe 사용 예시
아래는 iframe을 사용하여 웹 페이지 일부에 다른 페이지를 삽입한 간단한 예제입니다.
<iframe src="/css/intro" style="width:100%; height:300px;"></iframe>
위 코드는 /css/intro 페이지를 가로 100%, 세로 300px 크기로 삽입합니다.
3. iframe 테두리 스타일 변경하기
기본적으로 iframe에는 검정색 테두리가 적용됩니다. 이 테두리를 제거하거나 스타일을 변경하려면 style 속성에서 border를 사용하면 됩니다.
테두리 스타일 변경 예시
<iframe src="/css/intro" style="width:100%; height:300px; border:3px dashed maroon;"></iframe>
위 예제에서는 3px 크기의 점선 테두리를 마룬 색으로 설정합니다.
테두리 제거하기
<iframe src="/css/intro" style="width:100%; height:300px; border:none;"></iframe>
테두리를 완전히 없애려면 border:none을 설정하면 됩니다.
4. iframe의 페이지 동적 변경
iframe에 삽입된 콘텐츠를 동적으로 변경하려면 <a> 태그의 target 속성과 iframe의 name 속성을 연결하면 됩니다.
페이지 변경 예시
<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
<a href="/php/intro" target="frame_target">PHP 수업 확인하기 →</a>
</p>
위 코드에서, 링크를 클릭하면 iframe의 콘텐츠가 /php/intro로 변경됩니다.
5. frameset 요소: 더 이상 사용되지 않는 기술
frameset은 한 브라우저 창에 여러 페이지를 동시에 표시하기 위해 사용되던 HTML 요소입니다. 그러나 HTML5 표준에서는 지원되지 않으므로, 이제는 iframe이나 CSS 레이아웃으로 대체해야 합니다.
frameset의 구조
frameset은 브라우저 창을 분할하여 여러 페이지를 한 화면에 표시합니다. 각 페이지는 frame 요소로 정의되며, noframes 요소는 frameset을 지원하지 않는 브라우저에서 보여줄 콘텐츠를 설정합니다.
6. frameset의 사용 예시 (비권장)
수직 분할 frameset
<frameset cols="25%,*,25%">
<frame src="/html/intro" name="left">
<frame src="/css/intro" name="center">
<frame src="/php/intro" name="right">
<noframes>
<body>이 브라우저는 frame 태그를 지원하지 않습니다!</body>
</noframes>
</frameset>
수평 분할 frameset
<frameset rows="20%,60%,20%">
<frame src="/html/intro" name="top" noresize>
<frame src="/css/intro" name="center" noresize>
<frame src="/php/intro" name="bottom" noresize>
<noframes>
<body>이 브라우저는 frame 태그를 지원하지 않습니다!</body>
</noframes>
</frameset>7. frameset이 더 이상 사용되지 않는 이유
- HTML5 표준 미지원: frameset, frame, noframes 요소는 더 이상 최신 웹 표준에서 지원되지 않습니다.
- UX 문제: 브라우저 창을 강제로 분할하면 사용자 경험이 저하될 수 있습니다.
- CSS와 iframe 대체 가능: iframe과 CSS를 활용하면 더 세련되고 유연한 레이아웃을 구현할 수 있습니다.
iframe은 현재도 유용하게 사용되는 HTML 요소로, 다른 페이지를 웹 페이지 안에 삽입해야 할 때 효과적입니다. 반면, frameset은 오래된 기술로 이제는 사용하지 않는 것이 좋습니다. iframe을 활용해 더욱 깔끔하고 효율적인 웹 페이지를 만들어보세요!
'Web > html' 카테고리의 다른 글
| HTML 입력 양식 - Form 요소 (1) | 2025.01.27 |
|---|---|
| HTML 공간 분할 - 레이아웃 (1) | 2025.01.26 |
| HTML 요소의 타입 - 블록(Block)과 인라인(Inline) (0) | 2025.01.24 |
| HTML - 테이블 (2) | 2025.01.23 |
| HTML - 리스트(List) (0) | 2025.01.22 |