웹 개발에서 iframe을 사용하면 하나의 페이지 내에서 다른 HTML 페이지를 불러올 수 있다. 이 기술은 특히 중복되는 코드를 방지하고, 컨텐츠를 동적으로 변경할 때 유용하다. 하지만 최근에는 iframe을 사용하지 않는 경우가 많다.
1. iframe이란?
iframe은 Inline Frame의 줄임말로, HTML 문서 내에 다른 HTML 문서를 삽입할 때 사용하는 태그이다. 쉽게 말하자면 iframe 태그는 “프레임”이라고 생각하면 쉽다. 그 “프레임” 안에 다른 HTML 페이지를 띄워놓는 것이다.
2. 왜 iframe을 사용할까?
웹 페이지를 만들 때, 여러 페이지에서 동일한 메뉴를 사용해야 하는 경우가 있다. 예를 들어, 상단에 있는 메뉴가 5개이고, 각 메뉴를 클릭할 때마다 다른 페이지를 보여줘야 한다고 가정해 보자. 이때 각 페이지마다 동일한 메뉴 코드를 넣는다면, 메뉴가 늘어날 수록 코드가 길어지고 복잡해진다. 메뉴를 수정하려면 모든 HTML 파일을 수정해야 하는데, 매우 비효율적이다.
이럴 때 iframe을 사용하면, 메뉴는 한 번만 작성하고, 페이지 내에서 다른 내용을 동적으로 바꿀 수 있어서 코드가 훨씬 간단해진다.
3. iframe을 어떻게 사용하나?
- iframe 기본 구조 -
<iframe src="불러올_페이지_경로" frameborder="0"></iframe>src 속성에는 불러오고 싶은 다른 HTML 페이지의 경로를 넣어주면 된다.
예를 들어,
<iframe src="./content.html" frameborder="0"></iframe>이렇게 하면, 페이지가 로드될 때 ./content.html 파일이 iframe 안에 표시된다.
4. iframe을 활용한 메뉴와 콘텐츠 바꾸기
웹 페이지에 메뉴를 추가하고, 메뉴를 클릭할 때마다 iframe 안에 다른 콘텐츠를 보여주고 싶다면 아래의 코드처럼 상단에 메뉴를 만들고 각 메뉴를 클릭하면 그에 맞는 콘텐츠를 iframe 안에 표시되게 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Example</title>
</head>
<body>
<div>
<a href="javascript:changeContent('./content1.html')">menu1</a>
<a href="javascript:changeContent('./content2.html')">menu2</a>
<a href="javascript:changeContent('./content3.html')">menu3</a>
</div>
<iframe src="./content1.html" id="iframeContent" frameborder="0"></iframe>
<script>
function changeContent(path) {
document.getElementById("iframeContent").src = path;
}
</script>
</body>
</html>
< 어떻게 작동이 되나? >
1. 메뉴 만들기: 상단에 메뉴를 만들고 각 메뉴를 클릭하면 iframe 안에 다른 HTML 페이지를 불러오는 방식이다.
2. iframe에 콘텐츠 불러오기: 메뉴를 클릭하면, changeContent() 함수가 실행되는데 이 함수는 클릭한 메뉴에 해당하는 HTML 페이지의 경로를 iframe의 src 속성에 넣어서 iframe 안에 새로운 콘텐츠가 보이도록 한다.
3. 처음 로드된 페이지: 페이지가 처음 로드될 때는 iframe 안에 ./content1.html 파일이 표시된다.
위의 방식으로 메뉴를 클릭할 때마다 상단 메뉴는 그대로 유지되면서, 하단의 iframe 안에만 콘텐츠가 변경된다.
5. iframe의 단점
그러나 iframe은 최근에는 많이 사용되지 않는 기술이다.
- 보안 문제: iframe 안에서 다른 웹사이트를 불러올 때 보안상의 이유로 제약이 있을 수 있다.
- 모바일 반응형 디자인: iframe을 사용하면 화면 크기에 맞춰 콘텐츠가 잘 보이지 않는 경우가 많다. 특히 모바일에서는 문제가 될 수 있다.
- 최근 개발 추세: React, Angular, Vue와 같은 현대적인 웹 프레임워크에서는 iframe 대신 컴포넌트 기반의 동적 렌더링 방식을 사용하고 있다.
'개발 개념 정리 > html, css' 카테고리의 다른 글
| [ HTML ] map 태그를 알아보자! (0) | 2025.03.14 |
|---|---|
| [ HTML ] 비디오 & 오디오 속성 (0) | 2025.03.14 |
| [ HTML ] action, method, target, novalidate <form> 태그 속성 (0) | 2025.03.14 |
| [ HTML ] select, option, textarea, datalist... 다양한 폼 요소 (1) | 2025.03.13 |
| [ HTML ] 브라우저 자동 완성 기능의 표준 name 값 정리 (0) | 2025.03.12 |