HTML 코드를 작성할때 다음과 같은 기본 규칙을 준수한다.
- HTML은 해당 DTD 명세에 맞게 작성하며, W3C validation을 통과해야 한다.
단, HTML5 DTD 선언 시 다음 오류 내용은 허용한다
- <iframe>의 frameborder, marginwidth, marginheight, scrolling attribute
DTD를 제외한 모든 요소와 attribute는 소문자로 작성한다.
<DIV Class="wrap">wrap</DIV> (X)
<div class="wrap">wrap</div> (O)모든 HTML 요소를 닫는다.
<section>
<p>This is a paragraph. (X)
<p>This is a paragraph.</p> (O)
</section>- Attribute 값은 큰 따옴표("")로 묶는다.
- Attribute 우선순위
| 순서 | 속성 |
|---|---|
| 1 | rel |
| 2 | type |
| 3 | href, src |
| 4 | width, height |
| 5 | target |
| 6 | id |
| 7 | name |
| 8 | class |
| 9 | style |
| 10 | title, alt |
| 11 | 기타 attribute |
<a href="#" target="_blank" id="linkId" class="link" style="display:block;" title="링크가기">링크</a>특수 기호는 문자 엔티티 참조를 사용하여 코드로 변환한다. HTML 5의 Character references : https://dev.w3.org/html5/html-author/charref
<h4>Q&A</h4> (X)
<h4>Q&A</h4>(O)- 의미 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것은 허용한다.
- 빈 줄의 간격은 1줄을 초과하지 않는다.
<head>
내용
</head>
# 빈 줄
<body>
</body>새로운 HTML 문서를 작성할 때 'HTML5'를 사용한다.
<!DOCTYPE html>신규 HTML 문서를 작성할 때 기본 인코딩은 utf-8을 원칙으로 한다.
<meta charset="utf-8">뷰포트는 웹페이지 사용자가 볼 수 있는 영역으로 모든 웹페이지에 다음과 같은 뷰포트 요소를 포함한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">인터넷 익스플로러가 항상 최신 버전의 레이아웃 엔진을 사용하여 문서를 렌더링하도록 지정한다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">- 마크업의 중첩이 깊어질 때마다 자식 요소는 1탭을 들여 쓰고, 탭 1개의 크기는 공백 2칸으로 설정한다.
- 문서 내에서 반드시 탭을 이용하여 들여쓰기를 하며, 탭을 대신하여 공백으로 띄어 들여쓰지 않는다.
다음의 경우 들여쓰지 않는다
- HTML Element의 자식 Element인 head, body
- HTML 코드의 주석은 코드 그룹을 구분하거나, 참고해야 하는 사항을 기술한다.
- HTML 주석의 시작과 종료는 아래와 같이 표기, 기본 형식에 맞게 작성한다.
<!-- 주석내용 -->
<div>
<span class="message">
<h1>hi</h1>
</span>
</div>
<!-- //주석내용 -->
<!-- 주석내용 -->
<link rel="shortcut icon" type=”image/x-icon” href="favicon.ico" />
<!--
두줄 이상에 걸쳐 있는 주석은 이와 같이 작성한다.
두줄 이상에 걸쳐 있는 주석은 이와 같이 작성한다.
-->너무 많은 주석은 유령문자 버그를 생성하므로 되도록 자제 한다.
<! -- comments -- > (X) 시작하는 구분자("<!")와 주석을 시작하는 구분자("--") 사이에는 공백 문자(white space)가 올 수 없다.
<!--- comments ---> (X) 코멘트 내용에서 두개 이상의 하이픈('-')을 연속해서 사용하면 안된다.
<!-- comments --> (O) 다음과 같이 lang attribute를 선언한다.
<html lang="ko">meta, link, title, script, style 순서로 요소를 선언한다.
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="js/default.js"></script>
<style>
…
</style>
<title>default</title>
</head>rel, type , href attribute를 선언한다.
<head>
<link rel="shortcut icon" type=”image/x-icon” href="favicon.ico" />
</head>- Naming에 영어, 숫자, 하이픈(
-), 언더스코어(_)만 사용한다 - Naming의 첫 시작은 영문 소문자로만 시작한다.
CSS 언어는 기본적으로 소문자 + 하이픈(-)을 사용해 표현하는 구문의 언어이다.
#main-contents {
position: absolute;
top: 40px;
}BEM : Block Element Modifier
.stick-man__head--small {
}
.stick-man__head--big {
}- 영문 소문자, 숫자, 언더스코어(
_)만 사용한다 - 형태_의미_순서_상태를 기본 순서로 사용한다.
- 한자리 정수는 사용하지 않으며 01, 02와 같이 사용한다.
ex)
| 분류 | 예제 | 설명 |
|---|---|---|
| HTML | weniv.html | '페이지영문이름.html'로 사용 |
| CSS | weniv.css | '서비스영문이름.css'로 사용 |
| Folder | images, css, js | 'image, css, javascript 폴더 사용' |
CSS 코드를 작성할때 다음과 같은 기본 규칙을 준수한다.
- 기본적으로 외부 스타일 시트를 적용하는 것을 원칙으로 하며, rel, type, href 순으로 작성한다.
- 태그 사이에 선언한다.
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>CSS는 CSS3 속성을 제외하고 W3C validation을 통과해야 한다.
모든 속성은 영문 소문자로만 작성한다.
한글폰트의 선언, filter, content에 작은 따옴표('')를 사용한다. 그 외의 경우는 사용하지 않는다. @charset 선언 시에는 속성 값을 큰따옴표(" ")로 감싼다.
@charset "utf-8";
.list {background:url("/image/box_news.gif") no-repeat} (x)
.list {background:url('/image/box_news.gif') no-repeat} (x)
.list {background:url(/image/box_news.gif) no-repeat} (o)
.lists {font-family: '돋움', Dotum, Arial} (o)- 문서 첫줄에 인코딩을 선언하며 인코딩은 HTML과 동일한 인코딩을 지정한다.
- 가독성을 위해 CSS 스타일 속성 간 개행하며, 선택자(클래스명, 아이디명, 태그)를 선언한 뒤 한칸의 공백을 두고 중괄호를 작성한다.
- 속성과 속성값 사이의 한칸의 공백을 둔다.
- CSS 코드 작성시 들여쓰기는 1탭을 들여 쓰고, 탭 1개의 크기는 공백 2칸으로 설정한다.
- 다중 선택자 사용시 선택자간 개행하여 사용한다.
@charset "utf-8";
#main-contents {
position: absolute;
top: 40px;
}
.menu__youtube,
.menu__qna,
.menu__wiki,
.menu__curriculum {
width: 105px;
height: auto;
}- CSS의 주석은 코드 그룹을 구분하거나, 참고해야 하는 사항을 기술한다.
- CSS 주석의 시작은 아래와 같이 표기, 종료는 작성하지 않으며 기본 형식에 맞게 작성한다.
- CSS 주석 기호(
/*,*/)와 내용 사이에는 반드시 공백 한칸이 있어야 한다.
/* maon-contents 영역 */
#main-contents {
position: absolute;
top: 40px;
}-
브라우저 별 css 지원 속
-
transform : ms, webkit
-
css 스타일 속성간
Javascript 코드를 작성할때 다음과 같은 기본 규칙을 준수한다.
- 기본적으로 외부 자바스크립트 파일을 사용하는 것을 원칙으로 하며, type, src 순으로 작성한다.
- 코드의 양이 많지 않은 경우 내부 스크립트 코드로 작성한다.
<script type="text/javascript" src="script/script.js"></script>
</body>- 태그 최하단 선언을 우선시하지만 특수한 경우 태그 사이에 선언한다.
<!--구글 Analytics 태그 : head 태그 사이에 스크립트 사용 권장-->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72047520-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-72047520-1");
</script>