#범위 :
- 일반적인 블록태그 <div> / 인라인 태그 <span>
- 시맨틱 웹 블록 태그 종류 : <figure>와 <figcaption> , <details>와 <summary>
- 시맨틱 웹 인라인 태그 종류 : <mark> , <time> , <meter> , <progress>
- <meter>와 <progress> 공통점과 차이점
#노트 정리 :
#코드와 출력장면 :
[예시1] : <figure>과 <figcaption>
코드 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure 태그 활용</title>
</head>
<body>
<h3>figure 태그 활용</h3>
<hr>
<figure>
<figcaption>alert() 함수 활용</figcaption>
<pre>
<code> function f(){ alert("경고합니다.");}
</code>
<hr>
</pre>
<small>살행결과</small>
<pre>
<img src="윤석열.jpg" alt="실행결과" width="200" height="250">
</pre>
</figure>
</body>
</html>
|
cs |
출력장면 :
[예시2] : <details>과 <summary>
코드 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>details태그와 summary태그</title>
</head>
<body>
<h3>details와 summary</h3>
<p>
Q & A 리스트
</p>
<hr>
<details>
<summary>
Question 1
</summary>
<p>
웹 개발자가 알아야 하는 언어 3가지
</p>
</details>
<details>
<summary>
Answer 1
</summary>
<p>
Html5, CSS , JavaScript
</p>
</details>
</body>
</html>
|
cs |
출력장면 :
[예시3] : 시맨틱 인라인 태그 <mark> , <time>, <meter> , <progress>
코드 :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>인라인 시맨틱 태그</title>
</head>
<body>
<h3>인라인 시맨틱 태그 사례</h3>
<hr>
<p>
내일 <mark>HTML5 시험</mark><br>
시간은 <time>09:00</time><br>
난이도 <meter value="0.2" max="1"></meter><br>
자료 업로드 (20%) <br>
<progress value="20" max="100"></progress>
</p>
</body>
</html>
|
cs |
출력장면 :
'웹프로그래밍 > 웹프로그래밍수업' 카테고리의 다른 글
| (13)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_4 (2) | 2024.09.22 |
|---|---|
| (12)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_3 (0) | 2024.09.21 |
| (10)명품 웹프로그래밍 3장_Html5문서 구조화와 웹폼_1 (0) | 2024.09.21 |
| (9)명품 웹프로그래밍 2장_Open Challenge문제 (5) | 2024.09.14 |
| (8)명품 웹프로그래밍 2장 실습문제 (3) | 2024.09.14 |
