안녕하세요, 여행벌입니다.
오늘은 텍스트를 한 줄로 표시하는 '인라인 레벨' 태그에 대해서 알아보겠습니다.
<strong>, <b> 태그 - 굵게 표시하기
텍스트 중에서 굵게 표시하려고 할 때 <strong> 혹은 <b> 태그를 사용합니다. 눈으로 보기에는 차이가 느껴지지 않지만 화면 낭독기에서의 기능 때문에 굵게 표시하는 태그가 두 종류 존재합니다. <b> 태그는 눈으로 보기에는 굵은 글씨로 보이지만 화면 낭독기에서는 굵은 글씨로 읽지 못합니다. <strong> 태그는 눈으로 보기에도 굵고 화면 낭독기에서도 굵은(중요한) 글씨로 인식하기 때문에 주의 사항이나 경고를 나타낼 때는 <strong> 태그를 이용해야 합니다.
<em>, <i> 태그 - 이탤릭체로 표시하기
텍스트를 비스듬히 이탤릭체로 표시할 때 <em> 혹은 <i> 태그를 사용합니다. 중요한 내용을 담고 있는 것은 <em> 태그를, 단순히 이탤릭체로 표시하고 싶으면 <i> 태그를 사용하면 됩니다.
<q> 태그 - 인용 내용 표시하기
인용한 내용을 표시하기 위해서는 <q> 태그를 사용할 수 있습니다. 저번 포스팅에서 배운 <blockquote> 태그도 인용한 내용을 표시하기 위해 사용하지만 둘은 '블록 레벨 태그' 와 '인라인 레벨 태그' 로 종류가 다릅니다. <blockquote> 태그는 '블록 레벨 태그'로 쉽게 말하면 태그를 사용하면 줄바꿈이 적용되고 다른 내용과 구별되도록 안으로 들여 써지지만, <q> 태그는 '인라인 레벨 태그'로 태그를 사용해도 줄바꿈이 적용되지 않고 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시합니다.
<mark> 태그 - 형광펜 효과 내기
<mark> 태그는 선택한 부분의 배경색이 노란색이 되며 형광펜으로 그어놓은 듯한 효과를 냅니다.
예시를 통해서 익혀보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기초문법#3 예제</title>
</head>
<body>
<p>p태그에 글을 쓴 후 굵게 표시해보겠습니다.</p>
<p><strong>p태그에 글을 써보았습니다.(strong적용)</strong></p>
<p><b>p태그에 글을 써보았습니다.(b적용)</b></p>
<br>
<p>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.</p>
<p><em>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.(em적용)</em></p>
<p><i>p태그에 글을 쓴 후 이탤릭체로 바꿔봅시다.(i적용)</i></p>
<br>
<p>p태그에 글을 쓴 후 mark태그를 적용해보겠습니다.</p>
<p><mark>p태그에 글을 쓴 후 mark태그를 적용해보겠습니다.(mark)</mark><p>
<br>
<blockquote>blockquote태그입니다.</blockquote>
<q>q태그입니다.</q>
</body>
</html>
<strong> <b> 태그는 눈으로는 똑같은 효과가 적용된 것을 확인할 수 있습니다. 하지만, 화면 낭독기를 통해 읽을 때에 차이가 존재하므로 중요한 경고나 주의사항은 꼭 strong 태그를 이용해야합니다.
<em> <i> 태그도 눈으로 보기에는 똑같은 효과가 적용되지만 더 중요한 내용에 <i> 태그 대신에 <em> 태그를 적용해야 합니다.
<mark> 태그는 형광펜으로 칠한 효과가 적용되는 것을 확인할 수 있습니다.
<blockquote> <q> 태그는 둘다 인용 내용을 표시하기 위해 사용하지만 태그의 종류와 효과가 다른 것을 확인할 수 있습니다.
<blockquote> <q> 태그가 구체적으로 어떻게 다른지 조금 더 다뤄보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>기초문법#4 예제</title>
</head>
<body>
<p>blockquote태그적용
<blockquote>블라블라블라블라블라블라블라블라블라블라블라블라</blockquote>
blockquote태그완료</p>
<br>
<p>q태그적용
<q>블라블라블라블라블라블라블라블라블라블라블라블라</q>
q태그적용완료</p>
</body>
</html>
<blockquote> 태그는 '블록 레벨 태그'라 줄바꿈이 일어난 것을 확인할 수 있고, <q> 태그는 '인라인 레벨 태그'라 줄바꿈이 일어나지 않는 것을 확인할 수 있습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] 리스트를 만들어 주는 <ul> <ol> <li> <dl> <dt> <dd> 태그 (0) | 2020.01.17 |
|---|---|
| [HTML+CSS] 텍스트 관련 <span> <abbr> <cite> <small> <sub> <sup> <s> <u> 태그 (0) | 2020.01.17 |
| [HTML+CSS] 텍스트 블록 레벨 <h> <p> <br> <hr> <blockquote> <pre> 태그 (0) | 2020.01.17 |
| [HTML+CSS] HTML 기본 구조 (1) | 2020.01.17 |
| [HTML+CSS] HTML이란. (1) | 2020.01.17 |