Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 웹스크래핑
- google style guide
- @keyframes
- 코딩규칙
- vuejs입문
- vueJS
- 로딩UI
- javascript
- python
- 코딩가이드
- CSS애니메이션
- css rule
- 뉴스수집
- 스타일가이드
- 구글스타일가이드
- 구글CSS
- 투두리스트
- css규칙
- MariaDB
- 파이썬
- 프레임워크
- vue-cli
- 코딩컨밴션
- to do list
- Vue.js
- html제거
- CSS로딩
- 자기개발
- 개발회고
- 자바스크립트
Archives
- Today
- Total
코드공부방
HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙 본문
반응형
HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙
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 유효성
- W3C HTML Validator 같은 툴을 활용하여 유효성을 검증한다.
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)이 사용된다면, ”, ☺ 같은 엔티티 참조를 사용할 필요가 없다.
- 단, <, &, 보이지않는 문자( )는 예외한다.
<!-- 비추천 -->
<p>The currency symbol for the Euro is “&eur;”.</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
2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #intro
2019/08/30 - [CSS] - CSS 구글 스타일가이드 자세히보기 #1 CSS스타일 규칙
2019/09/02 - [CSS] - CSS 구글 스타일가이드 자세히보기 #2 CSS 작성 규칙
반응형
'웹퍼블리셔 > HTML' 카테고리의 다른 글
카톡(카카오톡)에서 URL 링크 공유 시 미리보기 썸네일 이미지와 내용 수정하기 (feat.og meta data) (5) | 2020.02.13 |
---|---|
HTML 구글 스타일가이드 자세히보기 #intro (0) | 2019.09.02 |
Comments