다른 HTML 문서를 현재 페이지 안에 삽입합니다.
iframe은 지도, 영상, 외부 문서처럼 독립된 페이지를 포함합니다. title로 내용을 설명하고 sandbox, allow 같은 권한을 필요한 만큼만 허용해야 합니다.
iframe에 src 대신 srcdoc 속성이 있고, 그 값 전체가 하나의 HTML 문서로 해석되어 틀 안에 그려집니다. 속성값을 큰따옴표로 감쌌기 때문에 안쪽 h2의 style 값은 작은따옴표로 적었습니다. 바깥 페이지의 CSS는 iframe 안으로 들어가지 않으므로, 안쪽 p는 카드의 글꼴이 아니라 브라우저 기본 글꼴로 표시됩니다.
iframe은 CSS로 크기를 정하지 않으면 가로 300px, 세로 150px로 그려집니다. src와 srcdoc을 함께 적으면 srcdoc이 우선하며, loading=lazy를 주면 화면 근처로 스크롤될 때까지 안쪽 문서를 불러오지 않아 첫 화면을 그리는 부담이 줄어듭니다.
신뢰할 수 없는 페이지를 과도한 권한으로 삽입하면 보안과 개인정보 문제가 생길 수 있습니다.
직접 바꿔보세요srcdoc 안의 제목과 배경색을 바꿔보세요.