HTML 코드 작성 규칙
대전제
- DTD를 제외한 모든 요소와 애트리뷰트는 소문자로 작성합니다.
<pre>Good!</pre>
<PRE>Bad..</PRE>- 애트리뷰트 값은 큰 따옴표로 묶습니다.
<div id="good"></div>
<div id='BAD'></div>- 아이디와 클래스의 속성 값은 숫자, 대문자, 특수문자로 시작할 수 없습니다.
- 애트리뷰트의 속성의 값은 숫자, 특수문자로 시작할 수 없으며, 대문자로는 시작할 수 있습니다.
아이디, 클래스
- 아이디는 소문자 카멜 표기법 을 사용합니다. 스타일 지정을 위해 사용하지 않으며, DOM 조작을 위해 사용해야 합니다.
주의 : 숫자, 대문자, 특수문자로 시작할 수 없습니다.
<div id="headerMenu">
...
</div>
<div id="layerPop-1">
...
</div>- 클래스는 아이디와 시각적 구분을 위해 하이픈 표기법 을 사용합니다.
<div class="slide-label n-3 back-swiper">
<div class="swiper-wrapper">
...
</div>
</div>들여쓰기(indent)
- body 태그 안의 모든 요소는 중첩의 깊이에 따라 1탭 들여 씁니다. 1탭의 크기는 공백 2칸입니다.(vscode 내에서 설정할 수도 있습니다.)
<body class="">
<div class="ly-wrapper">
<div class="ly-total-menu">
...
</div>빈 줄
- 그룹 되어있는 태그들을 구분하기 위하여 코드 간 1 줄의 빈 줄을 사용하는 경우가 있지만, 이 경우 주석 사용을 권장하며 빈 줄을 사용하지 않습니다.
<!-- bad -->
<div class="section-login">
<div class="login-before">
...
</div>주석
- 주석 기호와 내용 사이에는 반드시 공백이 한 칸 있어야 합니다. 시작 주석과 끝 주석 모두 작성하는 것을 권장합니다.
<!-- 2016.07.20 고객권리안내문 추가 -->
<ul class="policy">
<li><a href="#none">이용약관</a></li>
<li><a href="#none">개인정보처리방침</a></li>
<li><a href="#none">고객권리안내문</a></li>
<li><a href="#none">전자금융거래표준약관</a></li>
</ul>
<!--// 2016.07.20 객권리안내문 추가 -->공백 및 종료태그
- 태그 명과 애트리뷰트, 애트리뷰트와 애트리뷰트 사이에 한 개의 공백이 필요하며 한 개 이상의 공백은 사용하지 않습니다.
- HTML5를 사용한다면 닫는 기호를 생략해서 문서를 작성하고 XHTML을 사용한 경우는 닫는 기호를 반드시 사용합니다.
HTML5 가 아닌 경우, 종료 태그가 없는 태그의 닫는 규칙 앞에도 한 개의 공백이 필요합니다.
<label for="checkboxA-1" class="label">체크 레이블</label>
<input type="checkbox" name="CA-1" id="checkboxA-1" class="checkbox">
// Doctypes XHTML일 경우 종료 태그 앞에도 한 개의 공백이 들어갑니다.
<img src="/img/logo.png" alt="logo" />
// HTML
<input type="text">
// XHTML
<input type="text" />- 종료 태그가 없는 요소들
area,base, br, col, commend, embed, hr, img, input, keygen, link, meta, param, source
DOCTYPE
- 보통 DTD라고 표현을 하며, HTML 문서를 작성할 때 가장 먼저 선언하게 됩니다. HTML5를 기본적으로 사용합니다.
스타일 선언
- CSS는 외부 파일에 작성해 사용합니다. 이러한 작업 방식을 External Type 방식이라 명칭합니다.
/* External Type */
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">자바스크립트 선언
- 웹 브라우저가 렌더링을 마치기 전에 자바스크립트로 어떠한 동작을 실행해야 한다면 요소 안에 스크립트를 선언합니다.
- 이런 상황이 아니라면 태그 앞에 자바스크립트를 작성하는 것이 성능적인 측면에서 좋습니다.
// 브라우저가 랜더링을 마치기 전에 실행할 파일을 선언한다.
<head>
...
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
..
// 모든 콘텐츠가 로드되고 실행될 스크립트 파일을 선언한다.
<script src="js/main.js"></script>
</body>'Front-End > HTML,CSS' 카테고리의 다른 글
| 2021 Dev-Matching 웹 프론트엔드 개발자(하반기) : 쇼핑몰 SPA 구현 후기 (pushState, popState) (0) | 2022.03.03 |
|---|
최근댓글