- HTML 이미지, 오디오, 비디오 태그의 기본 사용법과 필수 속성 이해
- 블록 요소와 인라인 요소의 차이점과 특성 파악
- div와 span 태그의 활용법과 영역 지정 방식 습득
<이미지 태그의 기본 구조>
HTML에서 이미지를 삽입하는 <img> 태그는 자체 닫힘 태그로, 웹 페이지에 시각적 요소를 추가하는 핵심 역할을 한다.
- 기본 문법
<!-- <img src="추가하려는 이미지 경로" [alt="이미지설명문구"] width="가로길이(px/%)" height="세로길이(px/%)"> -->
img 태그의 특징:
- 자체 닫힘 태그: 시작 태그만 존재하고 별도의 닫힘 태그가 없음
- 인라인 요소: 텍스트와 같은 줄에 배치됨
- 필수 속성: src 속성은 반드시 포함되어야 함
- src 속성과 이미지 경로
<h3>src속성</h3>
<p>불러올 이미지 리소스의 경로를 나타냄</p>
<img src="./images/sample.jpg" alt="빵빵이의 일상">
경로 지정 방식:
- 상대 경로: ./images/sample.jpg (현재 폴더 기준)
- 절대 경로: /images/sample.jpg (사이트 루트 기준)
- 외부 URL: https://example.com/image.jpg
- Base64 인코딩: data:image/jpeg;base64,[긴 문자열] (이미지 데이터 직접 포함)
<alt 속성 - 웹 접근성의 핵심>
- alt 속성의 중요성
<h3>alt속성</h3>
<p>
- 이미지의 경로가 잘못되었거나 이미지를 제대로 불러올 수 없을 때 대체 텍스트로 사용 <br>
- 시각장애인들을 위한 스크린리더에서 이미지를 읽어주는 설명문구
</p>
alt 속성의 역할:
- 웹 접근성: 스크린 리더가 이미지 내용을 음성으로 전달
- SEO 최적화: 검색 엔진이 이미지 내용을 이해
- 로딩 실패 시: 이미지를 불러올 수 없을 때 표시되는 대체 텍스트
- 의미적 설명: 장식용 이미지는 빈 alt="" 사용
<이미지 크기 조절>
- 고정 길이 단위 (픽셀)
<h3>width속성 height속성</h3>
<h4>고정길이단위(px) : 화면사이즈와 상관없이 이미지크기는 고정되어 있음</h4>
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="200px" height="150px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="200px" height="100px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="100px" height="150px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="100px" height="100px">
- 가변 길이 단위 (퍼센트)
<h4>가변길이단위(%) : 화면사이즈 또는 부모요소 사이즈에 따라 이미지 크기가 변경</h4>
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="10%" height="150px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="15%" height="150px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="20%" height="150px">
<img src="./images/sample.jpg" alt="빵빵이의 일상" width="25%" height="150px">
크기 단위 비교:
단위 특징 활용
| 픽셀(px) | 절대 크기, 화면과 무관하게 일정 | 정확한 크기 제어 필요 시 |
| 퍼센트(%) | 상대 크기, 부모 요소에 비례 | 반응형 디자인 구현 시 |
<오디오와 비디오 태그>
- 오디오 태그
<h1>오디오 관련 태그</h1>
<!--
<audio src="오디오파일경로" controls autoplay loop></audio>
controls : 재생도구 출력여부
autoplay : 자동재생(브라우저별로 지원x)
loop : 반복재생
-->
<audio src="" controls></audio>
- 비디오 태그
<h1>비디오 관련태그</h1>
<!-- <video src="비디오파일경로" controls autoplay loop width="300" height="200" poster="썸네일경로"></video> -->
<video src="비디오파일경로" controls autoplay loop width="300" height="200" poster="./images/sample.jpg"></video>
멀티미디어 태그 속성:
속성 기능 설명
| controls | 재생 컨트롤 표시 | 재생/일시정지, 볼륨, 진행바 등 |
| autoplay | 자동 재생 | 대부분 브라우저에서 정책상 제한 |
| loop | 반복 재생 | 끝나면 처음부터 다시 재생 |
| poster | 썸네일 이미지 | 비디오 로드 전 표시할 대표 이미지 |
<HTML 요소의 분류 - 블록과 인라인>
HTML 요소는 크게 블록 요소와 인라인 요소로 분류되며, 각각 다른 특성과 용도를 가진다.
- 블록 요소와 인라인 요소의 정의
<!--
블럭요소 : 한줄 단위로 영역을 차지함.
줄바꿈이 적용되어 이미 존재하는 태그의 다음줄에 다음영역이 잡힘.
(p, pre, div, h...)
인라인요소 : content(내용) 영역에 해당하는 부분만 영역을 차지하는 요소
줄바꿈이 적용되지않아 다음영역이 바로 옆으로 잡힘
(b, mark, s, img, span...)
-->
요소 분류 비교:
구분 블록 요소 인라인 요소
| 영역 차지 | 한 줄 전체 | 콘텐츠 크기만큼 |
| 줄바꿈 | 자동 줄바꿈 | 줄바꿈 없음 |
| 크기 지정 | width, height 적용 | width, height 무시 |
| 대표 태그 | div, p, h1~h6, ul, ol | span, a, img, strong, em |
<div 태그 - 블록 요소의 활용>
- div 태그의 줄바꿈 특성
<h1>영역관련태그</h1>
<h2>div태그와 span태그의 차이점1 : 줄바꿈처리</h2>
<div style="background: red;">첫번째 영역</div>
<div style="background: orange;">두번째 영역</div>
<div style="background: yellow;">세번째 영역</div>
실행 결과:
- 각 div가 새로운 줄에서 시작
- 내용의 길이와 관계없이 한 줄 전체를 차지
- 배경색으로 블록 영역을 명확히 확인 가능
- div의 사각형 박스 영역
<h2>div태그와 span태그의 차이점2 : 영역지정방식</h2>
<h3>div태그 : 사각형 박스로 영역을 지정.</h3>
<div style="height: auto;">
[파이낸셜뉴스] 베스핀글로벌은 '스노우플레이크 월드 투어 서울 2025' 행사에 블랙 다이아몬드 스폰서로 참여해 성공적으로 행사를 마쳤다고 10일 밝혔다.
글로벌 데이터 클라우드 기업 스노우플레이크가 주관한 이번 행사에서 베스핀글로벌은 자사 데이터·AI 전문 역량을 공유하며 스노우플레이크와의 전략적 파트너십을 강화하는 데 초점을 맞췄다.
장익철 베스핀글로벌 Data AI 본부장은 발표자로 나서 스노우플레이크를 활용한 데이터 플랫폼 구축 사례와 복잡한 데이터 파이프라인의 기획, 운영, 관리 기능을 자동화하는 에이전틱 AI '헬프나우 오토MSP'를 소개했다.
</div>
<span 태그 - 인라인 요소의 활용>
- span 태그의 인라인 특성
<h3>span태그</h3>
<p>span태그는 인라인 요소로 content영역만 차지(줄바꿈 발생x)</p>
<span style="background: red;">첫번째 영역</span>
<span style="background: orange;">두번째 영역</span>
<span style="background: yellow;">세번째 영역</span>
실행 결과:
- 모든 span이 같은 줄에 연속 배치
- 콘텐츠 크기만큼만 영역 차지
- 텍스트와 같은 방식으로 흐름에 따라 배치
- span의 문장 단위 영역
<h3>span태그 : 문장단위로 영역을 지정.</h3>
<span style="height: auto;">
[파이낸셜뉴스] 베스핀글로벌은 '스노우플레이크 월드 투어 서울 2025' 행사에 블랙 다이아몬드 스폰서로 참여해 성공적으로 행사를 마쳤다고 10일 밝혔다.
글로벌 데이터 클라우드 기업 스노우플레이크가 주관한 이번 행사에서 베스핀글로벌은 자사 데이터·AI 전문 역량을 공유하며 스노우플레이크와의 전략적 파트너십을 강화하는 데 초점을 맞췄다.
장익철 베스핀글로벌 Data AI 본부장은 발표자로 나서 스노우플레이크를 활용한 데이터 플랫폼 구축 사례와 복잡한 데이터 파이프라인의 기획, 운영, 관리 기능을 자동화하는 에이전틱 AI '헬프나우 오토MSP'를 소개했다.
</span>
span의 영역 특성:
- 텍스트 흐름을 따라 줄바꿈되며 영역 형성
- 문장이나 단어 단위로 영역 지정
- 긴 텍스트는 여러 줄에 걸쳐 분산되어 표시
<iframe - 외부 콘텐츠 삽입>
- iframe의 기본 개념
<hr>
<h1>iframe</h1>
<p>웹문서 안에 다른 웹페이지를 추가하는 태그(인라인요소)</p>
<iframe src="./04_미디어관련태그.html" frameborder="0" width="300" height="300"></iframe>
iframe의 특징:
- 인라인 요소: 텍스트와 같은 줄에 배치 가능
- 독립적인 브라우저 컨텍스트: 별도의 HTML 문서 렌더링
- 보안 샌드박스: 부모 페이지와 격리된 환경
- YouTube 비디오 삽입
iframe 주요 속성:
속성 기능 설명
| src | 삽입할 페이지 URL | 외부 웹페이지나 동영상 주소 |
| width/height | 프레임 크기 | 픽셀 단위로 크기 지정 |
| frameborder | 테두리 표시 | 0은 테두리 없음, 1은 테두리 있음 |
| allowfullscreen | 전체화면 허용 | 비디오 전체화면 재생 가능 |
| title | 접근성 제목 | 스크린 리더용 설명 |
<웹 접근성과 성능 최적화>
- 접근성 고려사항
<!-- 접근성을 고려한 미디어 태그 -->
<img src="chart.png" alt="2024년 매출 증가율 15% 상승 그래프">
<video controls>
<source src="presentation.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles.vtt" srclang="ko" label="한국어">
<p>브라우저가 비디오를 지원하지 않습니다.</p>
</video>
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<p>브라우저가 오디오를 지원하지 않습니다.</p>
</audio>
- 성능 최적화
<!-- 지연 로딩 -->
<img src="image.jpg" alt="설명" loading="lazy">
<iframe src="map.html" loading="lazy"></iframe>
<!-- 사전 로딩 제어 -->
<video controls preload="metadata" poster="thumb.jpg">
<source src="video.mp4" type="video/mp4">
</video>
<!-- 보안 강화 -->
<iframe src="external-site.com"
sandbox="allow-scripts allow-same-origin"
referrerpolicy="no-referrer">
</iframe>
정리 및 요약
HTML 미디어태그와 영역태그는 풍부한 사용자 경험과 체계적인 웹 구조를 만드는 핵심 도구다. 각 태그의 특성을 이해하고 적절히 조합하여 사용하는 것이 효과적인 웹 개발의 기본이다.
핵심 포인트:
미디어 태그:
- img: src(필수), alt(접근성), width/height(크기 조절)
- audio/video: controls, autoplay, loop, poster 등으로 재생 환경 제어
- 웹 접근성: 모든 미디어에 적절한 대체 텍스트와 자막 제공
영역 태그:
- 블록 요소(div): 한 줄 전체 차지, 레이아웃 구성, 사각형 박스 영역
- 인라인 요소(span): 콘텐츠 크기만 차지, 텍스트 흐름 유지, 부분 강조
- iframe: 외부 콘텐츠 삽입, 독립적 컨텍스트, 보안 고려 필요
현대 웹 개발에서는 반응형 디자인, 웹 접근성, 성능 최적화를 모두 고려하여 미디어와 영역 태그를 활용해야 한다. 시맨틱 HTML과 CSS Grid/Flexbox를 함께 사용하면 더욱 효과적이고 유지보수하기 쉬운 웹 사이트를 구축할 수 있다.
'HTMLCSSJavaScript' 카테고리의 다른 글
| JavaScript_01) 변수 (0) | 2025.09.22 |
|---|---|
| HTML_05) 하이퍼링크 태그, 입력 양식 및 Form 태그 (0) | 2025.09.22 |
| HTML_03) 표 태그 (0) | 2025.09.20 |
| HTML_02) 목록 태그 (0) | 2025.09.19 |
| HTML_01)글자태그 (0) | 2025.09.18 |