💡 퀵 접속: htm.kr/strong

HTML <strong> 태그

태그 설명

<strong> 태그는 텍스트의 중요성을 강조할 때 사용합니다. 브라우저는 보통 이 태그를 굵은 글씨로 표시하며, 스크린 리더는 이 태그로 감싸진 텍스트를 더 강조된 톤으로 읽어줍니다.

주요 속성

속성 설명
title 텍스트 추가 정보를 제공하는 툴팁을 표시합니다.

기본 예제

<p>
    <strong>주의:</strong> 이 작업은 되돌릴 수 없습니다.
</p>

<p>
    이 제품은 <strong>반드시</strong> 사용 전에 
    설명서를 읽어주세요.
</p>

블로그 실전 예제

<!-- 1. 중요 공지사항 -->
<article class="notice">
    <h2>시스템 점검 안내</h2>
    <p>
        <strong>중요:</strong> 2024년 3월 15일 02:00 ~ 04:00 동안 
        시스템 점검이 진행됩니다.
    </p>
</article>

<!-- 2. 제품 설명 -->
<article class="product-info">
    <h2>신제품 출시</h2>
    <p>
        새로운 모델은 <strong>기존 제품 대비 2배 빠른</strong> 
        성능을 제공합니다.
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.strong-custom {
    color: #e91e63;
    font-weight: 700;
    background-color: #fce4ec;
    padding: 2px 4px;
    border-radius: 3px;
}

.notice strong {
    color: #f44336;
    font-size: 1.1em;
}

.product-info strong {
    color: #2196f3;
    border-bottom: 2px solid #2196f3;
}
</style>

<p>
    <strong class="strong-custom">특별 할인</strong> 
    이벤트가 진행 중입니다.
</p>

실제 보여지는 모양

공지사항 예시

중요: 2024년 3월 15일 02:00 ~ 04:00 동안 시스템 점검이 진행됩니다.

제품 설명 예시

새로운 모델은 기존 제품 대비 2배 빠른 성능을 제공합니다.

특별 할인 이벤트가 진행 중입니다.

참고사항

  • 텍스트의 중요성을 강조할 때 사용합니다.
  • 브라우저는 기본적으로 굵은 글씨로 표시합니다.
  • CSS를 사용하여 강조 스타일을 커스터마이즈할 수 있습니다.
  • 스크린 리더는 이 태그를 통해 중요한 내용을 인식합니다.
  • <b> 태그와 달리 의미적 중요성을 나타냅니다.

블로그 작성 팁

  • 중요한 공지사항이나 경고를 표시할 때 활용합니다.
  • 제품의 주요 특징이나 장점을 강조할 때 유용합니다.
  • 강조하고 싶은 내용을 시각적으로 구분하기 위해 CSS를 활용합니다.
  • 과도한 사용은 오히려 가독성을 해칠 수 있으므로 적절히 사용합니다.
  • 일관된 스타일을 유지하여 사용자가 중요 내용을 쉽게 인식할 수 있게 합니다.

브라우저 지원

모든 주요 브라우저에서 지원됩니다.

  • Chrome: 지원
  • Firefox: 지원
  • Safari: 지원
  • Edge: 지원
  • Opera: 지원