티스토리 뷰

디자인/htm,l css, js

Google HTML / CSS 스타일 가이드

알렌브라운 2017. 3. 24. 05:07

   

 

 

 

 

 

 

 

 

 

1 Background 1 배경

 

이 문서는 HTML 및 CSS에 대한 서식 및 스타일 규칙을 정의합니다.협업, 코드 품질 향상 및 지원 인프라 구현을 목표로합니다.파일을 포함하여 HTML 및 CSS를 사용하는 원시 파일에 적용됩니다. 도구는 일반적인 코드 품질이 유지되는 한 자유롭게 모호하고, 축소하고, 컴파일 할 수 있습니다.

 

 

2 General 2 일반

2.1 General Style Rules 2.1 일반 스타일 규칙

2.1.1 Protocol 2.1.1 프로토콜

 가능한 경우 임베디드 리소스에 HTTPS 프로토콜을 사용하십시오.

 HTTPS를 통해 해당 파일을 사용할 수없는 경우가 아니면 이미지 및 기타 미디어 파일, 스타일 시트 및 스크립트에 항상 HTTPS 프로토콜 ( https: :)을 사용하십시오. 

<!-- Not recommended: omits the protocol --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Not recommended: uses the HTTP protocol --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- Recommended --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
/* Not recommended: omits the protocol */ @import '//fonts.googleapis.com/css?family=Open+Sans'; /* Not recommended: uses the HTTP protocol */ @import 'http://fonts.googleapis.com/css?family=Open+Sans';
/* Recommended */ @import 'https://fonts.googleapis.com/css?family=Open+Sans';

 

 

 

2.2 General Formatting Rules 2.2 일반 서식 규칙

2.2.1 Indentation 2.2.1 들여 쓰기

한 번에 2 칸 씩 들여 쓰십시오.

들여 쓰기에 탭을 사용하거나 탭과 스페이스를 섞지 마십시오. 

<ul> <li>Fantastic <li>Great </ul>
.example { color: blue; }

2.2.2 Capitalization 2.2.2 자본화

소문자 만 사용하십시오.

모든 코드는 소문자 여야합니다. HTML 요소 이름, 속성, 속성 값 ( text/CDATA 제외), CSS 선택기, 속성 및 속성 값 (문자열 제외)에 적용됩니다. 

<!-- Not recommended --> <A HREF="/">Home</A>
<!-- Recommended --> <img src="google.png" alt="Google">
/* Not recommended */ color: #E5E5E5;
/* Recommended */ color: #e5e5e5;

2.2.3 Trailing Whitespace 2.2.3 후행 공백

후행 공백을 제거하십시오.

후행 공백은 필요 없으며 diff를 복잡하게 만들 수 있습니다. 

<!-- Not recommended --> <p>What?_
<!-- Recommended --> <p>Yes please.

2.3 General Meta Rules 2.3 일반 메타 규칙

2.3.1 Encoding 2.3.1 인코딩

UTF-8 (BOM 없음)을 사용하십시오.

편집기가 바이트 순서 표시없이 UTF-8을 문자 인코딩으로 사용하는지 확인하십시오.

<meta charset="utf-8"> 을 통해 HTML 템플리트 및 문서에서 인코딩을 지정하십시오. 스타일 시트의 인코딩은 UTF-8로 가정하므로 지정하지 마십시오.

(인코딩에 대한 자세한 내용과 HTML 및 CSS의 문자 인코딩 처리 방법에 대한 자세한 내용은 시간 및 방법을 참조하십시오.)

2.3.2 Comments 2.3.2 주석

가능한 경우 코드를 설명하십시오.

주석을 사용하여 코드를 설명하십시오 :이 코드는 무엇을 다루고, 어떤 목적을 제공하며, 각각의 솔루션이 사용되거나 선호되는 이유는 무엇입니까?

(이 항목은 문서화 된 코드를 항상 요구한다는 현실적인 기대치로 간주되지 않으므로 선택 사항입니다. 마일리지는 HTML 및 CSS 코드에 따라 크게 다를 수 있으며 프로젝트의 복잡성에 따라 달라질 수 있습니다.)

2.3.3 Action Items 2.3.3 작업 항목

TODO 수행 할 작업과 작업을 표시하십시오.

@@ 과 같은 다른 일반적인 형식이 아니라 TODO 키워드 만 사용하여 할 일을 강조 표시하십시오.

