코드공부방

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙 본문

웹퍼블리셔/HTML

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙

:- ) 2019. 9. 5. 10:44
반응형

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙

 

Google HTML Style Guide

1. HTML 스타일 규칙

1.1 Document Type

  • HTML5를 사용한다.
  • XHTML이 아닌 HTML을 사용한다.
  • 홀태그는 닫지 않는다.
<!-- Document type -->
<!DOCTYPE html>

<!-- 비추천 : 홀태그 닫기 -->
<br />
<input type="text" />
<hr />

<!-- 추천 : 홀태그 닫지 않기 -->
<br>
<input type="text">
<hr>

1.2 HTML 유효성

1.3 Semantics

  • 목적(의미)에 맞는 HTML 요소를 사용한다.
  • 생성된 용도에 대하여 태그가 아닌 요소를 사용한다. (예를 들어 표는 표 요소, 단락에는 P요소, 앵커 요소 등..)
  • HTML을 목적에 따라 사용하는 것은 접근성과 재사용 및 코드 효율성에도 중요하다.
<!-- 비추천 : div태그에 스크립트를 통한 페이지 이동을 사용하였다. -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 추천 : 페이지 이동에는 앵커 요소를 사용한다. -->
<a href="recommendations/">All recommendations</a>

1.4 멀티미디어 대체

  • 멀티미디어를 위한 대체 콘텐츠를 제공한다.
  • 가능한 경우 이미지, 비디오, 캔버스를 통한 멀티미디어의 경우 대체텍스트, 오디오 녹취록 및 캡션을 제공한다.
  • 이는 접근성을 위해 매우 중요하다. 시각장애 사용자는 alt값이 없다면 이미지가 무엇을 의미하는지 알 수 없고, 청각장애 사용자는 오디오 컨텐츠를 이해할 수 없다.
  • 단순히 장식을 위한 이미지에는 alt 속성을 사용하지 않는다.
<!-- 비추천 -->
<img src="spreadsheet.png">

<!-- 추천 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

1.5 분리 사용

  • 표현과 행동을 분리한다.
  • 구조(HTML), 스타일(CSS), 동작(Javascript)을 엄격하게 유지하며 상호작용을 최소화한다.
  • 즉, HTML파일에는 HTML 구조(템플릿)만, style은 CSS파일에서, Javascript는 Js파일에서 관리한다.
  • 이는 유지보수 비용절감에 도움이 된다.
<!-- 비추천 -->
<p style="font-size:15px;">html sample code</p>
<a href="#" onclick="movePage();">go home</a>

<!-- 추천 : 분리 -->
<link rel="stylesheet" href="style.css">
<p>html sample code</p>
<a href="#">go home</a>
<script src="common.js"></script>

1.6 엔티티(Entity) 참조

  • 엔티티 참조를 사용하지 않는다.
  • 팀, 파일, 에디터에 동일한 인코딩(UTF-8)이 사용된다면, &rdquo;, &#x263a; 같은 엔티티 참조를 사용할 필요가 없다.
  • 단, <, &, 보이지않는 문자(&nbsp;)는 예외한다.
<!-- 비추천 -->
<p>The currency symbol for the Euro is &ldquo;&eur;&rdquo;.</p>

<!-- 추천 -->
<p>The currency symbol for the Euro is “€”.</p>

1.7 선택적 태그

  • 선택 태그를 생략한다.
  • 파일크기 최적화 및 검색 최적화를 위해 선택적 태그를 생략한다. 
  • 이는 일반적인 웹개발자들의 생각과는 많이 다를 수 있기때문에 점차적으로 적용한다.
<!-- 비추천 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- 추천 : 선택적태그 삭제 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
이 가이드에 대해서는 개인적으로 반대하는 편이다. 물론 HTML5 공식문서에서 선택적으로 삭제가 가능하다고 하지만, 가독성이 좋아보이지도 않고 가이드에도 있듯이 아직까지 이에 대해 모르는 웹개발자들이 더 많을 수 있기때문에 혼란만 가중될 것 같다. (실제 프로젝트를 진행하면서 위 예제와 같이 생략된 경우를 보지도 못했다.)

1.8 Type 속성

  • CSS 및 Javascript에 대한 유형 속성을 생략한다.
  • HTML5는 text/css, text/javascript를 기본값으로 포함하므로 지정할 필요가 없다.
<!-- 비추천 : 속성 지정 -->
<link rel="stylesheet" href="style.css" type="text/css">
<script src="common.js" type="text/javascript"></script>

<!-- 추천 : 속성 생략 -->
<link rel="stylesheet" href="style.css">
<script src="common.js"></script>

(계속..)

 

2019/09/02 - [HTML] - HTML 구글 스타일가이드 자세히보기 #intro

 

HTML 구글 스타일가이드 자세히보기 #intro

HTML 구글 스타일가이드 자세히보기 #intro HTML 마크업에도 스타일가이드가 있을까? 당연히 존재한다. HTML 마크업 작업도 여러 작업자가 협업하여 진행하는 경우가 발생하기 때문에 일관된 스타일로 코드를 유지..

code-study.tistory.com

2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #intro

 

CSS 구글 스타일가이드 자세히보기 #intro

CSS 구글 스타일가이드 자세히보기 #intro 보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다..

code-study.tistory.com

2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙

 

CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙

CSS 구글 스타일가이드 자세히보기 #1 1. CSS 스타일 규칙 1.1 CSS 유효성 W3C CSS 유효성 검사기 툴을 활용 하여 유효한 CSS를 사용한다. (https://jigsaw.w3.org/css-validator/) 1.2 CSS 네이밍 의미있거나 일..

code-study.tistory.com

2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙

 

CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙

CSS 구글 스타일가이드 자세히보기 #2 2. CSS 작성 규칙 2.1 선언(속성) 순서 알파벳 순서대로 속성을 선언한다. vendor-prefix 선언은 알파벳 선언순서를 무시한다. 단, 접두어가 붙지 않는 속성을 가장 마지막..

code-study.tistory.com

 

반응형

'웹퍼블리셔 > HTML' 카테고리의 다른 글

카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data)  (5) 2020.02.13
HTML 구글 스타일가이드 자세히보기 #intro  (0) 2019.09.02
'웹퍼블리셔/HTML' Related Articles more
Comments