[html] mark 태그

 

 

[html] mark 태그

 

mark 태그는 사용자에게 관계된 텍스트를 강조하고자 할 때 사용합니다.

 

▶브라우저 지원

 

ie9+, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+

 

▶mark 요소 사용 예

 

1. 검색 결과에서 찾은 키워드를 두드러지게 표시하여 사용자가 원하는 것을 쉽게

 

   찾을 수 있도록 함.

 

2. 인용할 때 특정 텍스트를 강조하게 위해

 

 

strong, em,  mark 태그 차이

 

텍스트를 강조하는 의미에서 세 가지가 쓰일 수 있는데, 각기 용도가 다릅니다

 

em.  강세를 둔 강조. emphasized text 약자로  이탤릭체로 표시함.

강조의 위치는 문장의 의미를 바꿈

 

<p><em>Cats</em> are cute animals.</p>   '고양이'에 강조

<p>Cats are <em>cute</em> animals.</p>   '귀여움'에 강조

 

strong. 강조된 중요성. 제목, 문단 등에 사용하여 다른 것과 구분짓는 용도이며 굵은 글씨체로 표시함.

 

문장의 의미를 바꾸지 않음.

 

 

mark 참조 목적으로 강조된 문서의 텍스트. 인용문 일부에 주의를 끌기 위해

<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote> 

 

em 태그는 css에서 font-style: italic; 과 같은 효과

 

strong 태그는 css에서는 font-weight: bold;과 같은 효과임.

 

▶html 작성 예

 

 

<strong>MARK 요소</strong>
<blockquote>
<mark>mark</mark> 요소는 인용문의 특정 부분에 주의를 끌기 위해 사용될 수 있다.
</blockquote>

 

<strong>EM 요소</strong>
<p><em>Cats</em> are cute animals.</p>   
<p>Cats are <em>cute</em> animals.</p>

 

 

 

▶css

blockquote{border-left:10px solid #D5D5D5; padding:5px;}
mark{background-color:yellow;}
em{color:red;}
strong{color:#6B9900;font-size:20px;}

 

 

▶실행화면

 

 

 

mark.html파일 다운받아 실행해 보세요~

 

 

  참조 : http://www.w3.org/html/wg/drafts/html/master/#the-mark-element

 

[html 기초] b, strong, em, i, cite, small 태그

 

[html] pre, code 태그 차이