HTML 스타일 가이드

GitLab 프론트엔드 개발에서 시맨틱 요소, 버튼, 링크 등 HTML 작성 규칙과 모범 사례를 설명합니다.

접근성 모범 사례 도 함께 참조하세요. 시맨틱 요소 # 시맨틱 요소 는 포함된 데이터에 표현적 의미가 아닌 의미론적(semantic) 의미를 부여하는 HTML 태그입니다. 예를 들면: <article> <nav> <strong> 시맨틱 태그를 사용하되, 태그 자체의 시맨틱 의미와 의도가 정확히 일치하는 경우에만 사용하세요. 각 태그의 시맨틱 의미에 대한 설명은 MDN 문서 를 참조하세요. <!-- bad - could use semantic tags instead of div's. --> <div class="..."> <p> <!-- bad - this isn't what "strong" is meant for. --> Simply visit your <strong>Settings</strong> to say hello to the world. </p> <div class="...">...</div> </div> <!-- good - prefer semantic classes used accurately --> <section class="..."> <p> Simply visit your Settings to say hello to the world. </p> <footer class="...">...</footer> </section> 버튼 # 버튼 타입 # 버튼 태그에는 W3C HTML 명세 에 따라 type 속성이 필요합니다. // bad <button></button> // good <button type="button"></button> 링크 # Blank target # 링크를 임의로 새 탭에서 여는 것은 권장하지 않으므로, 링크에 target="_blank" 를 추가하는 것을 고려할 때는 링크에 관한 Pajamas 가이드라인 을 참고하세요. a 태그에 target="_blank" 를 사용할 때는 rel="noopener noreferrer" 속성도 함께 추가해야 합니다. 이는 JitBit의 문서 에 기록된 보안 취약점을 방지합니다. gl-link 를 사용하는 경우, target="_blank" 만 사용해도 충분합니다. rel="noopener noreferrer" 가 자동으로 추가되기 때문입니다. // 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