코드공부방

HTML 구글 스타일가이드 자세히보기 #1 HTML스타일 규칙 1. HTML 스타일 규칙 1.1 Document Type HTML5를 사용한다. XHTML이 아닌 HTML을 사용한다. 홀태그는 닫지 않는다. 1.2 HTML 유효성 W3C HTML Validator 같은 툴을 활용하여 유효성을 검증한다. 1.3 Semantics 목적(의미)에 맞는 HTML 요소를 사용한다. 생성된 용도에 대하여 태그가 아닌 요소를 사용한다. (예를 들어 표는 표 요소, 단락에는 P요소, 앵커 요소 등..) HTML을 목적에 따라 사용하는 것은 접근성과 재사용 및 코드 효율성에도 중요하다. All recommendations All recommendations 1.4 멀티미디어 대체 멀티미디어를 위한 대체 콘텐츠를 제공한다..

HTML 구글 스타일가이드 자세히보기 #intro HTML 마크업에도 스타일가이드가 있을까? 당연히 존재한다. HTML 마크업 작업도 여러 작업자가 협업하여 진행하는 경우가 발생하기 때문에 일관된 스타일로 코드를 유지하기 위해서는 CSS와 마찬가지로 작성 규칙이 필요하다. 사실 CSS와 비교하면 HTML마크업에는 많은 규칙이 필요하진 않는다. 지금 머릿속에 어떤 규칙들이 있을지 떠올려봐도 떠오르는 것이라고는 들여쓰기, 따옴표, 뭐 어떤 태그의 사용 정도? (애초에 HTML코드를 작성하는 방식(?)이 다양하지도 않다) 그래서 구글 HTML 스타일 가이드에는 어떤 내용들이 있는지 자세히 보았다. GOOGLE CSS 스타일 가이드와 마찬가지로 구글에서 제공하는 공식 스타일가이드 문서를 참고하였고, 최대한 해당..

CSS 구글 스타일가이드 자세히보기 #3 CSS 메타 규칙 3. CSS 메타(meta) 규칙 3.1 섹션 주석 섹션 주석을 작성하여 섹션을 그룹화 한다. 섹션 간 주석과 줄 바꿈으로 구분한다. /* Header */ #adw-header {...} /* Footer */ #adw-footer {...} /* Gallery */ .adw-gallery {...} 마치며 일관성을 유지한다. 기존 코드를 수정하는 경우 적어도 몇 분 동안 주변의 코드를 보고 작성 스타일을 결정한다. 추가한 코드가 주위 기존 코드와 다르게 보이지 않게 작성한다. 스타일가이드를 사용하는 요점은 공통된 코딩 어휘를 갖는 것이다. GOOGLE의 CSS 스타일 가이드를 자세히 살펴보고, 정리해봤는데 크게 특이하거나 놀라운점은 없었다. ..

CSS 구글 스타일가이드 자세히보기 #2 2. CSS 작성 규칙 2.1 선언(속성) 순서 알파벳 순서대로 속성을 선언한다. vendor-prefix 선언은 알파벳 선언순서를 무시한다. 단, 접두어가 붙지 않는 속성을 가장 마지막에 선언한다. .sample { background-color:#000; border:1px solid #eee; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; color:#222; text-align:center; } CSS 속성순서를 알파벳순으로 한다니 놀라웠다. 네이버 코딩컨벤션의 경우 Style의 쓰임새나 중요도에 따른 선언순서를 가져가기에 나도 그것을 따라가고 있었다. (display > ove..

CSS 구글 스타일가이드 자세히보기 #intro 보통 프로젝트에 투입되면 프로젝트 시작과 동시에 스타일가이드를 정한다. 이는 협업하는 작업자간의 원활한 프로젝트 진행을 위한 약속이라고 볼 수 있다. 예를들어 다수의 작업자가 규칙을 정하지 않고 각자 본인의 작업스타일로 작업을 진행하면 그 프로젝트의 css파일은 아래와 같은 결과물이 나올 것이다. .main_section {padding: 60px 0 100px 0} .main_section + .main_section {border-top: 1px solid #e0e0e0} .main_section .square_list li:hover .btn_area {opacity: 1; bottom: 38px} .main_section .square_list li..