코딩/HTML

HTML 들여쓰기 방법

moodyblues 2021. 4. 19. 23:31

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