코드공부방

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 구글 스타일가이드 자세히보기 #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..

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style 프로그래밍을 할때 고민을 많이 하게 되는 것중 하나가 네이밍이 아닐까 싶다. 변수, 함수, 클래스, 아이디.. 네이밍 해야할 것도 많다. 해당 기능에 맞게, 내용에 딱 맞는 아름다운(?) 이름을 지어주기 위하여 오늘도 열심히 구글 번역기를 돌리고 있다. (프로그래밍 작명소는 없나..) 이름을 뭐라고 짓냐는 것도 고민인데 그 이름을 짓는 방식도 한가지가 아니다. 이것은 사실 스타일이기 때문에 각 프로젝트에서 협의된 대로 따르는 게 좋지만 어떤 종류가 있는지 알고 있으면 좋으니 정리해보았다. 1. 카멜 표기법 (Lower Camel Case : LCC) 첫단어는 소문자로 표기하며 이후..