반응형
HTML 코딩 컨벤션
HTML 코딩 컨벤션은 HTML 코드를 일관되게 작성하여 가독성을 높이고, 유지보수를 쉽게 하며, 협업을 원활하게 합니다. 아래는 HTML 코딩 컨벤션에 대한 자세한 설명입니다.
1. 들여쓰기(Indentation)
- 일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따르세요.
<!-- 좋은 예: 2칸 들여쓰기 --> <div> <p>Text</p> </div>
Text
2. 태그와 속성의 소문자 사용
- 소문자 사용: 태그와 속성 이름은 소문자로 작성합니다.
<!-- 좋은 예 --> <img src="image.jpg" alt="Example Image">
```
3. 속성 값에 따옴표 사용
- 속성 값 따옴표: 속성 값은 항상 따옴표로 감쌉니다.
<!-- 좋은 예 --> <input type="text" name="username">
4. 자체 닫는 태그(Self-closing Tags)
- 자체 닫는 태그: XHTML처럼 자체 닫는 태그는
/를 사용하지 않습니다.<!-- 좋은 예 --> <br> <img src="image.jpg" alt="Example Image">
```
5. 의미론적 태그 사용(Semantic HTML)
- 의미론적 태그: 가능한 의미론적 태그를 사용합니다.
<!-- 좋은 예 --> <header></header> <nav></nav> <section></section> <article></article> <footer></footer>
HTML 네이밍 컨벤션
HTML 네이밍 컨벤션은 태그, 클래스, ID를 명확하고 일관되게 작성하여 코드 가독성을 높입니다.
1. 클래스 이름(Class Names)
- 소문자와 하이픈: 소문자와 하이픈을 사용합니다.
<!-- 좋은 예 --> <div class="main-content"></div>
2. ID 이름(ID Names)
- 소문자와 하이픈: 소문자와 하이픈을 사용합니다.
<!-- 좋은 예 --> <div id="main-content"></div>
HTML 규칙
HTML 규칙은 코드 작성 시 따라야 할 기본 지침을 제공합니다.
1. 문서 유형 선언(Doctype Declaration)
- Doctype: 문서의 첫 번째 줄에 Doctype을 선언합니다.
<!DOCTYPE html> <html> <!-- 내용 --> </html>
2. 메타 데이터(Meta Data)
- 메타 태그: charset, viewport, description 등의 메타 태그를 포함합니다.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Example description"> <title>Document</title> </head>
3. 속성 순서(Attribute Order)
- 속성 순서: id, class, name, data-, src, for, type, href, title, alt, aria- 순으로 속성을 나열합니다.
<!-- 좋은 예 --> <input id="username" class="input-field" type="text" name="username" placeholder="Enter your username">
4. 주석(Comments)
- 주석: 코드의 중요한 부분이나 이해가 어려운 부분에는 주석을 작성합니다.
<!-- Main navigation bar --> <nav> <!-- Navigation links --> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> </ul> </nav>
5. 접근성(Accessibility)
- 접근성 고려: aria-* 속성 등을 사용하여 접근성을 향상시킵니다.
<button aria-label="Close">X</button>
반응형
'개발 규칙 및 환경설정' 카테고리의 다른 글
| [개발 규칙] Javascript 코딩컨벤션 (0) | 2024.07.05 |
|---|---|
| [환경설정] Javascript 환경설정 (0) | 2024.07.05 |
| [개발 규칙] 협업 규칙 (0) | 2024.06.08 |
| [개발 규칙] CSS 규칙 (0) | 2024.06.08 |