TODO(contact) 형식과 마찬가지로 괄호 안에 연락처 (사용자 이름 또는 메일 목록)를 추가 TODO(contact) .

과 같이 콜론 뒤에 액션 항목을 추가하십시오. 

{# TODO(john.doe): revisit centering #} <center>Test</center>


 
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>


3 HTML 3 HTML 


3.1 HTML Style Rules 3.1 HTML 스타일 규칙 


3.1.1 Document Type 3.1.1 문서 유형 


HTML5를 사용하십시오. 


HTML5 (HTML 구문)는 모든 HTML 문서에서 선호됩니다 : <!DOCTYPE html> . 


HTML을 text/html 사용하는 것이 좋습니다 XHTML을 사용하지 마십시오 application/xhtml+xml 인 application/xhtml+xml 은 브라우저 및 인프라 지원이 부족하며 HTML보다 최적화 할 여지가 적습니다. 


 HTML에서는 문제가 없지만 void 요소를 닫지 마십시오 (예 : <br /> 아니라 <br> ). 


3.1.2 HTML Validity 3.1.2 HTML 유효성 


가능한 경우 유효한 HTML을 사용하십시오. 


파일 크기와 관련하여 성취 할 수없는 성능 목표로 인해 가능하지 않은 경우를 제외하고 올바른 HTML 코드를 사용하십시오. 


 W3C HTML 검사기 와 같은 도구를 사용하여 테스트하십시오. 


유효한 HTML을 사용하는 것은 기술 요구 사항 및 제약 조건에 대한 학습에 기여하고 적절한 HTML 사용을 보장하는 측정 가능한 기준 품질 속성입니다. 
<!-- Not recommended --> <title>Test</title> <article>This is only a test.
<!-- Recommended --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>


3.1.3 Semantics 3.1.3 의미론 


목적에 따라 HTML을 사용하십시오. 


요소 (때로는 "태그"라고 잘못 부름)를 사용하여 요소를 작성했습니다. 예를 들어 머리글에 heading 요소, 단락에 p 요소, 앵커 요소 등을 사용합니다. 


접근성, 재사용 및 코드 효율성의 이유로 HTML을 용도에 따라 사용하는 것이 중요합니다. 


 
<!-- Not recommended --> <div onclick="goToRecommendations();">All recommendations</div>
<!-- Recommended --> <a href="recommendations/">All recommendations</a>


3.1.4 Multimedia Fallback 3.1.4 멀티미디어 폴백 


멀티미디어에 대한 대체 컨텐츠를 제공하십시오. 


canvas 를 통한 이미지, 비디오, 애니메이션 객체와 같은 멀티미디어의 경우 대체 액세스를 제공해야합니다. 의미있는 alt 텍스트 ( alt ) 사용을 의미하는 이미지 및 비디오 및 오디오 사본 및 캡션 (있는 경우). 


시각 장애가있는 사용자는 @alt 없이 이미지가 무엇인지 알 수있는 단서가 거의 없으며 다른 사용자는 어떤 비디오 또는 오디오 내용도 이해할 방법이 없을 수 있습니다. 


alt 속성이 중복성을 가져 오는 이미지의 경우 및 CSS를 즉시 사용할 수없는 순수한 장식용 이미지의 경우 alt="" 에서와 같이 alt="" 텍스트를 사용하지 마십시오.) 


 
<!-- Not recommended --> <img src="spreadsheet.png">
<!-- Recommended --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">


3.1.5 Separation of Concerns 3.1.5 관심사의 분리 


행동과 표현을 구별하십시오. 


 엄격하게 구조 (마크 업), 프리젠 테이션 (스타일 지정) 및 동작 (스크립팅)을 따로 분리하고 3 개 간의 상호 작용을 절대 최소로 유지하십시오. 


즉, 문서 및 템플릿에 구조적 목적으로 만 사용되는 HTML 및 HTML 만 포함되어 있는지 확인하십시오모든 프리젠 테이션을 스타일 시트로 옮기고 모든 행동을 스크립트로 옮기십시오. 


또한 문서 및 템플릿에서 스타일 시트 및 스크립트를 가능한 한 적게 연결하여 접촉 영역을 가능한 작게 유지하십시오. 


