html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기
네 여러분, 이번 포스팅에서는 시멘틱 웹을 만들 때 쓰는 추가적인 태그들에 대하여 알아보는 시간을 가져보려 합니다.
우선 그 기본이 되는 태그들 중에는 '시멘틱 블록 태그'와 '시멘틱 인라인 태그'라는 것이 있는데,
이 둘의 존재 만으로도 가독성이 매우 뛰어나지며 페이지가 간결하면서도 예뻐 보이게 됩니다.
그럼 이 두 카테고리의 태그가 어떤 기능을 하는 지 같이 알아보실까요?
1. 시멘틱 블록 태그
시멘틱 블록 태그는 본문을 한나의 덩어리로 묶어서 블록화를 시키는 것이라고 생각하면 됩니다.
마치 <div> 태그처럼 해당 태그 내에 있는 문서를 하나의 덩어리로 묶어서 표현을 하는 겁니다.
시멘틱 블록 태그는 보통 3개의 태그를 사용을 합니다.
- figure : 본문에 삽입이 되어있는 이미지, 동영상, 소스 코드 등의 다양한 콘텐츠를 블록화 시키는 태그
- details : 웹 페이지 내에 있는 상세한 정보를 담아내는 태그이며, 이 태그를 이용하면 핸들(▶)이 나타남.
- summary : details 태그로 구성되는 블록의 제목을 표현하는 태그
보통 이런 식으로 많이 써서 웹 페이지를 좀 더 보기 좋고 깔끔하게 묶어서 정리를 합니다.
그리고 이 태그들을 보시면 알 수 있듯이, 모든 태그들이 어떤 내용들을 묶는 기능을 제공한다는 것을 보여주고 있으며,
이 중에서 <details>와 <summary> 태그는 세트임을 볼 수 있습니다.
그럼 일단 <figure> 태그를 이용하야 문서를 블록화 시킨 사례에 대한 예제 코드를 먼저 보도록 합시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>figure 태그 활용</title>
</head>
<body>
<h3>figure 태그 활용</h3>
<hr>
<figure id="1-1">
<figcaption>alert()함수 활용</figcaption>
<pre> <code>function f() { alert("경고합니다"); }</code>
</pre>
<hr>
<small>실행결과</small>
<pre> <img src="3장media/alert.png" alt="실행결과">
</pre>
</figure>
</body>
</html>이런 식으로 figure 태그로 감싼 내용들은 모조리 블록화가 되어 figure 태그 내에 묶이게 됩니다.
그럼 실행 결과를 같이 한 번 보실까요?
보시게 되면 이런 식으로 마치 하나의 블록이 있는 것처럼
일정 범위를 벗어나지 않는 선에서 미디어들이 묶여있는 걸 보실 수 있습니다.
이렇게 figure 태그를 통하여 문서 내에 있는 여러 가지 콘텐츠들을 블록화 시킬 수 있습니다.
그리고 이어서 details 태그와 summary 태그를 사용하여 문서 내에 있는 내용들을 묶는 방법에 대하여 알아보도록 하겠습니다.
간단한 예제 코드를 통해서 같이 보실까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>details 와 summary 활용</title>
</head>
<body>
<h3>details와 summary 태그 </h3>
Q & A 리스트
<hr>
<details>
<summary>Question 1</summary>
<p>웹 개발자가 알아야 하는 언어 3가지?</p>
</details>
<details>
<summary>Answer 1</summary>
<p>HTML5, CSS, Javascript</p>
</details>
</body>
</html>이런 식으로 details라는 태그 안에 summary라는 태그를 붙여 내용을 입력해 주면
웹 페이지를 열었을 때 details 태그 내에 있는 summary 태그 안에 담긴 내용(제목)이 먼저 보이고,
그 후에 화살표를 누르면 그 상세 내용이 보입니다.
그럼 결과 화면을 함께 보실까요?
 |
 |
이런 식으로 화살표를 누르지 않았을 때는 그냥 summary 태그에 있는 글귀만 보이지만,
화살표 클릭 시에 아래에 details 태그 내에 있던 상세한 내용들이 보이는 것을 보실 수 있습니다.
여기까지 시멘틱 블록 태그를 사용하는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 시멘틱 인라인 태그에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html form 태그로 웹 폼 기본 구성 해보기 (0) | 2023.03.03 |
|---|---|
| html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 (0) | 2023.03.03 |
| html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 (0) | 2023.03.02 |
| html video 태그와 audio 태그, source 태그로 미디어 삽입하기 (0) | 2023.03.02 |
| html target 속성에 대하여 알아보기 (0) | 2023.03.02 |
댓글