1. 멀티미디어
1-1. img 태그
<img src="이미지 파일 경로" width="750" height="530" alt="이미지 설명">- 파일 주소는 src 속성으로 지정.
- 크기는 width와 height 속성으로 단위 없이 지정.
- 이미지에 대한 설명은 alt라는 속성을 사용.
1-2. video 태그
<video autoplay muted controls src="비디오 파일 경로" width="500" height="430"></video>- 파일 주소는 src 속성으로 지정.
- 크기는 width와 height 속성으로 단위 없이 지정.
- 자동 재생을 하는 autoplay 속성, 음소거를 하는 muted, 조작하는 버튼들을 보여 주는 controls 속성이 있다.
- 특히 자동 재생은 불쾌감을 줄 수 있기 때문에 일부 브라우저에서는 반드시 muted와 함께 써야 동작한다.
- 웹 브라우저마다 지원하는 비디오 파일 포맷이 다르기 때문에 코드 작성 전 지원 여부를 확인해야 함.
1-3. audio 태그
<audio src="오디오 파일 경로" autoplay controls></audio>-
실행결과
-
파일 주소는 src 속성으로 지정.
-
오디오 컨트롤 패널이 웹 브라우저에 노출되도록 controls 속성을 설정함.
-
자동재생을 하게 도와주는 autoplay 속성등 다양한 속성이 있음.
-
웹 브라우저마다 지원하는 오디오 파일 포맷이 다르기 때문에 코드 작성 전 지원 여부를 확인해야 함.
1-4. source 태그
<audio controls>
<source src="파일 경로.wav" type="audio/wav">
<source src="파일 경로.mp3" type="audio/mp3">
</audio>
<video controls>
<source src="파일 경로.Ogg" type="video/Ogg">
<source src="파일 경로.MP4" type="video/MP4">
지원하지 않는 웹 브라우저 입니다.
</video>- source 태그는 audio 태그와 video 태그에서 리소스(파일)의 경로와 미디어 타입을 명시하는데 사용
- source 태그는 멀티미디어 태그를 사용할 시에 필수로 작성해야하는 태그는 아니지만, 사용하면 좋은 태그이다.
- 그 이유로는 audio 태그와 video 태그는 다양한 포맷을 지원하며, 브라우저 별로 지원하는 포맷이 다르기 때문에 우선적으로 사용하라는 것을 지정하는 태그.
- 만약 video 에서 2가지 다 지원되지 않는 웹 브라우저라면 "지원하지 않는 웹 브라우저 입니다." 라는 텍스트 노출.
1-5. iframe 태그
<iframe src="문서의 경로.html" width="750" height="135"></iframe>- 인라인 프레임이라는 뜻으로, 다른 HTML 문서를 문서 안에 집어넣을 때 사용.
- src로 불러올 문서의 경로를 지정해주면 됨.
- 이미지, 비디오, 오디오랑 마찬가지로 크기를 width, height라는 속성으로 지정 가능.
2. 다른 코드 불러오기
2-1. link 태그
<head>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
</head>- 외부에 있는 것들을 불러올때 사용하는 태그
- rel 속성에는 어떤 목적인지를 적고, href 속성에는 위치를 지정해준다.
- 주로 head 태그 안에서 가장 마지막에 써 줌.
2-2. script 태그
<body>
<script src="like.js"></script>
</body>- 자바스크립트 파일을 불러올 때 사용하는 태그.
- src 속성으로 파일의 위치를 적는다.
- link 태그와 다르게 script 태그는 body 태그 안에서 가장 마지막에 써준다.
프로그래밍 공부하는 찬우입니다👋