} code { background-color: #f8f9fa; padding: 2px 5px; border-radius: 3px; font-family: monospace; }

HTML embed 태그

1. 정의와 목적

<embed> 태그는 외부 애플리케이션이나 대화형 콘텐츠를 HTML 문서에 삽입하는 데 사용되는 HTML 요소입니다. 주로 플러그인 기반의 콘텐츠를 표시할 때 사용됩니다.

주의사항:

2. 기본 구조

<embed 
    src="example.swf" 
    type="application/x-shockwave-flash" 
    width="400" 
    height="300" 
    title="예제 콘텐츠">
</embed>

3. 자주 사용되는 속성

속성 설명 예시
src 삽입할 콘텐츠의 URL src="example.swf"
type 콘텐츠의 MIME 타입 type="application/x-shockwave-flash"
width 콘텐츠의 너비 width="400"
height 콘텐츠의 높이 height="300"
title 접근성을 위한 제목 title="예제 콘텐츠"

4. 실제 사용 예제

4.1 Flash 콘텐츠 삽입

<embed 
    src="animation.swf" 
    type="application/x-shockwave-flash" 
    width="550" 
    height="400" 
    title="Flash 애니메이션">
</embed>

4.2 PDF 문서 삽입

<embed 
    src="document.pdf" 
    type="application/pdf" 
    width="100%" 
    height="600px" 
    title="PDF 문서">
</embed>

4.3 SVG 이미지 삽입

<embed 
    src="image.svg" 
    type="image/svg+xml" 
    width="300" 
    height="200" 
    title="SVG 이미지">
</embed>

5. 스타일링

/* 반응형 embed */
.responsive-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 비율 */
    height: 0;
}

.responsive-embed embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* 테두리 및 여백 설정 */
.custom-embed {
    border: 2px solid #ddd;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

6. 성능 최적화 팁

7. 검증 및 테스트

중요: