Chap 04-2. 웹 문서에 다양한 내용 입력하기
웹 문서에 다양한 내용 입력하기
1. 이미지 삽입하기
<img> 태그
웹 문서에 이미지를 삽입할 때 사용- 기본형
<img src=”이미지 파일 경로” alt=”대체용 텍스트”>img 태그의 src 속성
- 웹 문서 파일의 위치를 기준으로 이미지 경로 지정
HTML과 이미지 파일이 같은 폴더에 있다면 src 속성에 파일 이름만 적음
예)<img src="tangerines.jpg">하위 폴더에 이미지 파일이 있다면 하위 폴더까지 같이 적음
예)<img src=”images/tangerines.jpg”>
img 태그의 alt 속성
이미지를 설명하는 대체 텍스트- 화면 낭독기에서 이미지 대신 대체 텍스트를 읽어 줌. (웹 접근성)
- 이미지를 표시할 수 없는 상황일 때 대체 텍스트 표시
- 텍스트 자체를 이미지로 만들었을 경우 대체 텍스트 안에 이미지 파일의 내용을 그대로 넣어주어야 함.
- 불릿 이미지나 작은 아이콘 등의 경우에는 alt=“ “ 처럼 지정
코드 예시 )
...
<body>
<!-- '레드향' 제목 위에 images/tangerines.jpg 삽입하기 -->
<!-- img br hr 은 단독 태그 -->
<img src="./images/tangerines.jpg" alt="오렌지">
<h1>레드향</h1>
</body>
</html>✔ 결과
img 태그의 width, height 속성
- 이미지 크기 조정하기
width나 height 중 1개만 지정해도 나머지 속성은 자동으로 비율을 계산
| 단위 | 설명 | 예시 |
|---|---|---|
| % | 이미지 크기 값을 퍼센트(%)로 지정하면 현재 웹 브라우저 창의 너비와 높이를 기준으로 이미지 크기를 결정 | width="50%" |
| px | 이미지 크기 값을 픽셀(px)로 지정하면 이미지의 너비나 높이를 해당 픽셀 크기만큼 표시함 | width="150px" |
코드 예시 )
...
<body>
<p>원래 크기의 이미지</p>
<img src="./images/salad.jpg" alt="샐러드">
<p>width="50%", height="50%"로 지정한 이미지</p>
<img src="./images/salad.jpg" alt="샐러드" width="50%" height="50%">
<p>width="150"으로 지정한 이미지</p>
<img src="./images/salad.jpg" alt="샐러드" width="150px" height="200">
</body>
</html>✔ 결과
<figure>, <figcaption> 태그
<figure>태그는사진, 도표, 삽화, 오디오 등을 담는 컨테이너 역할을 하는 태그이다.<figcaption>태그는 이에 대해 설명하는 문구를 담는 태그이다.- 기본형
<figure>
<figcaption>…</figcaption>
</figure>코드 예시 )
...
<body>
<!-- 여러 이미지에 하나의 설명글 붙이기 -->
<figure>
<img src="images/spring.png" alt="제주의 봄">
<img src="images/summer.png" alt="제주의 여름">
<img src="images/fall.png" alt="제주의 가을">
<img src="images/winter.png" alt="제주의 겨울">
<figcaption>제주의 사계절</figcaption>
</figure>
</body>
</html>✔ 결과
<참고> 웹 문서와 이미지
- 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 주로 몇 가지 파일 형식만 사용함.
| 파일 형식 | 설명 |
|---|---|
| GIF (graphic interchange format) | 표시할 수 있는 색상 수가 최대 256가지뿐이지만, 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 버튼 등 작은 이미지에 주로 사용함 |
| JPG/JPEG (joint photographic experts group) | 색상과 명암을 GIF보다 다양하게 표현할 수 있음. 하지만, 이미지를 수정하고 저장하는 작업을 반복할 경우 화질이 떨어질 수도 있음 |
| PNG (portable network graphics) | 네트워크용으로 개발된 파일 형식. 색상을 다양하게 표현하며 투명한 배경도 만들 수 있으므로 웹에서 가장 많이 사용함 |
2. 오디오와 비디오 삽입하기
<object> 태그
- 음악 파일 뿐만 아니라 동영상이나 자바 애플릿, PDF 파일 등 다양한 개체를 삽입한다.
- 기본형
- data : 재생할 파일 지정
- width, height : 플레이어 화면 크기 지정
<object width=”너비” height=”높이” data=”파일”>…</object>PDF 파일 집어넣기
코드 예시 )
...
<meta charset="UTF-8">
<title>멀티미디어 파일 삽입하기</title>
</head>
<body>
<h1>웹 문서에 PDF 파일 삽입하기</h1>
<!-- object 태그를 사용해 product.pdf 파일 삽입하기 -->
<object data="product.pdf" width="800" height="480"></object>
</body>
</html>✔ 결과
<embed> 태그
- 대부분 브라우저에서 사용 가능
<object>, <audio>, <video> 태그를 지원하는 브라우저에서 멀티미디어 삽입할 때 사용
- 기본형
닫는 태그 없음!- src : 멀티미디어 파일 지정
- width, height : 플레이어 크기 지정
<embed src=”파일 경로” width=”너비” height=”높이”>mp3 파일 집어넣기
코드 예시 )
...
<meta charset="UTF-8">
<title>멀티미디어 파일 삽입하기</title>
</head>
<body>
<h1>멀티미디어 파일 삽입하기</h1>
<!-- embed 태그를 사용해 medias/spring.mp3 삽입하기 -->
<embed src="./medias/spring.mp3">
</body>
</html>✔ 결과 (캡처 사진이기 때문에 여기서 재생은 ❌)
<audio>, <video> 태그
- 기본형
<!-- audio 태그 -->
<audio src=”오디오 파일 경로”></audio>
<!-- video 태그 -->
<video src=”비디오 파일 경로”></video><audio>, <video> 태그의 속성
| 속성 | 설명 |
|---|---|
| controls | 플레이어 화면에 컨트롤 바를 표시함. |
| autoplay | 오디오나 비디오를 자동으로 실행함. |
| loop | 오디오나 비디오를 반복 재생함. |
| muted | 오디오나 비디오의 소리를 제거함. |
| preload | 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정함. 사용 가능한 값: auto, metadata, none (기본값: auto) |
| width, height | 비디오 플레이어의 너비와 높이를 지정함. width나 height 값 중 하나만 지정하면 나머지는 자동으로 계산하여 표시됨. |
| poster="파일 이름"` | <video> 태그에서 사용하는 속성으로, 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정함. |
예시 )
- 자동 플레이와 계속 적인 반복 추가
<audio src=”./medias/spring.mp3” controls autoplay loop></audio>
audio 파일 집어넣기
코드 예시 )
✅ <audio src="medias/spring.mp3" controls loop></audio> 와 같이 controls loop를 쓰면 음악 파일을 계속 반복함
...
<title>멀티미디어 파일 삽입하기</title>
</head>
<body>
<h1>웹 문서에 오디오 파일 삽입하기</h1>
<audio src="./medias/spring.mp3" controls="controls"></audio>
<!-- 음악 파일 계속 반복하기 -->
<!-- <audio src="medias/spring.mp3" controls loop></audio> -->
</body>
</html>✔ 결과 (캡처 사진이기 때문에 여기서 재생은 ❌)
video 파일 집어넣기
코드 예시 )
✅ poster="images/salad.jpg" 를 사용하여 동영상 썸네일 설정을 함.
...
<meta charset="UTF-8">
<title>멀티미디어 파일 삽입하기</title>
</head>
<body>
<h1>웹 문서에 비디오 파일 삽입하기</h1>
<!-- images/salad.jpg 파일을 포스터 이미지로 사용하세요. -->
<video src="medias/salad.mp4" controls width="700" poster="images/salad.jpg"></video>
<!-- 비디오에서 소리를 제거한 후 반복해서 자동 재생하기 -->
<video src="medias/salad.mp4" controls loop autoplay muted width="700" poster="images/salad.jpg"></video>
</body>
</html>✔ 결과 (캡처 사진이기 때문에 여기서 재생은 ❌)
<참고> 웹 브라우저에 지원하는 멀티미디어 파일의 종류
- 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질은 좋게 유지해야 하기 때문에 주로 몇 가지 파일 형식만 사용함.
| 종류 | 확장자 | 설명 |
|---|---|---|
| 비디오 | mp4 | 많이 사용하는 비디오 형식으로, 라이선스가 있지만 웹에서는 무료로 사용할 수 있음 |
| webm | 화질이 우수하면서도 무료라서 mp4와 함께 많이 사용함 | |
| 오디오 | mp3 | 대부분의 음원에서 사용하는 형식입니다. 2017년 이후 라이선스가 종료되면서 무료로 사용할 수 있음 |
| mp4/m4a | mp3의 문제점을 개선한 AAC 코덱을 사용한 파일 형식임. 확장자는 mp4뿐만 아니라 m4a를 사용하기도 함 |
3. 하이퍼링크 삽입하기
<a> 태그
다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능- 기본형
<a href=”링크할 주소”>텍스트 또는 이미지</a><a> 태그의 target 속성
target=”blank”로 지정하면 연결된 문서가 새 탭으로 열림
텍스트 링크
코드 예시 )
...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>텍스트 링크</p>
<a href="https://www.naver.com/" target="_blank">네이버</a>
</body>
</html>✔ 결과
- target=”_blank”로 주었기 때문에, 다른 창에서 사이트가 열린다
이미지 링크
코드 예시 )
...
<style>
img {
width: 150px;
}
</style>
<body>
<p>비디오 링크</p>
<a href="https://www.naver.com/" target="_blank">
<img src="images/naver.logo.png" alt="네이버 사이트">
</a>
</body>
</html>✔ 결과
- target=”_blank”로 주었기 때문에, 다른 창에서 사이트가 열린다
Hi