1. 블록 요소와 인라인요소
블록요소
body 태그에서 사용되는 태그 중에서 웹브라우저의 공간 유무와 상관없이 줄바꿈되는 태그가 있다.
<hn> <p>태그가 그 예이고 이 태그로 작성한 코드를 “블록요소”라고 한다.
인라인요소
반대로 공간이 부족할 때만 줄 바꿈 되는 태그가 있다.
<a> <span>태그가 그 예이고 이 태그로 작성한 코드를 “인라인 요소”라고 한다.
2. 부모, 자식, 형제 관계
HTML은 태그를 사용할때 부모, 자식, 형제라고 하는 관계가 성립된다.
1.2 에서 공부한 HTML 기본구조 코드를 보면 html 태그 안에 head와 body태그가 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>나의 첫번째 웹페이지</p>
</body>
</html>
구조상으로 관계를 나누어 html 태그는 head와 body 태그의 부모, head와 body 태그는 html태그의 자식이라고 할 수 있다.
또한 head와 body는 서로 형제 관계라고 할 수 있다.
나머지 태그도 마찬가지
따러서 meta태그는 head태그과 부모자식 관계이다. meta태그와 title태그는 서로 형제 관계이다.
추가로 부모, 자식, 형제 이외로 조상과 후손 관계가 있다.
부모의 부모 : 조상
자식의 자식 : 후손
3. 줄 바꿈과 들여쓰기
HTML 문서에 태그를 작성할때는 되도록 줄 바꿈과 들여쓰기를 하는 것이 좋다.
필수는 아니고 암묵적인 규칙이라고 한다.
이유 : 코드의 가독성을 위해서다
이걸 잘해야 부모, 자식, 형제 관계에 대한 분석이 빠르게 이루어진다.
줄바꿈, 들여쓰기를 안했을때 정말 토나온다
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv=" X-UA-C
ompatible" content = "IE=edge"><meta name="viewport" content="width=device-width, initi
al-scale=1.0"><title>Document</title></head><body><p>나의 첫번째 웹페이지</p></body></html>
'👨💻 Programming > HTML' 카테고리의 다른 글
| 2.3 HTML 목록 만들기 (0) | 2024.02.26 |
|---|---|
| 2.2 HTML 그룹짓기 (0) | 2024.02.26 |
| 2.1 HTML 태그로 텍스트 작성하기 (0) | 2024.02.25 |
| 1.2 HTML의 기본구조 (0) | 2024.02.25 |
| 1.1 HTML의 기본 구성 요소 (0) | 2024.02.24 |
