목차
- srcdoc 예제 - <iframe> 태그에 표시할 HTML 내용 지정
- srcdoc 정의
- srcdoc 구문
- srcdoc 예제 - srcdoc 속성의 속성값에 스타일 적용
- srcdoc 예제 - 동일 따옴표 사용해 srcdoc 적용 안 된 경우
srcdoc 예제 - <iframe> 태그에 표시할 HTML 내용 지정
<iframe srcdoc="<html><head><title>홈짱닷컴</title></head><body><p>홈짱닷컴 (Homzzang.com)</p></body></html>"></iframe>
결과보기
srcdoc 정의
iframe (아이프레임)의 src 속성을 대체해 표시할 HTML 내용 지정.
1. srcdoc 속성 사용 가능 태그 종류
<iframe>
2.
- 브라우저가 srcdoc 속성 지원 O 경우, srcdoc 내용 표시. (즉, src 속성의 값을 대체함.)
- 브라우저가 srcdoc 속성 지원 X 경우, src 속성 값을 표시.
- sandbox 및
seamless 속성과 함께 사용될 것으로 예상됨.
- PS. seamless 속성은 제거됨.
- 주의: srcdoc 속성의 값을 감싸는 따옴표와 값에 사용된 따옴표는 종류가 반드시 달라야 함. (같은 따옴표를 사용할 경우, 값에 있는 따옴표에 역슬래시 이용해 회피하려 해도, 브라우저가 지원 안 해서인지 백지로 나옴. ㅡㅡ;)
3.
주요 최신 브라우저 모두 지원.
srcdoc 구문
<iframe srcdoc="HTML_code">...</iframe>
[속성값]
HTML_code
아이프레임에 표시할 HTML 태그 내용. (※ 유효한 태그이여야 함.)
srcdoc 예제 - srcdoc 속성의 속성값에 스타일 적용
[인라인스타일 경우]
<iframe srcdoc='
<html>
<head>
<title>홈짱닷컴</title>
</head>
<body>
<p style="color:blue">홈짱닷컴 (Homzzang.com)</p>
</body>
</html>
'></iframe>
결과보기
[내부스타일 경우]
<iframe srcdoc='
<html>
<head>
<title>인라인 HTML 예제</title>
<style>
p {
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<p>홈짱닷컴 (Homzzang.com)</p>
</body>
</html>
'></iframe>
결과보기
PS. CSS 스타일 방식 종류: https://homzzang.com/b/css-3
srcdoc 예제 - 동일 따옴표 사용해 srcdoc 적용 안 된 경우
<iframe srcdoc='
<html>
<head>
<title>홈짱닷컴</title>
</head>
<body>
<p style=\'color:blue\'>홈짱닷컴 (Homzzang.com)</p>
</body>
</html>
'></iframe>
결과보기