구조와 표현을 행동에서 분리하는 것은 유지 관리상의 이유로 중요합니다.스타일 시트와 스크립트를 업데이트하는 것보다 HTML 문서와 템플릿을 변경하는 것이 항상 더 비쌉니다. 


 
<!-- Not recommended --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css" media="screen"> <link rel="stylesheet" href="grid.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I've read about this on a few sites but now I'm sure: <u>HTML is stupid!!1</u> <center>I can't believe there's no way to control the styling of my website without doing everything all over again!</center>
<!-- Recommended --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I've read about this on a few sites but today I'm actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It's awesome!


3.1.6 Entity References 3.1.6 엔티티 참조 


엔티티 참조를 사용하지 마십시오. 


 와 같은 엔티티 참조를 사용할 필요가 없습니다 &mdash; , &rdquo; &rdquo; , or &#x263a; , &#x263a; , (UTF-8)이 파일과 편집자 및 팀간에 사용되는 것으로 가정합니다. 


유일한 예외는 HTML에서 특별한 의미를 갖는 문자 (예 : < 및 & )와 컨트롤 또는 "보이지 않는"문자 (중단 영역 없음)에 적용됩니다. 
<!-- Not recommended --> The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- Recommended --> The currency symbol for the Euro is “€”.


3.1.7 Optional Tags 3.1.7 선택적 태그 


Omit optional tags (optional). 선택적 태그를 생략하십시오 (옵션). 


For file size optimization and scannability purposes, consider omitting optional tags. 파일 크기 최적화 및 스캔 가능성을 위해서는 선택적 태그를 생략하는 것이 좋습니다. The HTML5 specification defines what tags can be omitted. HTML5 사양 에서는 생략 할 수있는 태그를 정의합니다. 


(This approach may require a grace period to be established as a wider guideline as it's significantly different from what web developers are typically taught. For consistency and simplicity reasons it's best served omitting all optional tags, not just a selection.) (이 접근법은 웹 개발자가 일반적으로 배워야하는 것과는 상당히 다른 광범위한 가이드 라인으로 유예 기간을 설정해야 할 수도 있습니다. 일관성과 단순성 때문에 선택이 아닌 모든 선택 태그를 생략하는 것이 가장 좋습니다.) 
<!-- Not recommended --> <!DOCTYPE html> <html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body> </html>
<!-- Recommended --> <!DOCTYPE html> <title>Saving money, saving bytes</title> <p>Qed.


3.1.8 type Attributes 3.1.8 type 속성 


스타일 시트 및 스크립트에 대한 type 속성 생략. 


스타일 시트 (CSS를 사용하지 않는 한)와 스크립트 (JavaScript를 사용하지 않는 경우 제외)에 type 속성을 사용하지 마십시오. 


 HTML5는 text/css 및 text/javascript 를 기본값으로 사용 text/javascript 때문에 이러한 컨텍스트에서 type 속성을 지정하지 않아도됩니다. 이것은 구형 브라우저에서도 안전하게 수행 할 수 있습니다. 
<!-- Not recommended --> <link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<!-- Recommended --> <link rel="stylesheet" href="https://www.google.com/css/maia.css">
<!-- Not recommended --> <script src="https://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- Recommended --> <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>


3.2 HTML Formatting Rules 3.2 HTML 서식 규칙 


3.2.1 General Formatting 3.2.1 일반 서식 


모든 블록, 목록 또는 표 요소에 대해 새 행을 사용하고 이러한 모든 하위 요소를 들여 쓰기하십시오. 


요소의 스타일에 관계없이 (CSS는 요소가 display 속성마다 다른 역할을 맡을 수 있으므로) 모든 블록, 목록 또는 표 요소를 새 행에 배치합니다. 


또한 블록,리스트 또는 테이블 요소의 하위 요소 인 경우 들여 쓰기를하십시오. 


(목록 항목 사이의 공백 주위에 문제가 생기면 모든 li 요소를 한 줄에 넣을 수 있습니다 .linter는 오류 대신 경고를내는 것이 좋습니다.) 
<blockquote> <p><em>Space</em>, the final frontier.</p> </blockquote>
<ul> <li>Moe <li>Larry <li>Curly </ul>
<table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50 </table>


3.2.2 HTML Quotation Marks 3.2.2 HTML 인용 부호 


속성 값을 인용 할 때는 큰 따옴표를 사용하십시오. 


