media file 입력
예시 - 사진(img). 음악(audio). 영상(video), iframe 등
audio tag(음성 파일, mp3 파일)
-<audio src="" controls></audio>
- src : 첨부할 audio 파일의 경로 (필수 입력)
- controls : 플레이 버튼, 정지 버튼 등 표시
- autoplay : control은 보여주고 싶지 않지만, 페이지에 들어가면 자동 재생되도록
- loop : audio file 반복 재생
쓰는 다른 방법
- <audio controls>
<source src="파일 경로 작성(~~.wav)" type="audio.wav(src의 파일 양식에 맞춰서 작성)">
<source src="~~.mp3" type="">
~~~~(위 source 파일을 전부 지원하지 않는 브라우저일 때 출력됨)
</audio>
위 두 방법의 차이
- 두 방식 모두 브라우저에 적용 시 나오는 컨트롤러가 하나이고, 나오는 output은 위, 아래 모두 하나의 파일만 출력됨(아래 방법은 제일 위의 src에 적혀 있는 것만 나옴)
- 하지만, 일부 브라우저는 특정 파일 양식(mp3, wav, ogg)를 지원하지 않을 수도 있음
- 이 때, 아래 방법은 위 예시를 예로 들면 wav를 지원하지 않으면 아래 src가, 그것도 나오지 않으면 더 아래 파일이 출력됨
- 즉, wav 지원 X면 MP3가, MP3도 지원하지 않으면 아래 SOURCE 태그의 SRC가 출력됨
video tag
사용 방법은 audio와 같음
-<video src="파일 경로" controls></video>
iframe tag
문서에 또 다른 html 문서나 또 다른 컨텐츠를 넣고 싶을 때
직접 작성할 일은 거의 없음
유튜브 영상 예시 - 공유 -> 퍼가기 -> iframe tag 복붙하기
기타 tag
abbr(abbreviation)
- 사용법
<abbr title="">축약된 단어</abbr>
- ex
<abbr title="한국">대한민국</abbr>
- "대한민국"에 커서를 대면 "한국" 보임
address(연락처 관련 마크업)
- 사용법
<address> 관련 연락 </address>
- ex
<address>
<a href="mailto:jim@rock.com">jim@rock.com</a><br>
<a href="tel:+13115552368">(311) 555-2368</a>
</address>
pre, code tag
- pre tag(preformatted text)
- 페이지에서 빈칸 등 html에서 입력한 그대로 출력됨
-<pre>~~~</pre>
- code tag
- 페이지에서 code를 입력하고자 할 때 쓰임
- <code>~~~</code>
cf> 왜 pre tag와 code 태그가 같이 묶였는가?
- code를 입력할 때, 들여쓰기 등이 중요한데
pre 태그와 같이 쓰면 사용자가 입력한 그대로 출력되므로
<!DOCTYPE html>
- 브라우저에게 위 문서는 HTML5로 작성된 문서임을 알려줌
- HTML의 기준은 총 8가지가 있는데, 그 중 가장 최신의 버전을 사용하겠다는 것을 선언
<head>
- 문서에 대한 메타 데이터 포함됨
<title>
- 홈페이지의 이름(문서의 대제목)
- 검색 최적화에 매우 중요
- title 활용 방법
- 키워드 단순 나열 비추
- 페이지마다 title의 값 변경
- 길고 친절하게 작성
<link>
- 홈페이지에 CSS 파일 적용시킴
-<link rel="stylesheet" href="문서 경로">
- cf> 홈페이지 폰트 적용법
- 폰트 홈페이지에 들어가 웹 폰트 URL 복사(link tag로 작성되어 있음)
- css를 이용해 css font-family 설정 적용시킴
ex) <head>
<link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic.css" rel="stylesheet">
<style>
*{
font-family: 'NanumGothicLight';
font-family: 'NanumGothic';
font-family: 'NanumGothicBold';
font-family: 'NanumGothicExtraBold';
} 이나 html tag의 style 속성에 적용시킴
<style>
- head 부분에 적고 css 작성
cf> 드래그 후 컨트롤 + ? 누르면 주석 처리됨
<script>
- js 파일 적용
- 왜 script tag는 head에 쓰지 않고, body의 제일 마지막에 입력되는가?
- 브라우저가 tag를 render할 때, 위에서부터 순서대로 코드를 처리함
- 이 때, link tag 같은 경우에는 link tag를 처리하면서, 아래 코드를 처리함
- 하지만, script tag는 script tag의 처리를 완전히 끝내고 다음 코드로 넘어감
-> 만약 head에 작성하면
script tag가 완전히 load 될 때까지 다른 코드의 처리를 멈추고 body 내부를 실행시키므로
비효율적
meta
name : 메타데이터의 종류
content : 메타데이터의 값
<meta name="viewport"(화면 사이즈) content="width=device-width, initial-scale=1.0"
- 사용자가 사용하는 화면에 맞춰 어떤 식으로 화면을 조정해야 하는지
<meta http-equiv="X-UA-Compatible content="IE=Edge>
<meta name="author" content="홍길동"> // 작성자가 홍길동
<meta name="description" content=""> // 홈페이지가 무슨 내용을 담고 있는지 설명(description)
'TIL > HTML' 카테고리의 다른 글
| Selecting element - 문서의 구성(Header, nav, main, aside, footer) (0) | 2022.05.28 |
|---|---|
| breadcrumb, pagination (0) | 2022.05.19 |
| label, radio, checkbox, select, textarea, button, table 태그 (0) | 2022.05.04 |
| HTML 2일차 - description list, blockquote, form, input (0) | 2022.04.28 |
| HTML 1일차 - h1, 단락, 강조, a, img, list (0) | 2022.04.28 |