Cozy Coding

HTML에서 Iframe과 SVG 사용하는 방법

HTML에서 Iframe과 SVG 사용하는 방법
Cozy CodingPosted On Aug 3, 20246 min read

<img src="/assets/img/2024-08-03-HTMLforBeginnersIframeSVG17_0.png" />

아이프레임

HTML의 iframe 요소는 현재 문서 내에 다른 HTML 문서를 임베드하는 데 사용됩니다. 이를 통해 다른 소스(예: 다른 웹페이지)의 콘텐츠를 페이지의 지정된 영역 내에 표시할 수 있습니다.

목적

  • 다른 웹사이트나 웹 애플리케이션의 콘텐츠를 웹페이지 내에서 직접 표시합니다.
  • 임베드된 콘텐츠를 메인 페이지에서 격리하여 스타일 및 스크립트 충돌을 방지합니다.
  • 콘텐츠 자체를 중복하지 않고 여러 페이지에 동일한 콘텐츠를 임베드할 수 있습니다.

사용 사례

  • YouTube나 Vimeo와 같은 플랫폼에서 비디오를 표시합니다.
  • Google 지도와 같은 서비스에서 지도를 통합합니다.
  • 소셜 미디어 위젯, 채팅 위젯 또는 기타 제3자 도구를 추가합니다.
  • 웹사이트의 다른 부분이나 외부 사이트에서 콘텐츠를 임베드합니다.
<iframe width="560" height="315" src="https://www.youtube.com/embed/4sYNBViSq-8?si=_jtxP8OgpcmkHcmx"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>

SVG

SVG(Scalable Vector Graphics) 요소는 HTML(또는 XML) 문서 내에서 사용되는 마크업 요소 유형으로, 벡터 기반 그래픽을 정의하는 데 사용됩니다. SVG 요소는 상호 작용 및 애니메이션을 지원하는 복잡한 그래픽을 생성할 수 있습니다. 이러한 그래픽은 조절이 가능하며, 품질을 잃지 않고 크기를 조정할 수 있어 반응형 웹 디자인에 특히 유용합니다.

네, SVG 요소는 주로 디자이너가 벡터 그래픽 디자인 소프트웨어를 사용하여 준비합니다. 이러한 도구는 사용자 친화적 인터페이스를 제공하여 벡터 그래픽을 생성하고 편집한 후 SVG 파일로 내보낼 수 있습니다.

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <g transform="translate(0.00630876,-0.00301984)">
        <path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
        <path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm-1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
    </g>
</svg>

SVG 파일은 모든 그래픽 요소를 포함하는 SVG 요소로 시작합니다.

SVG 요소에는 외관과 동작을 제어하는 다양한 속성이 포함될 수 있습니다:

  • 위치와 크기: x, y, width, height, cx, cy, r 등
  • 스타일링: fill, stroke, stroke-width, opacity 등
  • 변환: 번역, 회전, 크기 조절 등을 적용하는 transform 속성
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="blue" />
    <circle cx="100" cy="100" r="40" fill="green" />
    <ellipse cx="150" cy="50" rx="30" ry="20" fill="red" />
    <line x1="0" y1="0" x2="200" y2="200" stroke="black" />
    <polyline points="0,100 50,150 100,100" fill="none" stroke="black" />
    <polygon points="50,150 90,190 10,190" fill="purple" />
    <path d="M10 110 H 90 V 190 H 10 Z" fill="orange" />
    <text x="100" y="50" font-family="Verdana" font-size="20" text-anchor="middle" fill="black">SVG</text>
</svg>

예시

비트코인 SVG 아이콘의 예시를 살펴보겠습니다.

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <g transform="translate(0.00630876,-0.00301984)">
        <path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
        <path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
    </g>
</svg>

GIF