[STUDY] 하이퍼링크와 멀티미디어 태그 정리

 

1. <a> 태그 (Anchor)

텍스트나 미디어에 URL을 연결하여 하이퍼링크를 만든다. 인라인 요소이지만 자식으로 블록 요소도 포함할 수 있는 특이점이 있다.

• href 속성: 연결할 주소(URL)를 지정한다.
• target 속성:
  • _self: 현재 탭에서 열기 (기본값)
  • _blank: 새 브라우저 탭에서 열기
• title 속성: 마우스 오버 시 나타나는 보충 설명(툴팁)이다.

2. 하이퍼링크 활용 팁

• 텍스트 링크: "클릭", "이동하기" 대신 "네이버 바로가기"처럼 목적지를 알 수 있는 키워드를 써야 한다. (SEO 및 접근성 향상)
• 이미지 링크: <a> 태그로 <img>를 감싸며, alt 속성에 이동 경로를 적어준다.
• 전화번호 링크: href="tel:번호"를 사용하여 모바일에서 바로 전화를 걸 수 있다.
• 북마크: 이동할 위치의 태그에 id를 주고, href="#id이름"으로 연결한다.

3. 멀티미디어 삽입 태그

• <img>: 이미지를 삽입한다. 정보 전달 목적이면 태그로, 단순 꾸미기용이면 CSS 배경 이미지로 넣는 것이 정석이다.
• <video>, <audio>: 동영상과 오디오를 재생하는 시맨틱 태그이다.
• <iframe>: 현재 문서 안에 다른 HTML 문서를 불러온다. 주로 유튜브 영상 공유에 사용된다.
• <svg>: 확대/축소 시에도 화질이 깨지지 않는 벡터 이미지 태그이다. 아이콘이나 애니메이션에 자주 쓰인다.

---

한눈에 보는 요약

태그	핵심 요약
<a>	하이퍼링크 생성 (href, target 속성 중요)
<img>	이미지 삽입 (의미 있는 이미지는 반드시 alt 입력)
<video>	동영상 재생 (브라우저별 지원 형식 확인 필요)
<iframe>	외부 콘텐츠(유튜브 등) 삽입 시 활용
<svg>	깨지지 않는 벡터 그래픽 삽입