Day34_img/audio/video 태그, list 태그
2023.10.04
Day34 세 줄 요약
이미지(혹은 오디오, 비디오) 태그로 특정 주소에 있는 이미지(혹은 오디오, 비디오) 파일을 불러올 수 있다.
youtube 영상에서 '마우스 우클릭 -> 소스 코드 복사'를 통해 해당 영상의 src 추출
<ol> 태그로 순서가 있는 리스트 작성 가능
미디어 관련 태그
* 아래와 같이 workspace 구성
img(이미지) 태그
인라인 요소이며 닫는 태그 없이 단일 태그로 사용
* 속성
- src : 이미지 경로(주소)
- alt : 이미지 설명(경로가 잘 못 되어있는 경우 이미지 대체 텍스트)
- width : 가로 너비(height와 같이 쓰면 원본 비율이 틀어짐)
- height : 세로 길이
* 경로 종류
1) 상대 경로 : 현재 폴더를 기준으로 자원(src)의 경로를 표현하는 방식
- 현재폴더 : ./파일명
- 하위폴더 : ./하위폴더명/파일명
- 상위폴더 : ../상위폴더명/파일명
2) 절대 경로 : 현재 폴더에 상관없이 디렉토리(/ 또는 \) 기준으로 자원의 경로를 표현
- ex) 바탕화면 = C:\Users\user\Desktop\
3) 인터넷 경로 : url 주소로 경로 표현
- 용량이 적게 듬
- 원본 이미지가 사라지면 사라짐
<body>
<h1>상대경로</h1>
<img src="1.png" alt="1번 사진" width="100px"/>
<img src="./2.png" alt="2번 사진" width="100px"/>
<img src="./image/3.png" alt="3번 사진" width="100px"/>
<h1>절대경로</h1>
<img src="C:\Users\user\Desktop\4.png" alt="4번 사진" width="100px"/>
<h1>인터넷경로</h1>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/30/Java_programming_language_logo.svg/800px-Java_programming_language_logo.svg.png" alt="이미지 주소 복사" width="100px"/>
</body>
</html>
img 태그 실행결과
audio(오디오) 태그
* 속성
- controls : 웹 브라우저에 음원재생을 제어하는 플레이어 생성
- autoplay : 웹 브라우저에서 음원을 자동으로 재생
- loop : 음원을 반복 재생
- volume : 음원의 볼륨 설정
<body>
<audio src="./media/Pallet Town (Acoustic).mp3" controls>
브라우저가 .mp3를 지원하지 않을 경우 출력</audio>
</body>
실행결과
video(비디오) 태그
<body>
<video src="./media/Coffee - 45358.mp4" controls width="500px">
브라우저가 .mp4를 지원하지 않을 경우 출력
</video>
<video src="./media/Lake - 67201.mp4" controls width="500px"></video>
<!-- youtube 퍼오기 -->
<!-- 마우스 우클릭 후 소스 코드 복사 클릭 -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/UwbyOEk1Xjo?si=p7hVRUCFBHILCeFe"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</body>
</html>
실행결과
list 태그
list 태그는 자식요소인 <li> 태그와 짝꿍으로 구성됨
<ul> 태그
unordered list 태그, 순서가 없는 리스트 태그
* type 속성 종류
- circle
- square
- disc(default)
<body>
<h1>UL(Unordered List)</h1>
<ul>항목1(<li> 태그 없이 사용)</ul>
<li>항목1(<ul> 태그 없이 사용)</li>
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
<hr/>
<h2>라즈베리 파이를 활용한 IoT 서비스 개발자 양성과정</h2>
<h3>목록의 모양 변경(circle)</h3>
<ul type="circle">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ul>
<hr/>
<h3>목록의 모양 변경(square)</h3>
<ul type="square">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ul>
<hr/>
<h3>목록의 모양 변경(disc=default, 생략가능)</h3>
<ul type="disc">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ul>
</body>
<ul>태그 실행결과
<ol> 태그
ordered list 태그, 순서가 있는 리스트 태그
* type 속성 종류
- 1 : 숫자
- a : a to z, aa to az, ...
- A : A to Z, AA to AZ, ...
- i : 로마 숫자 (소문자)
- I : 로마 숫자 (대문자)
<body>
<h1>OL(Ordered List)</h1>
<hr/>
<ol>
<li>항목</li>
<li>항목</li>
<li>항목</li>
</ol>
<hr/>
<h2>라즈베리 파이를 활용한 IoT 서비스 개발자 양성과정</h2>
<h3>목록의 모양 변경(ordered list start from no.5)</h3>
<!-- default type="1" -->
<ol type="1" start="5">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ol>
<hr/>
<h3>목록의 모양 변경(type = "A")</h3>
<ol type="A">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ol>
<hr/>
<h3>목록의 모양 변경(type = "a")</h3>
<ol type="a">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ol>
<hr/>
<h3>목록의 모양 변경(type = "I")</h3>
<ol type="I">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ol>
<hr/>
<h3>목록의 모양 변경(type = "i")</h3>
<ol type="i">
<li>교육기간 : 2023.08.11 ~ 2024.02.15</li>
<li>교육대상 : 개발자로서의 진출을 희망하는 자</li>
<li>교육시간 : 08:30 ~ 16:50</li>
<li>교육비용 : 교육비, 교재비 무료</li>
</ol>
</body>
<ol> 태그 실행결과
list 태그 예제
source code
<body>
<h1>ul과 ol의 사용</h1>
<ul type="square">
<li>ul과 ol의 차이를 알아본다</li>
<li>ul과 ol을 활용해 예제를 풀어본다</li>
</ul>
<hr>
<ol>
<li>일차
<ol type="A">
<li>HTML이란?</li>
<li>HTML의 기본 구조</li>
</ol>
</li>
<li>일차
<ol type="a" start="b">
<li>스타일 적용</li>
<li>a 태그 사용</li>
<li>이미지 넣기</li>
</ol>
</li>
<li>일차
<ol type="I" start="3">
<li>미디어 사용</li>
<li>ol과 ul을 활용한 예제</li>
</ol>
</li>
</ol>
</body>
실행결과
