728x90
반응형
SMALL
안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>이미지 및 멀티미디어 관련 태그</title>
</head>
<body>
<h1>이미지 관련 태그</h1>
<!--
<img src="삽입하고자하는 이미지의 경로" width="이미지의 가로길이"
height="이미지의 세로길이" alt="이미지 대체 문구">
-->
<h3>* src속성 alt속성</h3>
<img src="resources/resources/image/passion2.jpg" width="340"
height="340" alt="이 사진은 미래의 내 모습이다">
<br>
<img src="resources/resources/image/passion.jpg" width="340"
height="340" alt="열정맨">
<br>
<p>
*alt <br>
- 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없을 때 대체 텍스트의 용도
- 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명 문구
</p>
<h3> *width와 height 속성</h3>
<p>
이미지의 가로, 세로길이 조정 가능<br>
고정길이(px), 가변길이(%)로 지정
</p>
<h4>고정길이단위 (px) == 기본값 : 화면사이즈가 조정되어도 크기에 변함이 없음</h4>
<!-- img[width="200px"][height=150]*6 -->
<img src="resources/resources/image/nuguri1.gif" alt="" width="200px" height="150">
<img src="resources/resources/image/nuguri2.gif" alt="" width="200px" height="150">
<img src="resources/resources/image/nuguri3.gif" alt="" width="200px" height="150">
<img src="resources/resources/image/dog1.gif" alt="" width="200px" height="150">
<img src="resources/resources/image/dog2.gif" alt="" width="200px" height="150">
<img src="resources/resources/image/dog3.gif" alt="" width="200px" height="150">
<h4>가변길이단위 (%) : 화면사이즈나 혹은 부모요소 사이즈에 따라 이미지 크기가 바뀜</h4>
<!-- img[width=23%][heigth\250]*4 -->
<img src="resources/resources/image/animal1.gif" alt="" width="23%" height="250">
<img src="resources/resources/image/animal2.gif" alt="" width="23%" height="250">
<img src="resources/resources/image/animal3.gif" alt="" width="23%" height="250">
<img src="resources/resources/image/ball.gif" alt="" width="23%" height="250">
<br>
<h1>미디어 관련 태그</h1>
<h3>오디오 관련 태그</h3>
<!--
<audio src="" controls autoplay loop></audio>
src : 오디오 경로
controls : 자동재생여부 지정
loop : 반복재생여부 지정
-->
<audio src="resources/resources/audio/major.mp3" controls autoplay loop></audio>
<hr>
<br><br>
<h3>비디오 관련 태그</h3>
<!--
<video src="" controls autoplay loop width="" height="" poster=""></video>
src : 비디오 경로
controls : 자동재생여부 지정
loop : 반복재생여부 지정
-->
<video src="resources/resources/video/video1.mp4" controls autoplay loop width="400" height="200"
poster="resources/resources/image/coffee.png"></video>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| [Git] 윈도우 Git 설치하고 사용하기 (VsCode) (0) | 2023.07.28 |
|---|---|
| 플렉스관련스타일 HTML (0) | 2023.05.19 |
| css 홈페이지화면구성 메뉴바 만들기 HTML (0) | 2023.05.19 |
| css 홈페이지화면구성 검색창 만들기 HTML (0) | 2023.05.18 |
| css 홈페이지화면구성 로그인폼 만들기 HTML (0) | 2023.05.18 |
