HTML CSS - HelloMocca/YDbaobao GitHub Wiki

HTML Contents

  1. Doctype
  2. Id/Class naming
  3. Comments
  4. Whitespace
  5. Quotes

CSS Contents

  1. Whitespace
  2. Padding/Margin
  3. Color
  4. Comments

Doctype

Html5 style

//good
<!Doctype html>

//bad
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Id/Class naming

single dash(-) btn, lbl, div, input과 같이 사용하는 태그명을 붙여주세요

<div id="mainContainer"> // camel case (x)

<button class="update-category-btn"> (o)

Comments

include나 헷갈릴 부분은 코멘트를 남겨주세요

<!-- 상단 navigator -->
<%@ include file="./commons/_topNav.jsp"%>
<!-- 브랜드/제품 검색바 -->
<%@ include file="./commons/_search.jsp"%>

Whitespace

<div id = "main-container"> (x)

<div id="main-container"> (o)

Quotes

html태그 내에서는 doble quote("") 사용

<div id='item-container' class='wrap content'> (x)

<div id="item-container" class="wrap content"> (o)

CSS Whtitespace

세미콜론 뒤에 스페이스 없이

position: absolute; (x)

position:absolute; (o)

Padding/Margin

padding-top:5px; padding-bottom:5px (x)

padding:5px 0px 2px 5px; (o)

Color

Hex 코드 사용해주세요

whilte (x)

#fff (o)

CSS Comments

  • 여러 페이지에서 사용하는 css의 경우 주석으로 페이지를 구분해주세요
/* horizontalCategory.jsp */

#horizontal-category-menu {
	width:100%;
	outline:1px solid #EA6576;
}

#horizontal-category-menu ul {
	list-style:none;
	text-align:center;
	padding:10px 0px 10px 0px;
	margin:0;
}
  • 범용으로 사용하는 CSS는 위쪽에 배치해주세요.
.btn {
 color:#fff
}