코딩 컨벤션이란?
컨벤션은 규칙 또는 규약이라는 뜻으로, 코딩 컨벤션은 코딩을 하는 프로그래머 사이의 일관된 규칙을 말한다. 특히 여러명이 협업하는 과정에서 이 컨벤션을 통해 코드 스타일을 유지할 수 있다. 또한, 가독성이 높아져 소스 코드를 처음 접하는 사람들도 빠르고 쉽게 이해할 수 있는데 도움이 된다. 코딩 컨벤션은 정확히 정해져 있는 것이 아니며, 팀원 간 약속을 하기 나름이므로 몇 가지 예시를 정리해보았다..
HTML 컨벤션 예시
1. 문서의 유형을 첫번째 줄에 선언한다.
<!DOCTYPE html>
2. 소문자 사용
- 대문자와 소문자를 혼합하면 깔끔해 보이지 않는다.
- 프로그래밍에서는 일반적으로 소문자를 사용한다.
- 소문자 사용이 더 쉽고 간편하다.
3. 모든 HTML 요소 닫기
닫는 태그가 없는 요소 이외에는 모두 태그를 닫아주어야 한다.
좋은 예: <p> 닫기 </p>
나쁜 예: <p> 안닫기
4. 소문자 속성 이름 사용
태그 작성도 소문자로 쓰는 것처럼, 태그 내 속성도 소문자로 작성해야 한다.
좋은 예: <input type="checkbox" checked />
나쁜 예: <input type="checkbox" CHECKED />
5. 태그 내 속성 값에는 따옴표
좋은 예: <a href="https://google.com" target="_blank"> 따옴표 </a>
나쁜 예: <a href="https://google.com" target=_blank> 따옴표 </a>
6. 이미지의 너비와 높이, alt 속성 지정하기
이미지를 표시할 수 없을 때 alt 속성의 값이 이미지를 표현하기 때문에 꼭 필요하다. img 태그 내 너비, 높이 값을 지정하는 경우, 브라우저가 이미지를 로드하기 전에 미리 공간을 점유하기 때문에 브라우저에 깜빡임이 줄어 든다.
<img src="test.png" alt="테스트" style="width:100px; height:140px"/>
7. 태그 내 공백과 등호
코드의 가독성을 위해 공백을 최소화한다.
좋은 예: <link rel="stylesheet" href="style.css"/>
나쁜 예: <link rel = "stylesheet" href = "style.css"/>
8. 긴 코드 라인 피하기
에디터를 사용할 때, 좌우로 스크롤을 해야 하지 않도록 코드를 간결하게 작성한다.
9. 빈 줄과 들여쓰기
- 특별한 이유 없이 빈 줄이나 들여쓰기를 추가하지 않는다.
- 탭 키 대신 스페이스바로 들여쓰기를 한다.
- 계층 관련한 태그는 들여쓰기를 꼭 한다.
10. <title> 요소 빠뜨리지 않기
페이지의 제목은 검색 엔진 최적화(SEO)에 매우 중요하다.
11. <html>, <body> 를 생략하지 않기
생략 시 구형 브라우저에서 오류가 발생할 수 있다.
12. <head>를 생략하지 않기
브라우저 이전 요소를 <head> 태그에 입력할 수 있다.
13. 빈 요소를 닫는 것은 선택사항
HTML에서는 빈 요소를 닫는 것은 선택사항이다. XML/XHTML 소프트웨어가 페이지에 엑세스 할 것으로 예상되는 경우에는 닫는 슬래시가 필요하므로 빈 요소에 닫는 슬래시를 사용해야 한다
<meta charset="utf-8" />
14. 웹 페이지의 언어를 선언하는 html lang 지정
검색 엔진과 브라우저 지원을 위해 사용하는 것이 좋다.
<!DOCTYPE html>
<html lang="en-us">
...
15. 메타 데이터
올바른 해석과 올바른 검색 엔진 색인 생성을 위해 HTML 문서에서 언어와 문자 인코딩을 정의해주어야 한다.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
16. 뷰 포트 설정
장치에 따라 보이는 영역을 지정한다. width=device-width는 장치의 화면 너비에 따라 페이지 너비를 설정하며, initial-scale=1.0 부분은 페이지가 처음 브라우저에 의해 로드된 초기의 확대/축소 레벨을 설정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
17. HTML 주석 사용하기
<!--
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
-->
18. 스타일 시트 사용
* 간단한 css 작성 시에는 한 줄로
p.intro {font-family:Verdana;font-size:16em;}
* 여러 줄 사용 시에
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
}
19. HTML 문서에서 자바스크립트 로드시 간단한 구문 사용
<script src="myscript.js">
20. 자바스크립트로 HTML 요소에 액세스하기
getElementById("demo").innerHTML = "Hello";
21. 소문자 파일 이름 사용하기
일부 웹 서버는 파일 이름에 대해 대소문자를 구분하기 때문에 소문자로 파일 이름을 통일하는 것이 좋다.
22. 파일 확장자
- HTML 파일의 확장자는 .html 또는 .htm 이어야 한다.
- CSS 파일의 확장자는 .css
- 자바스크립트 파일의 확장자는 .js
23. HTML 기본
서버는 기본 파일 이름을 index.html 인 파일을 불러오기 때문에, 메인 페이지 문서의 이름은 index.html로 지정하는 것이 좋다.
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
| HTML - 기본 SEO (0) | 2021.12.22 |
|---|---|
| HTML - 접근성 (0) | 2021.12.21 |
| HTML - 폼과 유효성 검사 (0) | 2021.12.15 |
| HTML - Semantic한 HTML 작성 (0) | 2021.12.13 |
| HTML - 기초 배우기 (0) | 2021.12.11 |