프론트 엔드 가이드 라인
HTML
시멘틱(Semantics)
HTML5는 콘텐츠를 정확하게 설명하기 위한 많은 의미론적 요소를 제공.
<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2018</span></p> </div> <p>…</p> </div> </div> <!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2018-03-10">21st Feb, 2018</time></p> </header> <p>…</p> </article> </main>
사용중인 요소의 의미를 이해했는지 확인해보자..
시맨틱 요소를 중립적으로 사용하는 것보다 잘못된 방법으로 사용하는 것이 더 안좋은 예이다.
<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1>
간결하게..Brevity
코드를 간결하게하십시오. 오래된 XHTML 습관을 잊어 버려라.
<!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>
접근성(Accessibility)
접근성은 사전에 미리 확인하자.. 웹 사이트를 개선하기 위해 WCAG 전문가 일 필요는 없습니다. 아래 코드를 확인해보자..
alt속성을 올바르게 사용하는 방법 배우기- 귀하의 링크와 버튼이 그렇게 표시되어 있는지 확인하십시오 (
<div class=button>잔학 행위 없음 ) - 색에 독점적으로 의존하지 않고 정보를 전달한다.
- 폼 컨트롤에 명시 적으로 레이블 지정
<! - bad -> < h1 > < img alt = " Logo " src = " logo.png " > </ h1 >
<! - good -> < h1 > < img alt = " My Company, Inc . " src = " logo.png " > </ h1 >
언어(Language)
언어 및 문자 인코딩을 정의하는 것은 선택 사항이지만 HTTP 헤더에 지정된 경우에도 문서 수준에서 항상 선언하는 것이 좋습니다. 다른 문자 인코딩보다 UTF-8을 선호
<!-- bad --> <!doctype html> <title>Hello, world.</title> <!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Hello, world.</title> </html>
퍼포먼스(Performance)
콘텐츠 앞에 스크립트를 로드해야하는 타당한 이유가 없는 한 페이지 렌더링 X .
스타일 시트가 무거울 경우 처음에 꼭 필요한 스타일을 분리하고 별도의 스타일 시트에 2차 선언의 로딩을 연기!!. 속도에 대한 인식이 가장 중요한 요소입니다.
<!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>
'Front-End(기타자료)' 카테고리의 다른 글
| 2018 년 최고의 자바 스크립트 라이브러리 및 기술 배우기 (0) | 2018.05.21 |
|---|---|
| React/JSX Style Guide (0) | 2018.03.11 |
| Sass Style Guide (0) | 2018.03.11 |
| Airbnb CSS Style Guide (0) | 2018.03.11 |
| 프론트엔드 가이드 라인 (Frontend-guidelines) - CSS 편 (0) | 2018.03.10 |