반응형
HTML 들여 쓰기 원칙
1) 포함관계 코드 블록은 2칸 들여 쓴다.
(예시 1)
<ul>
<li>공백 두개</li>
<li>위와 동일</li>
<li>이하 동문</li>
</ul>
(예시 2)
<table>
<tr>
<th>이름</th>
<th>설명</th>
</tr>
<tr>
<td>A 이름</td>
<td>A 설명</td>
</tr>
</table>2) 논리관계 코드 블록은 들여 쓰지 않는다.
그 대신 가로 빈 줄 하나 추가한다.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>포함관계 들여쓰기만 2칸 띄운다</title>
</head>
<body>
<h1>코드 블록은 들여쓰기 하지 않는다 </h1>
<h2>heading2</h2>
<p>heading1이하만 1칸 띄우고 heading2이하 문단 부터는 띄우지 않는다.</p>
</body>
</html>
3) 등호 주위에는 빈칸을 넣지 않는다.
<link rel="stylesheet" href="styles.css">4) CSS의 긴 속성과 속성 값은 한 쌍씩 줄 바꿈을 한다.
body {
background-color: DodgerBlue;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}- 선택자 뒤에 한 칸 띄운 후에 여는 중괄호를 놓는다.
- 두 칸 공백을 두고+속성:속성 값(각 쌍) 기재 후+세미콜론을 한다.
- 닫는 중괄호는 들여 쓰기 없이 마지막 줄에 홀로 배치한다.
5) 짧은 주석은 한 줄로 작성한다.
<!-- 나는 주석(comment)입니다 -->6) 긴 주석은 줄 바꿈을 하고, 각각 두 칸 들여 쓰기를 한다.
<!--
이것은 긴 주석인데 주석은 영어로 comment이고 그 뜻은 메모이다.
컴퓨터 언어란 인간과 컴퓨터간 언어인데 주석은 인간에게 하는 말이다.
-->7) 기타
- 탭(Tab) 키= 네 칸 공백이면 사용 금지하고, 두 칸 공백이면 사용한다.
- 이유 없이 빈칸과 빈 줄을 쓰지 않는다.
반응형
'코딩 > HTML' 카테고리의 다른 글
| pre 태그 줄바꿈 (0) | 2021.04.21 |
|---|---|
| 단락 태그, pre 태그 (1) | 2021.04.20 |
| 주석은 왜 달아야 할까? (0) | 2021.04.18 |
| Lorem ipsum (0) | 2021.04.18 |
| 메타 태그- 눈에 안 보이는 세계 (0) | 2021.04.11 |