💡 퀵 접속: htm.kr/object
<object> 태그는 외부 리소스를 HTML 문서에 삽입하는 데 사용되는 HTML 요소입니다.
이미지, PDF, Flash, Java 애플릿 등 다양한 유형의 콘텐츠를 삽입할 수 있습니다.
<object
data="example.pdf"
type="application/pdf"
width="400"
height="300">
<p>PDF를 볼 수 없는 경우 <a href="example.pdf">여기</a>를 클릭하세요.</p>
</object>| 속성 | 설명 | 예시 |
|---|---|---|
| data | 삽입할 리소스의 URL | data="example.pdf" |
| type | 리소스의 MIME 타입 | type="application/pdf" |
| width | 객체의 너비 | width="400" |
| height | 객체의 높이 | height="300" |
| name | 객체의 이름 | name="pdfViewer" |
<object
data="document.pdf"
type="application/pdf"
width="100%"
height="600px">
<p>PDF를 볼 수 없는 경우 <a href="document.pdf">PDF 다운로드</a></p>
</object><object
data="animation.swf"
type="application/x-shockwave-flash"
width="550"
height="400">
<param name="movie" value="animation.swf">
<param name="quality" value="high">
<p>Flash를 지원하지 않는 브라우저입니다.</p>
</object><object
data="image.svg"
type="image/svg+xml"
width="300"
height="200">
<img src="image.png" alt="대체 이미지">
</object>/* 반응형 object */
.responsive-object {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 비율 */
height: 0;
}
.responsive-object object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* 테두리 및 여백 설정 */
.custom-object {
border: 2px solid #ddd;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}