Markup Guide

기본 규칙

기본 규칙
기본 문서 버전	HTML5, CSS3
인코딩	UTF-8
PC 브라우저 호환성	Internet Explore 9~, Microsoft Edge, Goolgle Chrome, Mozila FireFox, Apple Safari, Opera
Mobile 브라우저 호환성	Android Chrome, IOS Safari

HTML

HTML 문법

들여쓰기는 공백 4칸으로 합니다.
속성값을 지정할 때에는 항상 큰 따옴표( " )를 사용합니다.
단일 태그는 슬래시( / )를 사용하지 않습니다.


<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>Page title</title>
    </head>
    <body>
        <img src="logo.png" alt="Logo">
        <h1 class="hello-world">Hello, world!</h1>
    </body>
</html>

HTML5 문서형식

모든 HTML 페이지 시작 지점에 공백 없이 HTML5 문서 타입을 선언합니다.
문서 최상위 요소인 html 요소에 lang 속성을 추가합니다.
문자열 인코딩을 명시적으로 선언합니다. UTF-8을 권장합니다.
인터넷 익스플로러는 엣지 모드를 사용하여 가장 최신 버전을 사용하도록 지정합니다.


<!doctype html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
	</head>
	<body>
	</body>
</html>

CSS, JavaScript 인클루드

CSS와 JavaScript를 불러올 때 type 속성을 선언하지 않습니다.


<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

Boolean 속성

불리언 속성은 값을 지정하지 않습니다.


<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
	<option value="1" selected>1</option>

주석

주석은 시작과 끝을 모두 표기합니다. 시작점과 구분하기 위해 끝나는 주석은 //를 붙입니다.
```

<section>
...
</section>

							
```

마크업

마크업 작성시 불필요한 태그작성을 하지 않습니다.
목적에 맞는 HTML태그를 사용합니다.
HTML5에 추가된 시멘틱 요소들(<header>, <article>, <nav> 등)을 적극 활용합니다.
블록단위 구분을 위한 빈줄은 한줄을 초과하지 않습니다.

CSS

CSS 문법

모든 선언은 마지막을 세미콜론( ; )으로 끝냅니다. 마지막 선언도 생략하지 않습니다.
```
.selector{padding:15px; margin-bottom:15px;}
							
```
속성을 한줄로 사용할 경우, 가독성을 위해 하나의 속성이 끝난뒤 공백 한칸을 둡니다.
각각의 선언을 한 줄에 하나씩 할 경우, 들여쓰기는 공백 4칸으로 합니다. 가독성을 위해 닫는 중괄호는 새로운 줄에 놓습니다.
```
/* 속성을 한줄로 사용하는 경우 */
.selector{padding:15px; margin-bottom:15px;}

/* 하나의 속성을 한줄에 사용하는 경우 */
.selector,
.selector-secondary,
.selector[type="text"]{
	padding:15px;
	margin-bottom:15px;
}
							
```
16진수 값들은 모두 소문자로 표현하며, 축약 가능한 경우 축약합니다.
```
.selector{color:#f0f; background-color:#fefefe;}
							
```
0 값들에서는 단위를 쓰지 않습니다.
```
.selector{padding:0;}
							
```

@import 방식은 사용하지 않습니다.


<!-- 사용하지 않음 -->
<style>
  @import url("more.css");
</style>
<!-- //사용하지 않음 -->

<link rel="stylesheet" href="layout.css">

선택자

태그 선택자 사용을 지양하고, 클래스 선택자를 사용합니다.
문서 내 앵커 이동이나 for값 등 특수한 경우 외에는 아이디 선택자를 사용하지 않습니다.
클래스의 조합과 중첩은 3회를 초과하지 않는 것을 권장합니다.

선택자를 그룹핑하는 경우, 한 줄에 하나의 선택자를 놓습니다.


.selector,
.selector-secondary,
.selector[type="text"]{padding:15px; margin-bottom:15px;}

속성 선언 순서

포지션과 박스모델 관련 속성을 먼저 작성한 후 그외 속성들을 작성합니다.


{
	/* Positioning */
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:100;

	/* Box-model */
	float:right;
	display:block;
	flex:1;
	width:100px;
	height:100px;
	margin:10px;
	padding:10px;

	/* Typography */
	font:normal 13px 'NotoSansM', sans-serif;
	line-height:1.5;
	color:#333;
	text-align:center;

	/* Border */
	border:1px solid #e5e5e5;
	border-radius:3px;

	/* Background */
	background-color:#f5f5f5;

	/* etc */
	opacity:1;
	transform:rotate(0);
}

주석

블록단위 구분을 위해 간결하게 작성합니다.


/* header */
.header .selector1{...}
.header .selector2{...}

/* content */
.content .selector1{...}
.content .selector2{...}

미디어 쿼리

미디어쿼리는 별도의 파일로 분리하여 사용합니다.


<!-- base css -->
<link rel="stylesheet" href="layout.css">

<!-- media-query css -->
<link rel="stylesheet" href="media-query.css">

클래스 규칙

클래스명은 케밥 케이스(kebab-case)를 사용합니다.
의미가 명확하도록 짧고 간결하게 작성하되 축약은 지양합니다.
일반적으로 button을 의미하는 .btn과 같은 축약은 허용합니다.
구조, 목적 중심으로 작명합니다.
'기능-의미-순서-상태'를 기본순서로 합니다.


.btn-close{...}
.list-product{...}
.btn-modal-01-on{...}