안녕하세요.
이번 포스팅에서는 글자의 모양을 변경하는 태그를 알아보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
내용입니다
</p>
</body>
</html>지난 번에는 간단한 문장을 작성하는 법을 배웠습니다.
그런데 여기서 특정 단어를 굵게, 혹은 기울여서 표시를 하고 싶을 수도 있습니다.
그 경우 사용할 수 있는 태그는 <b></b> 태그와 <i></i> 태그가 있습니다.
<b></b> 태그는 굵은 글씨체를 뜻하는 Bold의 B를 따온 것이고, <i></i> 태그는 이탈릭체, 즉 기울기체를 뜻하는 Italic에서 I를 따온 것입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
나는 <b>굵고</b>, <i>기울어져</i> 있습니다
</p>
</body>
</html>
굵은 글씨와 기울어진 글씨를 동시에 적용할 수도 있습니다.
그럴 경우 <b></b> 태그로 <i></i> 태그를 감싸거나, <i></i> 태그로 <b></b> 태그를 감싸면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
나는 <b><i>굵고 기울어져</i></b> 있습니다.
</p>
<p>
나는 <i><b>굵고 기울어져</b></i> 있습니다.
</p>
</body>
</html>
그렇다면 제목에 있는 <strong></strong> 태그와 <em></em> 태그는 무엇인지 의문이 생길 것입니다.
<strong></strong> 태그는 <b></b> 태그와 동일한 역할을, <em></em> 태그는 <i></i> 태그와 동일한 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>제목</title>
<meta charset="utf-8"/>
</head>
<body>
<p>
나는 <strong><em>굵고 기울어져</em></strong> 있습니다.
</p>
<p>
나는 <em><strong>굵고 기울어져</strong></em> 있습니다.
</p>
</body>
</html>
똑같은 역할을 하는 태그가 이렇게 나눠져 있는 이유는 용도가 다르기 때문입니다.
글 내에서 굵은 글자나 기울어진 글자를 표시한다는 것은, 일반적으로 해당 글자를 강조하고 싶기 때문일 것입니다.
<b></b> 태그와 <i></i> 태그는 간단하게 굵거나 기울어진 글자를 만들어 줄 수 있지만 단지 글자의 모양만 그렇게 바꿔줄 뿐, 브라우저는 해당 글자가 강조되었다는 사실을 알 수 없습니다.
반면 <strong></strong> 태그와 <em></em> 태그는 글자의 모양을 바꿔주는 건 물론, 브라우저가 해당 내용이 강조되었다는 사실을 알 수 있게 해줍니다.
이러한 태그를 일컬어 의미를 가진 태그, 시멘틱 태그Semantic Tag라고 부릅니다.
'Frontend 기본' 카테고리의 다른 글
| HTML 주석과 개발자 도구 (0) | 2022.08.05 |
|---|---|
| HTML 태그 - <ol>, <ul>, <dl> (0) | 2022.08.04 |
| HTML 시멘틱 태그 (0) | 2022.08.03 |
| HTML 태그 - <h1>~<h6>, <p>, <br/> (0) | 2022.08.01 |
| HTML이란? (0) | 2022.08.01 |