웹(Web)이 가지는 최고의 강력함은 페이지 간을 연결하는 **하이퍼링크(Hyperlink)**와 글자 외에 이미지, 동영상 등 멀티미디어 요소를 간편하게 통합하는 점에 있습니다.
1. 하이퍼링크 태그
<!-- 외부 사이트로 이동 (새 탭에서 열기: target="_blank") -->
<a href="https://davhave.com" target="_blank" rel="noopener">DAVHAVE 이동</a>
<!-- 페이지 내부 앵커 이동 -->
<a href="#section2">2구역으로 이동</a>
href: 이동하고자 하는 목표 페이지의 URL 주소.target="_blank": 현재 창이 아닌 새로운 탭에서 링크를 엽니다.
2. 이미지 ![]()
태그와 alt 웹 접근성 속성
<img src="/images/logo.png" alt="DAVHAVE 대표 로고 이미지" width="200">
src: 이미지 파일의 경로.alt(Alternative Text): 이미지를 로드할 수 없거나 스크린 리더 사용 시 이미지를 대신해 읽어줄 설명 텍스트 (SEO 필수 속성).
3. HTML5 비디오 & 오디오 재생 태그
별도의 외부 플러그인 설치 없이 브라우저 자체에서 영상과 음악을 재생합니다.
<!-- 비디오 태그 -->
<video src="sample.mp4" controls width="640" poster="thumbnail.jpg">
브라우저가 비디오 태그를 지원하지 않습니다.
</video>
<!-- 오디오 태그 -->
<audio src="music.mp3" controls autoplay loop></audio>
controls: 재생, 일시정지, 음량 조절 등 브라우저 기본 컨트롤러 바를 표시.autoplay: 자동 재생 (최근 브라우저 보안 정책상 음소거muted필요).loop: 무한 반복 재생.
4. 자주 묻는 질문 (Q&A)
Q. 이미지 태그의 alt 속성을 생략하면 어떤 영향이 생기나요?
A. 시각 장애인이 웹 브라우징을 할 때 스크린 리더가 해당 이미지의 내용을 읽지 못하며, 구글 등의 검색엔진 크롤러 평가 점수가 감점되어 SEO 성능이 떨어집니다.