2. 구문 강조, 하이라이팅
strong, em, mark
대부분의 코드 목록.
https://www.w3.org/TR/2011/WD-html5-20110405/
원어 : https://www.w3.org/TR/html5/
번역된 사이트 (안뜸)
http://html5.clearboth.org/text-level-semantics.html#the-em-element
http://html5.clearboth.org/text-level-semantics.html#the-strong-element
http://html5.clearboth.org/text-level-semantics.html#the-mark-element
---------------------------------------------------
강조요소는 strong, em 이 있고, html5에서 mark가 추가되었다.
strong은 중요하다는 의미의 표현이고(객관적인 특성이 있음), strong importance,
em은 강조의 표현(주관적인 특성이 있음), emphasis
mark는 주의 환기에 쓰인다. html5에서 추가
---------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>em, strong, mark | inline elements</title>
<style>
body{
font: 12px tahoma,sans-serif;
}
em, strong{
background-color: lime;
}
em em, strong strong{
background-color: orange;
}
</style>
</head>
<body>
<h1>em element</h1>
<p>Cats are cute animals.</p>
<!-- 아래 예제들은 어디를 강조했느냐에 따라 문장의 의미가 어떻게 바뀌는지 보여줍니다. 먼저 일반적인 사실에 대한 강조 없는 이야기입니다. -->
<p><em>Cats</em> are cute animals.</p>
<!-- 첫 단어를 강조했더니 어떤 종류의 동물에 대해 이야기하고 있다는 뉘앙스가 생겼습니다(개가 귀엽다고 주장하는 사람이 있을 수도 있습니다) -->
<p>Cats <em>are</em> cute animals.</p>
<!-- 강조를 동사로 이동시키면 문장 전체가 논제가 됩니다. (다른 사람은 고양이는 귀엽지 않다고 할 수 있습니다) -->
<p>Cats are <em>cute</em> animals.</p>
<!-- 형용사로 옮기면 고양이의 본성에 대해 거듭 주장하는 문장이 됩니다. (다른 사람은 고양이는 상스러운 동물이라 할지도 모릅니다) -->
<p>Cats are cute <em>animals</em>.</p>
<!-- 비슷하게, 누군가가 고양이는 식물이라고 주장했다면 그것을 수정하는 사람은 마지막 단어를 강조했을 것입니다. -->
<p><em>Cats are cute animals!</em></p>
<!-- 문장 전체를 강조함으로써 말하는 이가 포인트를 전달하기 위해 애쓰고 있음이 분명해집니다. 이러한 종류의 강조는 아래 예제의 느낌표처럼, 구두점에도 영향을 미칩니다. -->
<p><em>Cats are <em>cute</em> animals!</em></p>
<!-- 귀여움을 강조하는 것에 노여움이 섞인다면 이러한 마크업을 하게 될 것입니다. -->
<hr>
<h1>strong element</h1>
<p>
<strong>경고.</strong> 이 던전은 위험합니다.<br>
<strong>오리를 피하십시오.</strong> 금을 발견하면 가져도 됩니다.<br>
<strong><strong>다이아몬드에는 절대 손대지 마십시오</strong>:
그것들은 폭발성이 있으며, <strong>10미터 반경 내의 모든 것을
파괴할 것입니다.</strong></strong>분명히 경고했습니다.
</p>
<!-- strong 요소는 그 내용이 중요함을 나타냅니다. -->
<hr>
<h1>mark elemets (html5)</h1>
<p lang="en-US"> 다음 인용구를 생각해 보십시오.</p>
<blockquote lang="en-GB">
<p>주위를 둘러 보십시오. 누구도 <mark>색colour</mark>맹이 아님을 알게 될 겁니다.</p>
</blockquote>
<p lang="en-US">단어의 <em>철자</em>를 보건대, 이 인용구를 쓴 사람은 분명 미국인은 아닙니다.</p>
<!-- mark 요소는 문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타냅니다. 참조된 인용구, 혹은 기타 텍스트 블럭에 mark 요소를 썼다면 저자가 처음 글을 썼을 때는 중요하다고 생각하지 않았었지만 지금은 주의 깊게 살펴봐야 하는 텍스트로 독자의 주의를 끄는 것입니다. mark 요소를 문서의 주된 부분에서 썼다면 문서의 일부분이 독자의 현재 행동과 연관되어 하이라이트되었음을 나타냅니다. -->
</body>
</html>
'Front > Html' 카테고리의 다른 글
| [HTML] 3-6. 목록 작성하기 (0) | 2020.11.05 |
|---|---|
| [HTML ]3-5. 제목, 문단, 연락처, 인용문 목록 작성하기 (0) | 2020.11.05 |
| [HTML] 3-4. 루비 주석과 시간의 표현 (0) | 2020.11.05 |
| [HTML] 3-3. 단의어 정의와 약어, 작품의 제목 표현. (0) | 2020.11.05 |
| [HTML] 3-1. 문자 실체잠조와 수치 문자 참조 적용 (0) | 2020.11.05 |
| [HTML] 2-4. html템플릿 작성하기 (0) | 2020.11.05 |
| [HTML] 2-3. 메타요소 알아보기 (0) | 2020.11.05 |
| [HTML] 2-2.문서형 선언, 언어 지정, 문자 코드 셋 지정하기 (0) | 2020.06.15 |
