HTML 인라인 요소: <strong>, <em>, <mark>를 통한 텍스트 강조 방법

안녕하세요 찐망고입니다.

오늘은 강조를 뜻하는 인라인요소인 <strong> 요소와 <em> 요소, <mark> 요소에 대해 포스팅해볼 건데요.

 

html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.

브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.

 

<strong> 요소와 <em>, <mark> 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.

각각 다른 방식으로 강조를 나타내요

 

 

<strong> 요소

<strong> 요소는 주로 중요한 텍스트의 의미를 나타내는데,

해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.

예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠

그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.

논리적으로 중요한 텍스트를 강조하죠

<p><strong>주의: </strong> 이 상품은 한정된 수량으로만 제공됩니다.</p>

 

 

 

<em> 요소

<em> 요소는 텍스트를 강세로 나타냅니다. 

이 요소는 텍스트가 강조된다는 의미를 전달하며, 문맥상 중요한 부분을 나타냅니다.

예를 들어,  감정적으로나 문맥상 중요성을 강조하는 데 사용하죠

<p><em>정말로</em> 놀라운 순간이었습니다.</p>

 

<em> 요소는 어떤 단어를 포함하느냐에 따라 의미가 달라질 수 있는데요

<p>이<em>귀여운</em>고양이를 보라구</p>
<!-- 귀여운에 강조: 귀여운 고양이!!!!! -->
<p>이 귀여운 <em>고양이</em>를 보라구</p>
<!-- 고양이에 초점을 맞춤: 고양이 보라고!!!!! -->

첫 번째 문단은 귀엽다는 의미에 강조를 두었고 "귀여운" 단어에만 적용됩니다.

문장은 일반적으로 "귀여운 고양이를 보라고"라고 읽히고, 이것은 이 고양이가 귀엽다는 것을 강조합니다.

 

두 번째 문단은 "고양이"라는 단어를 강조하였고, 이것은 귀여운 고양이를 보라는 걸 강조하는 거죠 ㅎㅎ

 

 

<mark> 요소

<mark>요소는 중요한 부분을 표시하는데 사용되며, 텍스트가 문서에서 주목할 가치가 있음을 나타내는데요

흔히 하이라이트나 검색 결과에서 강조된 텍스트를 표시할 때 사용됩니다.

<mark>이 부분은 중요한 정보입니다.</mark>

 

 

비교 요약

• strong: 논리적 중요성을 강조. 텍스트가 다른 내용보다 중요하다는 의미를 전달.
• em: 문맥상 중요성이나 강세를 강조. 감정적으로나 문맥적으로 강조된다는 의미.
• mark: 주목할 가치가 있는 부분을 표시. 특히 검색 결과나 특정 정보의 하이라이트에 사용.

이처럼 세 요소는 각각 다른 용도로 사용되며, 시맨틱한 의미가 다릅니다.