HTML CSS - HelloMocca/YDbaobao GitHub Wiki
HTML Contents
CSS Contents
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
}