1. HTML의 부모, 자식, 형제 관계
HTML은 태그를 사용할 때 부모, 자식, 형제라고 하는 관계가 있다.
예를 들어 확인해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Div 태그</title>
</head>
<body>
<div> <!--h1, h2태그의 부모 태그-->
<h1>부모안에 있는 자식이자 형제 태그</h1> <!--div 태그의 자식태그이자 h2 태그와 형제태그-->
<h2>부모안에 있는 자식이자 형제 태그</h2> <!--div 태그의 자식태그이자 h1 태그와 형제태그-->
</div>
</body>
</html>코드에서 보면 <html> 태그 안에 <head> 태그, <body> 태그가 있다. 이때 <head> 태그와 <body> 태그는
<html>의 자식 태그가 된다. 반대로 <html> 태그는 <head> 태그와 <body> 태그의 부모가 된다.
<body> 태그 밑 <div> 태그를 한번 확인해보자.
<div> 태그의 2명의 자식을 가지고 있다.
<h1> 태그, <h2> 태그는 둘이 형제이자 <div>태그의 자식 관계이다.
<h1> 태그,
2. 줄 바꿈과 들여 쓰기
HTML 문서에 태그를 작성할 때 되도록 줄 바꿈과 들여 쓰기를 하는 것이 좋다. 이것은 강제는 아니지만 암묵적으로 지키는 규칙이라고 생각하면 된다. 줄 바꿈과 들여 쓰기를 하지 않을 경우 코드의 가독성이 매우 안 좋아진다.
HTML의 문서는 가독성이 좋아야 하며, 나중에 코드를 확인하거나 수정이 필요할 때 줄 바꿈과 들여 쓰기가 되어있을 경우
쉽게 파악하여 코드 수정이 용이하다.
또한, 위에 설명한 것처럼 부모, 자식, 형제 더 나아가는 조상 관계의 구조를 파악하기 쉽다.
아래의 예를 들어줄 바꿈과 들여 쓰기가 되지 않는 코드를 한번 확인해보자.
<!DOCTYPE html><html lang="ko"><head><title>Div 태그</title></head><body><div>
<!--h1, h2태그의 부모 태그--><h1>부모안에 있는 자식이자 형제 태그</h1> <!--div 태그의 자식태그이자 h2 태그와 형제태그--><h2>부모안에 있는 자식이자 형제 태그</h2> <!--div 태그의 자식태그이자 h1 태그와 형제태그-->
</div></body></html>
나가 코드 수정이 필요한데 만약, 줄 바꿈과 들여쓰기가 되지 않은 코드를 만났다고 해보자.
보자마자 이게 무슨....
부모, 자식, 형제 관계 파악도 안 될 것이며, 가독성 자체도 완전 최악일 것이다.
따라서 코드의 가독성을 위하여 우리는 줄 바꿈과 들여 쓰기를 적절하게 잘 사용하도록 하자.
긴 글 읽어주셔서 감사합니다.
부족한 설명은 댓글로 달아주시면 추가하도록 하겠습니다.
감사합니다. :)
- 오늘 내 자신을 3가지 칭찬을 해보자.
'Front-end Developer > HTML' 카테고리의 다른 글
| 8. [HTML] <a> 태그, <img> 태그를 사용하여 링크와 이미지 넣는방법 (0) | 2022.10.24 |
|---|---|
| 7. HTML 목록 만드는 태그 <ul>,<ol>,<li>,<dl> (0) | 2022.10.23 |
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
| 3. HTML의 기본 구조 (html, meta, head, body) (0) | 2022.10.22 |