속성 값은 작은 따옴표 ( '' ) 대신 이중 ( "" )을 사용하십시오. 
<!-- Not recommended --> <a class='maia-button maia-button-secondary'>Sign in</a>
<!-- Recommended --> <a class="maia-button maia-button-secondary">Sign in</a>


4 CSS 4 CSS 


4.1 CSS Style Rules 4.1 CSS 스타일 규칙 


4.1.1 CSS Validity 4.1.1 CSS 유효성 


가능한 경우 유효한 CSS를 사용하십시오. 


CSS 유효성 검사기 버그를 다루지 않거나 독점적 구문을 요구하지 않는 한 유효한 CSS 코드를 사용하십시오. 


W3C CSS 검사기 와 같은 도구를 사용하여 테스트하십시오. 


유효한 CSS를 사용하는 것은 측정 가능한 기준 품질 속성으로, 효과가없고 제거 할 수 있고 적절한 CSS 사용을 보장하는 CSS 코드를 찾을 수 있습니다. 


4.1.2 ID and Class Naming 4.1.2 ID 및 클래스 명명 


의미있는 또는 일반적인 ID와 클래스 이름을 사용하십시오. 


프레젠테이션이나 비밀스런 이름 대신 항상 해당 요소의 목적을 반영하는 ID 또는 클래스 이름을 사용하거나 달리 일반적인 이름을 사용하십시오. 


이름이 구체적이고 요소의 목적을 반영하는 이름은 가장 이해하기 쉬우 며 변경 가능성이 적기 때문에 선호해야합니다. 


일반 이름은 형제와 다른 의미가 없거나 의미가없는 요소의 단순한 대체 항목입니다.그들은 일반적으로 "도우미"로 필요합니다. 


기능적 또는 제네릭 이름을 사용하면 불필요한 문서 또는 템플릿 변경의 가능성을 줄일 수 있습니다. 
/* Not recommended: meaningless */ #yee-1901 {} /* Not recommended: presentational */ .button-green {} .clear {}
/* Recommended: specific */ #gallery {} #login {} .video {} /* Recommended: generic */ .aux {} .alt {}


4.1.3 ID and Class Name Style 4.1.3 ID 및 클래스 이름 스타일 


가능하면 짧지 만 필요한만큼 ID와 클래스 이름을 사용하십시오. 


ID 또는 클래스에 대해 가능한 한 간단히 전달하면서 전달하십시오. 


ID와 클래스 이름을 사용하면 이해할 수있는 수준의 코드 효율성을 얻을 수 있습니다. 
/* Not recommended */ #navigation {} .atr {}
/* Recommended */ #nav {} .author {}


4.1.4 Type Selectors 4.1.4 유형 선택자 


유형 선택기로 ID 및 클래스 이름을 한정하지 마십시오. 


필요하지 않으면 (예 : 도우미 클래스 사용) ID 나 클래스와 함께 요소 이름을 사용하지 마십시오. 


 불필요한 조상 선별자를 피하는 것은 성능상의 이유로 유용합니다. 
/* Not recommended */ ul#example {} div.error {}
/* Recommended */ #example {} .error {}


4.1.5 Shorthand Properties 4.1.5 속기 속성 


가능하다면 속기 속성을 사용하십시오. 


CSS는 하나의 값만 명시 적으로 설정되는 경우에도 가능할 때마다 사용해야하는 font 과 같은 다양한 속기 속성을 제공합니다. 


속기 속성을 사용하면 코드 효율성과 이해하기 쉽습니다. 
/* Not recommended */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
/* Recommended */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;


4.1.6 0 and Units 4.1.6 0 및 단위 


필요하지 않으면 "0"값 뒤에 단위 지정을 생략하십시오. 


필요하지 않으면 0 값 뒤에 단위를 사용하지 마십시오. 
flex: 0px; /* This flex-basis component requires a unit. */ flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */ margin: 0; padding: 0;


4.1.7 Leading 0s 4.1.7 선행 0 


앞에 오는 "0"은 생략하십시오. 


-1과 1 사이의 값 또는 길이 앞에 put 0 사용하지 마십시오. 
font-size: .8em;


4.1.8 Hexadecimal Notation 4.1.8 16 진법 


가능하면 3 자리 16 진수 표기법을 사용하십시오. 


이를 허용하는 색상 값의 경우 3 자의 16 진수 표기법이 더 짧고 간결합니다. 
/* Not recommended */ color: #eebbcc;
/* Recommended */ color: #ebc;


