Preface
이번 장에선 이미지, 오디오, 비디오, 하이퍼링크를 삽입하는 방법을 공부한 후 마지막엔 두 가지의 연습문제를 풀어봤다.
역시 어려운 부분은 없었고, 연습 문제도 손쉽게 해결할 수 있었다.
HTML은 크게 고민할 부분이 없어서 딱히 적을만한 내용이 없다...
4. 이미지 삽입하기
- <img> 태그: 웹 문서에 이미지를 삽입할 때 사용
1) src 속성: 이미지 파일의 경로를 지정
2) alt 속성: 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력 (대체 텍스트)
- 파일 경로 삽입 방법
1) 웹 문서 파일과 이미지 파일이 같은 경로: 이미지 파일의 이름만 적으면 된다.
<img src="abc.jpg">2) 웹 문서 폴더의 하위 폴더에 이미지 파일: 하위 폴더와 함께 이미지 파일 이름을 적는다.
<img src="images/abc.jpg">
- 웹에서 사용하는 이미지 파일의 형식
1) GIF: 파일 크기가 작아 아이콘이나 불릿 등 작은 이미지에 사용
2) JPG/JPEG: GIF보다 색상과 명암을 다양하게 표현 가능 (수정이 반복될 경우 화질 저하)
3) PNG: 네트워크용으로 개발된 파일 형식 (가장 많이 사용됨)
- alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다.
1) alt 속성에 들어 갈 텍스트는 이미지를 정확히 설명하는 텍스트여야 한다.
2) 내용 전달이 아니라 화면을 꾸밀 때 사용한 이미지는 텍스트가 따로 필요 없다. (alt="" 만 입력해도 됨)
- width와 height 둘 중 한 개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.
1) %: 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정 (width="50%")
2) px: 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시 (width="150")
5. 오디오와 비디오 삽입하기
- <object> 태그: 다양한 멀티미디어 파일을 삽입할 때 사용
<object width="너비" height="높이" data="파일"></object>
- <embed> 태그: 대부분 브라우저에서 사용할 수 있으며, src 속성을 사용해 삽입할 멀티미디어 파일을 지정
1) <audio>, <video>, <object> 태그를 지원하지 않는 웹 브라우저에서 사용 가능
2) 닫는 태그가 없다.
<embed src="파일 경로" width="너비" height="높이">
- <audio> 태그: 배경 음악이나 효과음 등 오디오 파일을 삽입할 때 사용
- <video> 태그: 비디오 파일을 삽입할 때 사용
- audio와 video 태그의 속성
1) controls: 플레이어 화면에 컨트롤 바를 표시한다.
2) autoplay: 오디오나 비디오를 자동으로 실행한다.
→ 대부분의 웹 브라우저에서는 오디오나 소리가 있는 비디오 파일의 자동 재생을 금지한다.
3) loop: 오디오나 비디오를 반복 재생한다.
4) muted: 오디오나 비디오의 소리를 제거한다.
5) preload: 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정한다.
→ 사용할 수 있는 값: auto, metadata, none / 기본값: preload="auto"
6) width, height: 비디오 플레이어의 너비와 높이를 지정한다,
7) poster="파일 이름": <video> 태그에서 사용하는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.
※ 오디오나 비디오를 자동 재생하려면 autoplay와 muted를 함께 사용해야 한다.
6. 하이퍼링크 삽입하기
- <a> 태그: 링크를 삽입할 때 href 속성과 함께 사용
→ 텍스트를 사용하면 텍스트 링크, 이미지를 사용하면 이미지 링크가 된다.
<a href="링크할 주소">텍스트 또는 이미지</a>
- target 속성: 링크를 새 탭에서 열어준다.
→ target 속성에 _blank를 지정해야 한다.
<a href="링크할 주소" target="_blank">텍스트 또는 이미지</a>
7. 4장 마무리 문제
- 웹 문서를 작성하는 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>4장 마무리 문제 1</title>
</head>
<body>
<h1>수습 국원 모집</h1>
<h2>방송에 관심 있는 새내기 여러분 환영합니다</h2>
<p>교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다.
학부와 전공은 상관 없습니다. <br>
방송에 관심 있는 여러 학우의 지원 바랍니다.
</p>
<ul>
<li> <b>모집 기간 : </b>3월 2일 ~ 3월 11일</li>
<li> <b>모집 분야 : </b>아나운서, PD, 엔지니어</li>
<li> <b>지원 방법 : </b>양식 작성 후 이메일 접수</li>
</ul>
<blockquote><i>지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.</i></blockquote>
<h3>혜택</h3>
<ol type="a">
<li>수습기자 활동 중 소정의 활동비 지금</li>
<li>정기자로 진급하면 장학금 지급</li>
</ol>
<img src="images/mic.jpg" alt="마이크">
</body>
</html>
수습 국원 모집
방송에 관심 있는 새내기 여러분 환영합니다
교내 방송국에서 신입생을 대상으로 수습 국원을 모집합니다.
학부와 전공은 상관 없습니다.
방송에 관심 있는 여러 학우의 지원 바랍니다.
- 모집 기간 : 3월 2일 ~ 3월 11일
- 모집 분야 : 아나운서, PD, 엔지니어
- 지원 방법 : 양식 작성 후 이메일 접수
지원서 양식은 교내 방송국 홈페이지 공지 게시판에 있습니다.
혜택
- 수습기자 활동 중 소정의 활동비 지금
- 정기자로 진급하면 장학금 지급
- 조건에 맞는 표 형식을 작성하는 코드 (CSS는 예제 코드에 포함되어 있음)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연습문제 2</title>
<style>
table, td, th {
border:1px solid #ccc;
}
td, th {
padding:10px 20px;
}
td:last-child{
width:200px;
}
</style>
</head>
<body>
<h1>수습 국원 지원 양식</h1>
<table>
<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>
</body>
</html>
수습 국원 지원 양식
| 개인정보 | 이름 | |
|---|---|---|
| 학과/학번 | ||
| 연락처 | ||
| 지원 분야 | ||
'Web Front > HTML + CSS + 자바스크립트' 카테고리의 다른 글
| [HTML] 입력 양식 작성하기 (2) (0) | 2022.07.18 |
|---|---|
| [HTML] 입력 양식 작성하기 (1) (0) | 2022.07.17 |
| [HTML] 웹 문서에 다양한 내용 입력하기 (1) (0) | 2022.07.15 |
| [HTML] HTML 기본 문서 만들기 (0) | 2022.07.14 |
| 웹 개발 시작하기 (0) | 2022.07.14 |
댓글