이번엔 HTML 글자 태그에 대해 알아보겠습니다.
참고로 Sublime Text3를 기준으로 설명합니다.
<body>에 태그를 하나씩 넣으면서 설명하겠습니다.
#1 굵은 글자
첫번째, bold의 약자로 'b'태그를 사용하시면 됩니다.
b를 입력하고 Tab키를 누르면 '<b>' 태그가 자동으로 불러와집니다.
두번째, 'strong'태그를 사용합니다.
마찬가지로 strong을 입력 후 Tab키를 누르면 '<strong>'태그가 불러와집니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong>
</body>
</html>
첫 번째 포스팅에서 설명드린 <br>태그도 함께 사용했습니다.
실제 웹페이지
#2 글자 기울임 / 강조체
첫번째, 기울인 글자는 italic의 약자인 i를 활용해 <i>태그를 사용합니다.
두번째, 강조체도 이태릭체와 거의 똑같습니다.
강조체는 <em>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em>
</body>
</html>
실제 웹페이지
#3 작은 글자
글자를 작게 하고 싶다면 <small>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em><br>
<small>작은 글자-small태그</small>
</body>
</html>
실제 웹페이지
#4 글자 형광 표시
글자에 형광색으로 표시하고 싶다면 <mark>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em><br>
<small>작은 글자-small태그</small><br>
<mark>형광펜-mark태그</mark>
</body>
</html>
실제 웹페이지
글자에 노란색 형광 표시가 되는 것을 알 수 있습니다.
#5 글자 취소선
쇼핑몰에서 많이 볼 수 있는 글자 효과입니다.
글자에 취소선을 넣고 싶다면 <del>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em><br>
<small>작은 글자-small태그</small><br>
<mark>형광펜-mark태그</mark><br>
<del>취소선-del태그</del>
</body>
</html>
실제 웹페이지
<del>태그 안 글자는 취소선이 들어간 것을 알 수 있습니다.
#6 글자 밑줄
글자에 밑줄을 긋고 싶다면 <ins>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em><br>
<small>작은 글자-small태그</small><br>
<mark>형광펜-mark태그</mark><br>
<del>취소선-del태그</del><br>
<ins>글자 밑줄-ins태그</ins>
</body>
</html>
실제 웹페이지
#7 아래 첨자 / 윗 첨자
첫번째, 아래 첨자를 사용하고 싶다면 <sub>태그를 활용합니다.
반대로 윗 첨자는 <sup>태그를 사용합니다.
표시방법
<!Doctype html>
<html lang="ko">
<head>
<titile></title>
<meta carset=""uft-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<b>굵은 글자-b태그</b><br>
<strong>굵은 글자-strong태그</strong><br>
<i>이태릭체-i태그</i><br>
<em>강조체-em태그<em><br>
<small>작은 글자-small태그</small><br>
<mark>형광펜-mark태그</mark><br>
<del>취소선-del태그</del><br>
<ins>글자 밑줄-ins태그</ins><br>
<sub>아래 첨자-sub태그</sub><br>
<sup>윗 첨자-sup태그</sup>
</body>
</html>
실제 웹페이지
'IT > HTML' 카테고리의 다른 글
| HTML5 - 테이블 태그 (0) | 2020.11.26 |
|---|---|
| HTML5 - 리스트(목록) 태그 (0) | 2020.11.26 |
| HTML&CSS-위치 변경하기 (0) | 2020.11.25 |
| HTML-<a>태그 (0) | 2020.11.25 |
| HTML 태그 (0) | 2020.09.29 |
댓글