웹 문서 작성에 이용되는 다양한 자료들을 삽입하는 HTML 태그에 대해 알아보자.
04-1 텍스트 입력하기 04-2 목록 만들기 04-3 표 만들기 04-4 이미지 삽입하기 04-5 오디오와 비디오 삽입하기 04-6 하이퍼링크 삽입하기 마무리 문제
텍스트를 입력할 때 기본이 되는 제목과 본문, 단락과 줄 바꿈 등의 태그를 알아보자.
기본형 <hn>제목</hn><hn> 태그에서 h는 제목을 뜻하는 heading을 줄인 말이다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표기할 수 있다.
...
<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>
...![[스크린샷 2022-07-30 오후 1.35.11.png]]
기본형 <p>내용</p>
<br><p>와 </p> 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어집니다.
<h1>레드향</h1>
<p>껍질에 붉은ㄴ 및이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>![[스크린샷 2022-07-30 오후 1.51.02.png]]
원하는 위치에서 줄을 바꾸는 방법 <br> 태그
<h1>레드향</h1>
<p>껍질에 붉은ㄴ 및이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
<p>비타민 C와 비타민 P가 풍부해 <br>혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>![[스크린샷 2022-07-30 오후 2.09.37.png]]
<br> 태그와 <p> 태그의 차이점은 무엇일까요?
<br>태그를 두 번 사용하면 빈 줄이 생기면서 텍스트 단락이 나뉜 것처럼 화면에 표시할 수 있습니다. 하지만 실제로는 단락이 만들어진 게 아니므로 CSS를 사용해 텍스트 단락 스타일을 적용할 때 문제가 생깁니다. 따라서 텍스트 단락을 만들 때는<p>를 사용해야 합니다.
=> <br>의 경우 단락이 나뉘는게 아니라 단순히 줄 바꿈
<p>의 경우 단락을 바꾸면서 줄이 넘어가는 방식이다.
브라우저가 인용문을 인식할 수 있게 하는 태그
기본형 <blockquote>인용문</blockquote><blockquote> 태그 안의 내용을 인용문으로 알고 다른 텍스트보다 약간 들여 쓰게 된다.
<hl> 레드향</hl>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</P>
<blockquote>
비타`민 C와 비타민 유가 풍부해<br>
혈액순환`, 감기예방 등에 좋은 것으로 알려져 있다.
</blockquote>![[스크린샷 2022-07-30 오후 2.24.36.png]]
텍스트를 굵게 표시할 때에는 <strong>이나 <b> 태그를 사용
기본형 <strong>인용문</strong>
<b>굴게 표시할 텍스트</b><strong>와<b>태그의 경우 눈으로 차이를 느낄 수 없지만 이 두 태그를 구분하는 이유는 화면 낭독기의 기능 때문이다.<strong>경고나 주의 사항처럼 중요한 내용을 강조<b>단순히 글자만 굵게 표시
<hl> 레드향</hl>
<p>껍질에 붉은 빛이 돌아 <b>레드향</b>이라 불린다.</p>
<p>레드향은 한라봉과 귤을 교배한 것으로 <br>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</P>
<p>비타민 C와 비타민 P가 풍부해 <br> <strong>혈액순환, 감기예방</strong> 등에 좋은 것으로 알려져 있다.</p>![[스크린샷 2022-07-30 오후 2.30.57.png]]
<em> 태그와 <i> 태그는 텍스트를 기울여 표시할 때 사용합니다.
![[스크린샷 2022-07-30 오후 2.55.13.png]]
| 태그 | 의미 | 비고 |
|---|---|---|
<hn> |
제목을 나타냄 | |
<p> |
줄 바꿈 | 단락 자체를 새롭게 나눠서 줄을 바꾸게 된다. |
<br> |
줄 바꿈 | 단락이 바뀌는게 아니라 단순을 줄을 나눈다. 그렇기에 원하는 영역에 개행을 넣어줄 수 있다. |
<blockquote> |
인용문 표면 | - 브라우저가 인용문을 인식할 수 있게 해주며 다른 텍스트보다 약간 들여쓰게 된다. -화면 낭독기에서 웹 문서를 읽어 내려갈 때 위 태그를 통해 일반 텍스트와 구분한다. |
<strong> |
텍스트를 굵게 표시 | 경고나 주의 사항처럼 중요한 내용을 강조하며 화면 낭독기에서 이를 고려한다. |
<b> |
텍스트를 굵게 표시 | 단순히 글자만 굵게 표시한다. |
<em> |
기울인 텍스트를 입력해주는 태그 | - emphasis의 줄임말 - 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용 - 문장 중에서 특별히 강조하고 싶은 부분에 사용 |
<i> |
기울인 텍스트를 입력해주는 태그 | - italic의 줄임말 - 마음속의 생각이나 용어, 관용구 등에 사용 - 단순히 다른 텍스트와 구별하기 위해 기울여서 표시 |
이 밖에 텍스트 관련 태그
| 종류 | 설명 | 예시 |
|---|---|---|
<abbr> |
줄임말을 표시하고 title 속성을 함께 사용할 수 있습니다. | <addr title="Internet of Things">IOT</abbr> |
<cite> |
웹 문서나 포스트에서 참고 내용을 표시합니다. | <p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다 - 영화, <cite>'비포선셋'</cite> 중</p> |
<code> |
컴퓨터 인식을 위한 소스 코드입니다. | <code>function savetheLocal()</code> |
<small> |
부가 정보처럼 작게 표시해도 되는 텍스트입니다. | <p>가격: 13,000dnjs <small>(부가세 별도)</small></p> |
<sub> |
아래 첨자를 표시합니다. | <p>물의 화학식은 H<sub>2</sub>0입니다.</p> |
<sup> |
위 첨자를 표시합니다. | <p>E = mc<sup>2</sup></p> |
<s> |
취소선을 표시합니다. | <p><s>34,000원</s>19,000원</p> |
<u> |
밑줄을 표시합니다. | <u>텍스트에 단순히 밑줄 긋기</u> |
<ins> |
공동 작업 문서에서 새로운 내용을 삽입합니다. | <ins>새로운 내용을 삽입합니다.</ins> |
예시 ![[스크린샷 2022-07-30 오후 3.14.50.png]]
웹 문서에서 목록은 단순히 어떤 항목을 나열할 때뿐 아니라 CSS와 함께 활용하여 내기게이션을 만들거나 컨텐츠를 배치하는 등의 용도로 사용할 수 있다.
목록의 종류와 기본적인 특징에 대해 알아보자.
![[스크린샷 2022-07-30 오후 3.23.24.png]]
<ol>ordered list의 줄임말<li>list의 줄임말
순서 있는 목록의 경우 type과 start를 설정함으로써 어떤 형식으로 어떤 값으로 시작할지를 속성으로 줄 수 있다. default 값으로는 "숫자", "1"가 주어진다. ![[스크린샷 2022-07-30 오후 3.26.53.png]]
...
<p><b>재료:</b> 레드향 1, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 야간</p>
<h4>재료 준비</h4>
<ol type="a">
<li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
<li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
</ol>
<h4>드레싱 준비</h4>
<ol type="a" start="3">
<li>드레싱 재료를 믹서에 한꺼번에 넣어 갈아 줍니다.</li>
</ol>
<h4>샐러드 완성</h4>
<ol type="a" start="4">
<li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ol>
...![[스크린샷 2022-07-30 오후 3.33.01.png]]
<ul>unordered list의 줄임말- 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데 이런 작은 그림을
불릿(bullet)이라고 한다.
...
<h2>레드향 샐러드 레시피</h2>
<p><b>재료:</b> 레드향 1, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
<p><b>드레싱:</b> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 야간</p>
<ul>
<li>샐러드 채소를 씻어 물기를 제거한 후 먹기 좋게 썰어서 준비합니다.</li>
<li>레드향과 아보카도, 토마토도 먹기 좋은 크기로 썰어 둡니다.</li>
<li>드레싱 재료를 믹서에 한꺼번에 넣어 갈아 줍니다.</li>
<li>볼에 샐러드 채소와 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
</ul>
...![[스크린샷 2022-07-30 오후 3.37.43.png]]
설명 목록(description list)이란 이름과 값 형태로 된 목록을 말합니다. 예를 들어 사전에서 단어명과 설명이 있는 모습을 떠올리면 쉽게 이해할 수 있습니다.
<dt>이름(단어명) 부분을 지정<dd>값(설명) qnqnsdmf wlwjd
...
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5kg</dt>
<dd>중과 15~19과</dd>
</dl>
...![[스크린샷 2022-07-30 오후 3.44.06.png]]
![[스크린샷 2022-07-30 오후 3.47.36.png]]
| 종류 | 설명 | 예시 |
|---|---|---|
<ol> |
순서 있는 목록을 만드는 태그 | ![[스크린샷 2022-07-30 오후 3.18.07.png]] |
<ul> |
순서 없는 목록을 만드는 태그 | ![[스크린샷 2022-07-30 오후 3.35.30.png]] |
<li> |
목록의 리스트를 생성 | |
<dl> |
제목을 나타냄 | ![[스크린샷 2022-07-30 오후 3.39.24.png]] |
<dt> |
제목을 나타냄 | |
<dd> |
제목을 나타냄 |
웬 문서에서 자료를 정리할 때 자주 쓰는 태그 표를 만들 때 사용하는 태그에 대해 알아보자
table은 row와 column 그리고 cell로 이루어 집니다.
![[스크린샷 2022-07-30 오후 3.50.10.png]]
위 경우 테이블을 구성하기 위해 행을 만드는 태그와 열을 만드는 태그가 필요합니다.
<table>,</table>태그를 통해 표의 시작과 끝을 알려줍니다.- 표에 제목을 넣고 싶을 경우
<table>태그 바로 아랫줄에<caption>태그를 사용합니다.
기본형 <table>
<caption>표 제목</caption>
</table>![[스크린샷 2022-07-30 오후 3.54.53.png]]
<tr>태그 : 행을 만든다<td>태그 : 행 안에 있는 셀을 만든다
기본형 <table>
<caption>표 제목</caption>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>![[스크린샷 2022-07-30 오후 3.57.51.png]]
표의 제목 행에 셀을 만들 때는 <th> 태그를 사용하여 표현합니다.
<th> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띕니다.
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</table>![[스크린샷 2022-07-30 오후 4.20.36.png]]
<thead>태그<thead>태그는 HTML 테이블에서 헤더 컨텐츠(header content)들을 하나의 그룹으로 묶을 때 사용합니다.
<thead>요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해<tbody>,<tfoot>요소와 함께 사용됩니다. 브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.
<thead>요소는<table>요소의 자식 요소로써, 반드시 모든<caption>,<colgroup>요소 다음에 위치해야 합니다. 또한,<thead>요소는 반드시 하나 이상의<tr>요소를 포함하고 있어야 합니다.<thead>와<tbody>,<tfoot>요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.
HTML <thead> 태그 from TCPSCHOOL
표의 구조를 나누어 놓는 태그
![[스크린샷 2022-07-30 오후 4.26.24.png]]
표의 구조를 지정하면 화면 낭독기를 통해 장애인도 쉽게 표를 이해할 수 있다. 또한 CSS를 사용하여 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수도 있습니다.
표의 본문이 길어 화면을 넘어갈 경우, 자바스크립트를 활용하여 <thead>, <tfoot> 태그는 표의 위 아래에 고정하고 <tbody> 태그만 스크롤하도록 만들 수 있습니다.
![[스크린샷 2022-07-30 오후 4.30.34.png]]
기본형 <td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>- rowspan : 행을 합치기 위한 속성
- colspan : 열을 합치기 위한 속성 ![[스크린샷 2022-07-30 오후 4.32.54.png]]
...
<h2>상품 구성</h2>
<table>
<caption>선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
...![[스크린샷 2022-07-30 오후 4.35.10.png]]
표를 만들기만 하는 것 뿐만 아니라 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야 합니다. 그럴 때 사용하는 태그가 <col> 태그와 <colgroup> 태그입니다.
<col>열을 1개만 지정<colgroup><col>태그를 2개 이상 묶어서 사용<caption>태그 이후에 사용
기본형 <colgroup>
<col>
</colgroup>![[스크린샷 2022-07-30 오후 4.41.44.png]]
스타일 속성이 같은 세 번째, 네 번째 열을 묶어서 너비 지정할 수 있다.
...
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
...![[스크린샷 2022-07-30 오후 4.44.07.png]]
...
<h2>먹거리</h2>
<table>
<colgroup>
<col style="background-color:#eee;">
<col>
<col style="width:150px">
<col style="width:150px">
</colgroup>
<tr>
<td>입춘 천냥 국수</td>
<td>11:00 ~ 16::00</td>
<td>목관아 주차장</td>
</tr>
<tr>
<td>제주 향토 음식</td>
<td>10:30 ~ 17::00</td>
<td>관덕정 마당</td>
</tr>
<tr>
<td>차 나눔</td>
<td>10:30 ~ 17::00</td>
<td>관덕정 마당</td>
</tr>
</table>
...![[스크린샷 2022-07-30 오후 4.47.41.png]]
...
<h2>먹거리</h2>
<table>
<colgroup>
<col style="background-color:#eee;">
<col>
<col style="width:150px">
<col style="width:150px">
</colgroup>
<tr>
<th>입춘 천냥 국수</th>
<td>11:00 ~ 16::00</td>
<td>목관아 주차장</td>
</tr>
<tr>
<th>제주 향토 음식</th>
<td>10:30 ~ 17::00</td>
<td>관덕정 마당</td>
</tr>
<tr>
<th>차 나눔</th>
<td>10:30 ~ 17::00</td>
<td>관덕정 마당</td>
</tr>
</table>
...![[스크린샷 2022-07-30 오후 4.49.38.png]]
![[스크린샷 2022-07-30 오후 4.25.02.png]]
이미지 삽입에 대해 알아보자
기본형 <img src="이미지 파일 경로" alt="대체용 텍스트"><img> 태그에서 알아야 할 속성은 src와 alt입니다.
- src 속성 : 이미지 파일의 경올르 지정하여 웹 브라우저에 알려주는 역할
- alt 속성 : 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트를 입력
...
<img src="images/tangerines.jpg" alt="레드향">
<h1>레드향</h1>
...![[스크린샷 2022-07-30 오후 4.54.52.png]]
| 웹에서 사용하는 대표적인 이미지 파일 형식 웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 한다. 주로 JPG, PNG 파일 형식을 사용한다
아이콘이나 로고처럼 작은 이미지일 경우 GIF를 사용하기도 한다.
| 종류 | 설명 |
|---|---|
| GIF (graphic interchange format) |
표시할 수 있는 색상 수는 최대 256가지입니다. 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지에 주로 사용합니다. |
| JPG/JPEG (joint photographic group) |
GIF보다 색상과 명암을 다양하게 표현할 수 있습니다. 이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있습니다. |
| PNG (portable network graphics) |
네트워크용으로 개발된 파일 형식입니다. 색상을 다양하게 표현하면서 토명한 배경도 만들 수 있어 웹에서 가장 많이 사용합니다. |
Web에서 어떤 이미지 파일로 받으면 좋을까 이미지 타입을 알기 전에 먼저 알아야 할 요소들이 있다. 첫 번째, Lossless와 Loosy입니다. 일명 무손실 압축, 손실 압축이라고 하는데요
- Lossless는 이미지 압축해도 이미지의 Quaility는 손상되지 않는 것을 말하고
- Loosy는 이미지를 압축하여 크기를 줄이지만 이미지의 Quaility는 손상되는 것을 말합니다. 만약 이미지를 손실 압축 포맷으로 변환하여 계속해서 저장하게 되면 이미지의 퀄리티는 점점 나빠지게 됩니다.
두 번째, Indexed color와 Direct color입니다.
- Indexed color는 제작자에 의해 Color Map이라는 곳에 제한된 수의 색상 (즉, 256가지의 색상)을 가진 palette로만 저장할 수 있는 속성입니다.
- Direct Color는 제작자가 직접 선택하지 않은 수천가지의 컬러를 저장할 수 있는 속성 GIF — Lossless / Indexed only JPEG — Lossy / Direct PNG-8 — Lossless / Indexed PNG-24 — Lossless / Direct SVG — Lossless / Vector
그림 파일에 대한 경로를 나타낸다
인터넷이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때 이미지 대신 출력되는 텍스트
<img> 태그로 이미지 파일을 삽입할 경우 원래 이미지 크기대로 표시됩니다.
웹 브라우저 창에서 보이는 이미지 크기만 조절하고 싶다면 width와 height 속성을 사용할 수 있다.
- width : 이미지의 너비
- height : 이미지의 높이
- 둘 다 지정하기도 둘 중 하나만 지정하기도 하는데 1개만 지정할 경우 비율은 자동으로 계산하여 나타내진다.
- width와 height 속성에서 사용할 수 있는 단위는 퍼센트(%)와 픽셀(px)이 있습니다. ![[스크린샷 2022-07-30 오후 6.17.46.png]]
...
<p>원래 크기 이미지</p>
<img src="images/salad.jpg" alt="레드향">
<p>width="50%, height="50%"</p>
<img src="images/salad.jpg" alt="레드향" width="50%">
<p>width="150"으로 지정한 이미지</p>
<img src="images/salad.jpg" alt="레드향" width="150">
...![[스크린샷 2022-07-30 오후 6.21.56.png]]
![[스크린샷 2022-07-30 오후 6.24.08.png]]
웹 사이트에서 많이 사용하는 멀티미디어 형태는 오디오와 비디오입니다.
HTML에서는 <audio> 태그와 <video> 태그가 새롭게 추가되어 멀티미디어 파일을 더 편리하게 삽입할 수 있습니다.
<object> 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용합니다. 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있습니다.
기본형 <object width="너비" height="높이" data="파일"></object>- data : 보여 줄 멀티미디어 파일을 지정
- width, height : 플레이어의 크기를 지정
...
<h1>웹 문서에 PDF 파일 삽입하기</h1>
<object width="900" height="800" data="miniRT.pdf"></object>
...![[스크린샷 2022-07-30 오후 6.39.54.png]]
<embed> 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있습니다.
<embed> 태그에서는 src 속성을 사용해 삽입할 멀티미디어 파일을 지정합니다. 필요한 경우 width, height 속성으로 플레이어의 너비와 높이를 지정할 수 있습니다. <embed> 태그에는 닫는 태그가 없습니다.
기본형 <embed src="파일 경로" width="너비" height="높이"><embed> 태그는 오디오, 비디오, 이미지 등 다양한 멀티미디어 파일을 삽입할 수 있습니다. 그렇기에 HTML의 <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저를 고려한다면 <embed> 태그를 사용해서 멀티미디어 파일을 삽입합니다.
![[스크린샷 2022-07-30 오후 6.46.52.png]]
오디오, 비디오 파일도 두세 가지 형식 중에서 골라서 사용합니다. 비디오 파일의 webm 형식은 무료이고 화질도 좋지만 webm 형식을 지원하지 않는 경우에는 mp4 형식을 사용합니다. 오디오 파일은 mp3 형식을 주로 사용합니다. ![[taeheoki/images/04/스크린샷 2022-07-30 오후 6.53.59.png]]
HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입한 후에 재생하려면 플러그인 프로그램이 따로 필요했으나 HTML5에서는 웹 브라우저 안에서 멀티미디어 파일을 삽잏ㅂ하고 바로 재생할 수 있습니다. 따라서 웹 브라우저에서 바로 멀티미디어 파일을 재생하기 때문에 브라우저마다 플레이어가 다릅니다.
기본형 <audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>...
<img src="images/tangerines.jpg" alt="레드향">
<audio src="medias/spring.mp3" controls></audio>
...![[스크린샷 2022-07-30 오후 6.59.03.png]]
<video> 태그도 비디오를 재생하거나 멈출 수 있도록 controls 속성을 함께 사용해서 삽입합니다.
비디오 파일의 경우 너빗값을 지정하지 않으면 웹 브라우저에 가득 차게되므로 너빗값을 적절히 지정해주는 것이 좋다.
...
<video src="medias/salad.mp4" controls width="700"></video>
...![[스크린샷 2022-07-30 오후 7.03.39.png]]
플러그인 프로그램이란 무엇일까요? 오디오나 비디오 같은 멀티미디어 파일을 바로 재생할 수 없던 과거의 웹 브라우저에서는 플러그인 프로그램을 사용했습니다.
| 종류 | 설명 |
|---|---|
| controls | 플레이어 화면에 컨트롤 바를 표시합니다. |
| autoplay | 오디오나 비디오를 자동으로 실행합니다. |
| loop | 오디오나 비디오를 반복 재생합니다 |
| muted | 오디오나 비디오의 소리를 제거합니다 |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정합니다. 사용할 수 있는 값은 auto, metadata, none입니다. 기본값은 preload="auto"입니다. |
| width, height | 비디오 플레이어의 너비와 높이를 지정합니다. width나 height의 값 중 하나만 지정할 경우 나머지는 자동으로 계산해서 표시합니다. |
| poster="파일 이름" | <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정합니다. |
- 오디오 파일을 배경 음악처럼 사용하려면
<audio>태그에서 autoplay 속성과 loop 속성을 지정하면 된다. 이 때 플레이어가 보이지 않도록 하려면 controls 속성을 빼면 됩니다.
-비디오 파일을 웹 문서의 배경으로 사용하는 방법은 CSS에서 알아보자-
하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 편리하게 사용할 수 있는 중요한 기능이다. 하이퍼링크를 사용해 다른 문서나 사이트와 연결하는 방법을 알아보자.
링크는 <a> 태그로 만드는데, 텍스트를 사용하면 텍스트 링크가 되고 이미지를 사용하면 이미지 링크가 됩니다.
기본형 <a href="링크할 주소">텍스트 또는 이미지</a>...
<p><a href="../05/order.html">주문서 작성하기</a></p>
...![[스크린샷 2022-07-30 오후 7.17.01.png]]
텍스트에 링크를 추가하면 그림과 같이 텍스트에 밑줄이 생기면서 글자색이 검은색에서 파란색으로 바뀝니다. 이는 링크가 추가된 텍스트와 그렇지 않은 텍스트를 구별하기 위한 것, 또한 한 번이라도 클릭을 하면 자주색으로 바뀌며 이는 CSS를 통해 링크의 색을 변경할 수 있습니다.
...
<a href="../05/order.html"><img src="images/tangerines.jpg" alt="레드향"></a>
...![[스크린샷 2022-07-30 오후 7.20.04.png]]
이미지 링크의 경우 마우스 포인터를 가져갔을 때 손 모양으로 바뀌는 특징이 있다.
이전까지의 예제의 경우 텍스트나 이미지 링크를 클릭하면 현재 페이지에서 새로운 문서로 넘어갑니다.
이러한 방식이 아닌 새로운 탭에서 링크를 열어주기 위해 target 속성에 _blank를 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열립니다.
...
<p><a href="../05/order.html" target="_blank">주문서 작성하기</a></p>
...![[스크린샷 2022-07-30 오후 7.25.06.png]]
1단계 텍스트 링크 추가하기
...
<p><a href="https://www.naver.com" target="_blank">네이버</a></p>
...![[스크린샷 2022-07-30 오후 7.27.33.png]]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
</head>
<body>
<div id="container">
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다. 학부와 전공은 상관 없습니다.<br>방송에 관심 있는 여러 학우의 지원 바랍니다.</p>
<ul>
<li><b>모집 기간 : </b>3월 2일 ~ 3월 11일</li>
<li><b>모집 분야 : </b>아나운서, PD, 엔지니어</li>
<li><b>지원 방법 : </b>양식 작성 후 이메일 접수<br><i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></li>
</ul>
<h3>혜택</h3>
<ol type="a">
<li>수습기자 활동 중 소저으이 활동비 지금</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<p><img src="images/mic.jpg"></p>
</div>
</body>
</html>![[스크린샷 2022-07-30 오후 7.46.58.png]]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 1</title>
</head>
<body>
<div id="container">
<h1>수습 국원 모집</h1>
<table>
<colgroup>
<col style="width:150px">
<col style="width:150px">
<col style="width:250px">
</colgroup>
<tr>
<th rowspan="3">개인 정보</th>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>학과/학번</th>
<td></td>
</tr>
<tr>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>지원분야</th>
<td colspan="2"></td>
</tr>
</table>
</div>
</body>
</html>![[스크린샷 2022-07-30 오후 7.53.52.png]]