4.1.9 Prefixes 4.1.9 접두사 


응용 프로그램 별 접두어가있는 선택기 접두어 (선택 사항). 


대규모 프로젝트와 다른 프로젝트 또는 외부 사이트에 포함 된 코드는 ID 및 클래스 이름에 접두사 (네임 스페이스로 사용)를 사용합니다. Use short, 짧고 고유 한 식별자 다음에 대시를 사용하십시오. 


 


 


네임 스페이스를 사용하면 이름 지정 충돌을 방지하고 검색 작업 및 바꾸기 작업과 같은 유지 관리 작업을보다 쉽게 ​​수행 할 수 있습니다. 
.adw-help {} /* AdWords */ #maia-note {} /* Maia */


4.1.10 ID and Class Name Delimiters 4.1.10 ID 및 클래스 이름 구분 기호 


ID 및 클래스 이름의 단어는 하이픈으로 구분하십시오. 


이해력과 스캔 가능성을 높이기 위해 하이픈 이외의 문자 (아무 것도 포함하지 않는 문자)로 선택기에서 단어와 약어를 연결하지 마십시오. 
/* Not recommended: does not separate the words “demo” and “image” */ .demoimage {} /* Not recommended: uses underscore instead of hyphen */ .error_status {}
/* Recommended */ #video-id {} .ads-sample {}


4.1.11 Hacks 4.1.11 해킹 


사용자 에이전트 탐지와 CSS "해킹"을 피하십시오. 먼저 다른 접근 방법을 시도하십시오. 


사용자 에이전트 탐지 또는 특수 CSS 필터, 해결 방법 및 해킹에 대한 스타일링 차이점을 해결하려고합니다. 효율적이고 관리가 용이 ​​한 코드 기반을 달성하고 유지하기 위해서는 두 가지 접근 방식 모두 최후의 수단으로 고려되어야합니다. 다시 말하면 탐지 및 해킹을 무료로 제공하면 장기적으로 프로젝트에 해를 끼칠 수 있습니다. 프로젝트가 최소한의 저항을하는 경향이 있기 때문입니다.  즉, 탐지 및 해킹을 쉽게 사용할 수 있도록 허용하고 탐지 및 해킹을 더 자주 사용하는 것을 의미하며 너무 자주 자주 발생합니다. 


 


 


4.2 CSS Formatting Rules 4.2 CSS 서식 규칙 


4.2.1 Declaration Order 4.2.1 선언 순서 


선언을 알파벳순으로 표시하십시오. 


기억하고 유지하기 쉬운 방식으로 일관된 코드를 얻기 위해 선언을 알파벳순으로 기재하십시오. 


정렬 목적으로 공급 업체 특정 접두사를 무시하십시오.그러나 특정 CSS 속성에 대한 여러 공급 업체 별 접두사는 정렬 된 상태로 유지되어야합니다 (예 : -moz 접두어는 -webkit 앞에옵니다). 
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;


4.2.2 Block Content Indentation 4.2.2 내용 들여 쓰기 차단 


모든 블록 컨텐츠를 들여 쓰십시오. 


