svg 태그
<svg> 태그는 화면 크기에 관계없이 일정한 화질을 유지하는 SVG(Scalable Vector Graphic) 파일을 표현합니다.
SVG는 웹에 그래픽 요소를 깨짐 없이 표현하는 유용한 도구로, 다양한 애플리케이션에서 널리 사용되고 있습니다.
이제 웹페이지에 여러분의 인스타그램으로 이동하는 링크를 만들어볼게요. 인스타그램 링크가 없거나 홈페이지에 공개하기 원하지 않는다면, 팔로우하는 인스타그램 링크나 https://www.instagram.com/geekhaus.club/를 사용해 보세요.
SVG의 주요 특징
-
백터 기반: SVG는 벡터 그래픽 기반으로, 그래픽 요소들을 점과 선 기반의 수학적 표현으로 정의합니다. 따라서 확대하거나 축소해도 품질 손실이 없습니다.
-
스타일 및 스크립트: SVG는 CSS로 스타일링할 수 있으며, JavaScript로 애니메이션 및 동작을 조작할 수 있습니다.
-
다양한 그래픽 요소: SVG에는 여러 가지 기본 그래픽 요소가 포함되어 있습니다. 예를 들어 원 (
<circle>), 사각형 (<rect>), 선 (<line>), 폴리라인 (<polyline>), 다각형 (<polygon>), 경로 (<path>)와 같은 그래픽 요소가 있습니다.
svg 링크 만들기
아래와 같이 a 태그 내 svg 태그를 사용해 인스타그램 링크를 만들 수 있습니다.
<a
href="https://www.instagram.com/geekhaus.club/"
class="social-media"
target="_blank"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-instagram"
viewBox="0 0 16 16"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
/>
</svg>
</a>
svg 태그 내 path 태그의 d 속성은 인스타그램 아이콘의 경로를 뜻합니다. 이 경로는 인스타그램 아이콘의 모양을 결정합니다.
이렇게 인스타그램 svg 요소를 a 태그로 감싼 링크를 클릭하면, 새 창에서 href로 주소로 이동하게 됩니다.
a 태그에서 target="_blank"를 제거하면, 새 창이 아닌 현재 창에서 지정한 링크로 이동합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!