코드공부방

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 멀티미디어 대체 멀티미디어를 위한 대체 콘텐츠를 제공한다..

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 구글 스타일가이드 자세히보기 #1 1. CSS 스타일 규칙 1.1 CSS 유효성 W3C CSS 유효성 검사기 툴을 활용 하여 유효한 CSS를 사용한다. (https://jigsaw.w3.org/css-validator/) 1.2 CSS 네이밍 의미있거나 일반적인 네이밍을 사용한다. 요소의 목적을 반영하는 명칭 사용을 지향한다. 기능이나 일반적 네이밍을 사용하면 유지보수에 유리하다. /* 비추천 : 의미없는 네이밍 */ #yee-1901 {...} /* 비추천 : 표현만을 위한 네이밍 */ .button-green {...} .clear {...} 표현만을 위한 Class 네이밍은 나도 자주 쓰고 있는데, 만약 button-green이란 클래스가 녹색배경의 버튼을 나타내고 있는 클래스 였으나 갑자기..

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..