도라에몽주머니

[HTML5/CSS3] HTML/CSS 11일차 본문

Study/Web

[HTML5/CSS3] HTML/CSS 11일차

에몽쓰 2022. 8. 23. 19:51

HTML / CSS

✔ Preview

이미지, 오디오, 비디오 태그 및 웹폰트 사용 방법 정리

✍ Summary

Image

: <image> 태그는 문서에 이미지를 삽입하는 태그이다. src 속성을 통해 이미지의 경로를 지정한 후 width, height 등의 속성을 통해 크기를 조정할 수 있다.

 

Audio

: <audio> 태그는 문서에서 오디오(음성)을 재생할 수 있도록 하는 태그이다. src 속성을 통해 오디오의 경로를 지정한 후, controls 속성으로 제어기를 생성할 수 있다. 

 

Video

: <video> 태그는 문서에서 비디오(동영상)를 재생할 수 있도록 하는 태그이다. <audio> 태그와 비슷하게 src 속성을 통해 비디오의 경로를 지정한 후, controls 속성으로 제어기를 생성할 수 있다. 하지만 width와 height 속성을 통해 비디오의 사이즈를 꼭 지정해주어야 한다. poster 속성을 사용하면 비디오의 썸네일을 설정할 수 있다.

<article>
	<h2>이미지 태그</h2>
	<figure>
		<figcaption>HTML5 이미지 태그 사용</figcaption>
		<img src="images/img2.png" width="350">			
	</figure>
</article>

<article>
	<h2>오디오 태그</h2>
	<audio src="images/aa.mp3" controls="controls"></audio>
</article>

<article>
	<h2>비디오 태그</h2>
	<video poster="images/poster.jpg" src="images/bb.mp4" controls width="430" height="250"></video>
</article>

 

 

웹폰트 사용하기

: Google Fonts에서 원하는 폰트를 정한 후 css를 통해 적용할 수 있다.

https://fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

 

1. <link> 태그 방식

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>제목</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head>
* {
font-family: 'Noto Sans KR', sans-serif;
}

 

2. @import 방식

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
</style>
</head>
* {
font-family: 'Noto Sans KR', sans-serif;
}

 

3. @font-face 방식 (local에 파일을 저장해 사용하는 방식)

@font-face {
	font-family: 'Hahmlet'; /* font-family 이름은 원하는 대로 설정할 수 있음 */
	src: url('../images/abc.ttf') /* local 서버의 폰트 위치 작성 */
}
* {
font-family: 'Noto Sans KR', sans-serif;
}
저작자표시 (새창열림)

'Study > Web' 카테고리의 다른 글

[CSS3] HTML/CSS 13일차  (0) 2022.08.25
[HTML5/CSS3] HTML/CSS 12일차  (0) 2022.08.24
[CSS3] HTML/CSS 10일차  (0) 2022.08.22
[CSS3] HTML/CSS 9일차  (0) 2022.08.19
[CSS3] HTML/CSS 8일차  (0) 2022.08.18
'Study/Web' Related Articles more