HTML 스타일 가이드

또한, 접근성 모범 사례도 확인해보세요.

의미론적 요소

의미론적 요소는 데이터에 시각적인 요소가 아닌 의미론적인 의미를 부여하는 HTML 태그입니다. 예를 들면:

의미 있는 태그를 사용하는 것이 좋지만, 태그 자체의 의미와 정확히 부합한다면에만 사용하세요. 각 태그가 의미하는 것에 대한 설명은 MDN 문서에서 확인할 수 있습니다. 

<!-- 나쁨 - 의미론적 태그 대신 div를 사용할 수 있습니다. -->
<div class="...">
  <p>
    <!-- 나쁨 - 이것이 "strong"이 의도된 바가 아닙니다. -->
    Simply visit your <strong>Settings</strong> to say hello to the world.
  </p>
  <div class="...">...</div>
</div>

<!-- 좋음 - 의미 있는 클래스를 정확하게 사용하는 것을 선호합니다 -->
<section class="...">
  <p>
    Simply visit your <span class="gl-font-weight-bold">Settings</span> to say hello to the world.
  </p>
  <footer class="...">...</footer>
</section>

버튼

버튼 유형

버튼 태그는 W3C HTML 명세에 따라 type 속성이 필요합니다. 

// 나쁨
<button></button>

// 좋음
<button type="button"></button>

링크

빈 타겟

임의로 링크를 새 탭에서 열지 않는 것이 권장되며, target="_blank"를 추가할 때 Pajamas 링크 가이드를 참조하세요.

a 태그와 함께 target="_blank"를 사용할 때는 rel="noopener noreferrer" 속성을 추가해야 합니다. 이것은 JitBit에서 문서화한 보안 취약점을 방지합니다.

gl-link를 사용할 때는 target="_blank"만 사용해도 충분하며, 이는 링크에 자동으로 rel="noopener noreferrer"을 추가합니다. 

// 나쁨
<a href="url" target="_blank"></a>

// 좋음
<a href="url" target="_blank" rel="noopener noreferrer"></a>

// 좋음
<gl-link href="url" target="_blank"></gl-link>

가짜 링크

가짜 링크를 사용하지 마세요. 링크가 JavaScript 클릭 이벤트 핸들러만을 호출하는 경우 버튼 태그를 사용하는 것이 의미론적으로 더 좋습니다. 

// 나쁨
<a class="js-do-something" href="#"></a>

// 좋음
<button class="js-do-something" type="button"></button>