HTML5 Mark 태그 사용법

1. Mark 태그란?

Mark 태그는 텍스트의 일부를 강조하거나 하이라이트하는 데 사용됩니다. 주로 검색 결과나 중요한 내용을 강조할 때 활용됩니다.

2. 기본 구조

<p>이것은 <mark>강조된</mark> 텍스트입니다.</p>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 강조 예제 -->
<div class="basic-example">
    <h3>기본 강조 예제</h3>
    <p>
        이것은 <mark>강조된</mark> 텍스트입니다.<br>
        이것은 <mark>하이라이트된</mark> 텍스트입니다.
    </p>
</div>

<!-- 검색 결과 예제 -->
<div class="search-example">
    <h3>검색 결과 예제</h3>
    <p>
        검색어 "HTML"에 대한 결과:<br>
        <mark>HTML</mark>은 웹 페이지를 만드는 마크업 언어입니다.<br>
        <mark>HTML</mark>5는 최신 버전입니다.
    </p>
</div>

<!-- 중요 내용 예제 -->
<div class="important-example">
    <h3>중요 내용 예제</h3>
    <p>
        주의사항: <mark>이 기능은 실험적입니다</mark>.<br>
        참고: <mark>이 내용은 변경될 수 있습니다</mark>.
    </p>
</div>

<style>
    /* 기본 강조 예제 스타일 */
    .basic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 검색 결과 예제 스타일 */
    .search-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 중요 내용 예제 스타일 */
    .important-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .basic-example,
        .search-example,
        .important-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 mark 스타일 */
    mark {
        background-color: #ffeb3b;
        color: #000;
        padding: 2px 4px;
        border-radius: 2px;
    }

    /* 강조 스타일 */
    mark.emphasis {
        background-color: #4CAF50;
        color: #fff;
    }

    /* 인용 스타일 */
    mark.quote {
        background-color: #2196F3;
        color: #fff;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        mark {
            padding: 1px 3px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 mark 태그를 사용합니다.
• 불필요한 중첩을 피합니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

mark 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 모바일 기기에서 테스트
• 접근성 검사 도구 사용
• 강조 표시 렌더링 테스트