<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

웹 페이지에 컨텐츠 임베딩하기 - <iframe>

어째서 iframe은 이름이 inline frame element인가요?

iframe의 정의는 ‘inline frame element’ 이라고 한다. iframe은 유튜브같은 컨텐츠를 임베딩하기 위한 태그로 알고 있었는데, 왜 이름이 inline frame element일까?

→ 이는 과거 웹페이지 개발 방식에서 비롯된 이름이라고 한다.

과거에는 웹페이지의 각 요소를 frame으로 쪼개고 이를 합쳐 사용했음 ⇒ frameset 방식

• 당시 네트워크 속도가 느렸기 때문에 속도에서 이점이 있었으나 속도가 빨라지면서 단점이 더욱 부각되어서 이젠 사용되지 않는 방식.
• html4 이전까지 사용되었음

어째서 이젠 사용되지 않는가?

• SEO 문제: 검색엔진에 읽히지 않음. 검색엔진이 주로 메인 프레임셋만 읽었기 때문
• 접근성: 스크린 리더가 잘게 쪼개진 각 프레임을 연관짓지 못해 제대로 읽지 못함
• 서버 로드 가중: 프레임 갯수가 늘어날수록 서버로부터 로드해와야 할 요소가 늘어남 → n이 프레임 개수이면 html 페이지는 n + 1개만큼 존재, 그만큼 http 요청이 늘어남
• frameset은 말 그대로 html 문서를 합치는 방식이었기 때문에, 위의 문제들과 더불어 브라우저간 구현의 다름(프레임 크기 조정, 스크롤 동작, 뒤로가기 동작 등 브라우저가 자율적으로 구현해야 할 부분이 많음)이라는 문제도 발생

⇒ html5부터 유일하게 가능한 프레임은 <iframe>

✨ 요약 ✨