💡 퀵 접속: htm.kr/embed

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

HTML embed 태그

1. 정의와 목적

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

주의사항:

대부분의 최신 브라우저에서는 플러그인 지원이 제한되어 있습니다.
가능한 경우 <object> 또는 <iframe> 태그 사용을 권장합니다.
접근성을 고려하여 대체 콘텐츠를 제공해야 합니다.

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. 성능 최적화 팁

필요한 경우에만 embed 태그 사용
적절한 크기 설정으로 레이아웃 시프트 방지
대체 콘텐츠 제공
최신 웹 표준 사용 권장
플러그인 의존성 최소화

7. 검증 및 테스트

W3C 유효성 검사
브라우저 호환성 테스트
접근성 검사
반응형 동작 테스트
대체 콘텐츠 확인

중요:

embed 태그는 레거시 콘텐츠를 위해 주로 사용됩니다.
최신 웹 개발에서는 가능한 한 <object> 또는 <iframe> 태그 사용을 권장합니다.
플러그인 기반 콘텐츠는 모바일 환경에서 제한될 수 있습니다.
접근성을 고려하여 title 속성을 반드시 지정하세요.