html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 시멘틱 인라인 태그에 대해서 알아보도록 하겠습니다.
인라인 태그는 시멘틱 태그로 커다란 뼈대를 만들고,
시멘틱 블록 태그로 그 뼈대 안에 들어갈 요소들을 넣어놨다면,
이 시멘틱 인라인 태그로 더 디테일한 부분들에 대한 작업을 합니다.
그래서 이번 시간에는 이 시멘틱 인라인 태그를 사용하는 방법에 대하여 알아보도록 하겠습니다.
그럼 지금부터 시작하겠습니다.
1. 시멘틱 인라인 태그 : mark , time, meter, progress 태그
시멘틱 인라인 태그는 html에서 텍스트의 일부를 마크업을 시키는 태그들입니다.
이 태그들로도 웹 문서 내에서 디테일한 표현이 가능하며,
시각적인 표현들을 본격적으로 쓰기 시작하는 태그입니다..
보통 시멘틱 인라인 태그들은 이 정도를 많이 씁니다.
- <mark> : 중요한 텍스트를 표시해주는 태그
- <time> : 시간 정보에 대한 표시를 해주는 태그
- <meter> : 주어진 범위나 &의 데이터 양을 표시해 주는 태그
- <progress> : 작업의 진행 정도를 표시해주는 태그
그 외에도 시멘틱 인라인 태그들이 몇 개 있는데,
현재는 html 문서의 시멘틱 구조를 저해한다는 이유로 제거가 되어서 사용하지 않습니다.
그래서 이 정도만 알아두시면 시멘틱 인라인 태그를 사용할 때 문제가 없다는 점을 알아두셨으면 좋겠습니다.
그럼 이걸 어떤 식으로 사용을 하는지 간단한 예제를 통해서 알아보도록 하겠습니다.
<!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>인라인 시멘틱 태그</title>
</head>
<body>
<h3>인라인 시맨틱 태그 사례</h3>
<hr>
<p>내일<mark>HTML5 시험</mark><br>
시간은 <time>09:00</time><br>
난이도 <meter value="0.8" max="1.0">80%</meter><br>
자료 업로딩(20%)
<progress value="2" max="10"></progress><br>
</p>
</body>
</html>이렇게 코드를 적게 되면 각각 <mark> 태그 내에 있는 글자는 하이라이팅이 되고,
<time> 태그 내에 있는 내용은 시간을 알려주며,
<meter> 태그 내에 있는 내용은 수치를 하나의 그래프로써 나타내어주고,
<progress> 태그는 특정한 작업 진행 수치에 대한 그래프로 보여줍니다.
그럼 결과 화면을 통하여 어떤 식으로 표현이 되었는지 한 번 같이 보실까요?
이렇게 각각의 태그가 가진 특성대로 표현이 되어있음을 보실 수 있습니다.
확실히 이때부터는 시각적인 효과가 뛰어나서 좀 더 재미가 있습니다.
여기까지 html 시멘틱 블록 태그와 시멘틱 인라인 태그에 대하여 알아보았습니다.
다음 포스팅에서는 웹 폼에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 (0) | 2023.03.03 |
|---|---|
| html form 태그로 웹 폼 기본 구성 해보기 (0) | 2023.03.03 |
| html 시멘틱 블록 태그 figure, details, summary 태그에 대하여 알아보기 (0) | 2023.03.02 |
| html header, nav, section, article, aside, footer 태그로 시멘틱 웹 구성해보기 (0) | 2023.03.02 |
| html video 태그와 audio 태그, source 태그로 미디어 삽입하기 (0) | 2023.03.02 |
댓글