🎈코딩 컨벤션이란?
코딩 컨벤션이란 코딩 규칙이라 말할 수 있다. 어떻게 하면 더 효율적이고, 가독성이 좋은 코드를 만들 수 있는지 고민하여 규칙을 만들어 문서화한 것이다.
🚩코딩 컨벤션 필요성
- 유지보수에 투자되는 비용을 최소화하기 위해 통일된 코드 작성법을 제시한다.
- 코딩 컨벤션을 준수하면 프로젝트 멤버 간 코드 공유가 쉬워진다.
- 일관성 있게 코드를 작성할 수 있다.
📝 HTML 코드 작성 규칙
1. 📃기본 규칙
1) W3C Validation
HTML은 해당 DTD의 명세에 맞게 작성하며, W3C validation을 통과해야 한다. 단, HTML5 DTD 선언 시 다음 오류 내용은 허용한다.
• <iframe>의 frameborder, marginwidth, marginheight, scrolling 속성
- DTD란❔ 문서 타입 정의로 XML 문서의 구조 및 해당 문서에서 사용할 수 있는 적법한 요소와 속성을 정의하는 것이다. <!DOCTYPE으로 시작하며 루트 요소는 XML 파서에 명시된 루트 요소부터 파싱을 시작하라고 알려주는 역할을 한다.
2) 영문 소문자 사용
DTD를 제외한 모든 요소와 속성은 소문자로 작성한다.
3) 속성값 표기
속성값은 큰따옴표("")로 묶는다.
4) Character entity references 사용
특수 기호는 문자 엔티티 참조를 사용하여 코드로 변환한다.
HTML 5의 Character references : HTML5 spec Character references
5) 스크립트 선언 지양
Javascript를 사용하되 태그에 inline방식으로 사용하는 이벤트 속성 및 스크립트는 HTML 산출물에 선언하지
않는다.(<head>태그 사이 또는 <body>태그 최하단에 선언할 수 있다)
2. 📃들여쓰기 규칙
들여쓰기를 하면 코드의 가독성이 높아지고 전체 HTML 구조를 쉽게 파악할 수 있다. 다
마크업의 중첩이 깊어질 때마다 자식 요소는 1탭 들여 쓰고, 1탭의 크기는 공백 4칸으로 설정한다. 문서내에서 반드시 탭을 이용하여 들여쓰기를 하며, 탭을 대신하여 공백으로 띄어 들여쓰지 않는다.
3. 📃빈 줄
빈 줄을 사용하려면 다음과 같은 사용 규칙을 준수한다. 의미 있는 객체를 구분하기 위하여 코드 그룹 간 1줄씩 빈 줄을 만드는 것은 허용한다.
4. 📃DTD 및 인코딩
1) DTD 선언 : HTML 문서는 반드시 DTD를 선언한다.
신규 HTML 문서를 작성할 때 'HTML5'를 사용한다. (<!DOCTYPE html>)
2) 인코딩 선언 : HTML 문서는 반드시 인코딩 정보를 선언한다. 인코딩 설정은 DB의 인코딩 방식과도 관련이 있으므로 반드시 담당 개발자와 협의하여 정해야 한다.
신규 HTML 문서를 작성할 때 기본 인코딩은 utf-8을 원칙으로 한다. (<meta charset="utf-8">)
5. 📃주석
시작 주석 <!-- 주석 내용 -->
종료 주석 <!-- //주석 내용 -->
- 주석 기호와 주석 내용 사이에는 반드시 공백 한 칸이 있어야 한다.
- 시작과 종료 주석의 주석 내용은 동일해야 한다.
📝HTML 요소 작성 규칙
1. 📃기본규칙
특정 요소에 class, style을 선언할 때는 선언 순서를 준수한다.
<input type="text" id="user_id" title="사용자ID" class="input_txt" style="width:100px">
class와 style은 제일 뒷 부분에 선언한다.
2. 📃전역 구조화 요소
1) <html>
<html lang="ko">
XHTML DTD 선언 시에는 lang 속성을 선언한다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
lang 속성은 User Agent가 언어를 올바로 해석할 수 있게 도와주며, 검색과 음성 장치에 활용된다. 언어 코드는 모든 요소에 사용할 수 있지만 HTML 요소에 해당 문서의 주 언어
코드만 선언한다.
2) <head>
meta, title, link, script, style 순서로 요소를 선언한다.
<head>
<meta charset="utf-8">
<title>oh velog</title>
<link rel="stylesheet" href="css/default.css">
<script src="js/default.js"></script>
<style>
…
</style>
</head>3. 📃폼 요소
폼 요소는 이전 글을 참고하자. HTML 2. forms and validations
4. 📃표 요소
1) <table>
2차원의 격자형 데이터를 표현하기 위해 사용되며 표의 요약 내용을 표기해야 할 때 summary 속성을 선택적으로 사용할 수 있다.
2) <caption>
표현 제목을 표현하기 위해 사용한다. 반드시 선언해야 한다.
3) <colgroup>
<col> 요소를 그룹핑하여 디자인을 제어할 때 사용한다.
4) <thead>
표 머리글을 그룹핑할 때 사용한다.
5) <tfoot>
표 바닥글을 그룹핑할 때 사용한다. tfoot 요소는 thead와 tbody 요소 사이에 위치해야 한다.
6) <th>
scope, abbr, id 속성을 선언한다. abbr과 id속성은 선택적으로 선언한다.
표에 셀 제목이 명시되지 않은 경우에도 th 요소를 선언하여 의미에 맞는 제목을 명시한다.
7) <tbody>
표 본문을 그루핑하기 위해 선언한다. 테이블의 본문(body)이 하나이고 <thead> 나 <tfoot>이 없을 경우 생략할 수 있다.
참조(구체적인 내용을 알고 싶다면?)