계층 구조를 반영하고 이해를 높이기 위해 규칙뿐만 아니라 선언 내의 모든 블록 컨텐츠를 들여 쓰십시오. 
@media screen, projection { html { background: #fff; color: #444; } }


4.2.3 Declaration Stops 4.2.3 선언 중단 


모든 선언 후에 세미콜론을 사용하십시오. 


 일관성과 확장 성을 위해 모든 선언을 세미콜론으로 끝내십시오. 
/* Not recommended */ .test { display: block; height: 100px }
/* Recommended */ .test { display: block; height: 100px; }


4.2.4 Property Name Stops 4.2.4 부동산 이름 정지 


속성 이름의 콜론 다음에 공백을 사용하십시오. 


일관성을 위해 항상 속성과 값 사이에 공백을 사용합니다 (단, 속성과 콜론 사이에는 공백을 사용하지 마십시오). 
/* Not recommended */ h3 { font-weight:bold; }
/* Recommended */ h3 { font-weight: bold; }


4.2.5 Declaration Block Separation 4.2.5 선언 블록 분리 


마지막 선택기와 선언 블록 사이에 공백을 사용하십시오. 


마지막 선택기와 선언 블록 을 시작하는 여는 중괄호 사이에는 항상 공백을 하나 사용하십시오. 


여는 중괄호는 주어진 규칙에서 마지막 선택자와 같은 줄에 있어야합니다. 
/* Not recommended: missing space */ #video{ margin-top: 1em; } /* Not recommended: unnecessary line break */ #video { margin-top: 1em; }
/* Recommended */ #video { margin-top: 1em; }


4.2.6 Selector and Declaration Separation 4.2.6 선택자와 선언 분리 


선택자와 선언을 줄 바꿈으로 구분하십시오. 


항상 각 선택기와 선언에 대해 새 행을 시작하십시오. 
/* Not recommended */ a:focus, a:active { position: relative; top: 1px; }
/* Recommended */ h1, h2, h3 { font-weight: normal; line-height: 1.2; }


4.2.7 Rule Separation 4.2.7 규칙 분리 


규칙을 줄 바꿈으로 구분하십시오. 


규칙 사이에 항상 빈 줄 (두 줄 바꿈)을 넣으십시오. 
html { background: #fff; } body { margin: auto; width: 50%; }


4.2.8 CSS Quotation Marks 4.2.8 CSS 따옴표 


속성 선택자 및 특성 값에 작은 따옴표를 사용하십시오. 


속성 선택자 또는 특성 값에 대해 큰 따옴표 ( "" ) 대신 단일 ( '' ) 인용 부호를 사용하십시오.URI 값에 따옴표를 사용하지 마십시오 ( url() ). 


예외 : @charset 규칙을 사용해야하는 경우 큰 따옴표를 사용하십시오. 작은 따옴표는 사용할 수 없습니다 . 
/* Not recommended */ @import url("https://www.google.com/css/maia.css"); html { font-family: "open sans", arial, sans-serif; }
/* Recommended */ @import url(https://www.google.com/css/maia.css); html { font-family: 'open sans', arial, sans-serif; }


4.3 CSS Meta Rules 4.3 CSS 메타 규칙 


4.3.1 Section Comments 4.3.1 섹션 설명 


섹션 주석으로 섹션을 그룹화합니다 (선택 사항). 


가능한 경우 주석을 사용하여 스타일 시트 섹션을 그룹화하십시오. 새 줄로 섹션을 구분하십시오. 
/* Header */ #adw-header {} /* Footer */ #adw-footer {} /* Gallery */ .adw-gallery {}


 


 


 


 


 


 


Parting Words 분리 단어 


일관성을 유지하십시오. 


코드를 편집하는 경우 몇 분 정도 시간을내어 주변의 코드를보고 스타일을 결정하십시오. 그들이 모든 산술 연산자 주위에 공백을 사용한다면, 역시 그렇게해야합니다. 그들의 의견에 주변에 작은 해시 마크가있는 상자가 있으면 주석 주위에 작은 상자가 있습니다. 


스타일 가이드 라인을 갖추는 요점은 공통된 코딩 어휘를 사용하여 사람들이 말하는 방식보다는 말하고있는 것에 집중할 수 있도록하는 것입니다. 사람들이 어휘를 알 수 있도록 여기에 글로벌 스타일 규칙을 제시하지만 지역 스타일 또한 중요합니다. 파일에 추가하는 코드가 기존 코드와 크게 다르다면 독자가 읽으 려 할 때 리듬을 벗어납니다. 이것을 피하십시오. 


 


 




 


 


 


   






            



                            
        




        


                    

  



  



  





    
        
            저작자표시 
        
    


  




                    


  
'디자인 > htm,l css, js' 카테고리의 다른 글

  

    

      HTML5 비디오  (0)
      2017.06.16
    

    

      jquery 슬라이드 배너 bxslide 옵션 정보  (0)
      2017.06.16
    

    

      즐겨찾기 추가 html/js  (0)
      2017.03.25
    

    

      오래전부터 사용하던 아이템 슬라이더 입니다.  (0)
      2017.03.25
    

    

      스크롤시 따라다니는 배너/버튼 #2  (0)
      2017.03.25
    

    

      스크롤시 따라다니는 배너/버튼 #1  (0)
      2017.03.25
    

    

      HTML 태그 정리  (0)
      2017.03.24
    

    

      a 대신 onclick=location.href 활용하기  (0)
      2017.03.24
    

  






				

				

					
				



				



					댓글