HTML 스타일 가이드
접근성 모범 사례는 여기에서 확인하세요.
의미론적 요소
의미론적 요소는 HTML 태그로, 담고 있는 데이터에 시각적인 요소가 아닌 의미적인 의미를 제공합니다. 예를 들면:
의미적 태그를 사용하는 것이 좋지만, 의도가 태그 자체의 의미와 정확히 부합하는 경우에만 사용하세요. 각 태그가 의미적으로 무엇을 의미하는지 설명은 MDN 문서를 참조하세요.
<!-- bad - div 대신 의미적 태그를 사용할 수 있습니다. -->
<div class="...">
<p>
<!-- bad - 이것은 "strong"이 의미하는 바가 아닙니다. -->
Simply visit your <strong>Settings</strong> to say hello to the world.
</p>
<div class="...">...</div>
</div>
<!-- good - 정확하게 사용된 의미적 클래스를 선호합니다. -->
<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
속성이 필요합니다.
// bad
<button></button>
// good
<button type="button"></button>
링크
새 창 열림
임의로 링크를 새 탭에서 열지 않는 것이 권장되므로, 링크에 target="_blank"
를 추가할 때는 Pajamas 링크 가이드라인을 참조하세요.
a
태그와 함께 target="_blank"
를 사용할 때는 rel="noopener noreferrer"
속성도 추가해야 합니다. 이를 통해 JitBit에서 문서화한 보안 취약점을 방지할 수 있습니다.
gl-link
를 사용할 때는 자동으로 링크에 rel="noopener noreferrer"
을 추가하기 때문에 target="_blank"
를 사용하는 것만으로 충분합니다.
// bad
<a href="url" target="_blank"></a>
// good
<a href="url" target="_blank" rel="noopener noreferrer"></a>
// good
<gl-link href="url" target="_blank"></gl-link>
가짜 링크
가짜 링크를 사용하지 마세요. 링크가 JavaScript 클릭 이벤트 핸들러만을 호출하는 경우에는 더 의미론적인 버튼 태그를 사용하세요.
// bad
<a class="js-do-something" href="#"></a>
// good
<button class="js-do-something" type="button"></button>