반응형
HTML 언어의 기본 구조
HTML은 element(요소), content(내용), tag(태그) 세가지로 구성됩니다. 이 중 태그는 opening tag(여는 태그), closing tag(닫는 태그)로 구분되구요.
<p>Hello World</p>
- element : <p>Hello World</p> 전체를 말합니다
- content : Hello World를 지칭합니다
- opening tag : <p>를 말합니다
- closing tag: </p>를 말합니다.
태그는 항상 꺽쇠 < >로 쓰고, 닫는 태그는 꺽쇠 앞에 / (슬래시)를 넣습니다.
HTML의 계층 구조
HTML 언어는 계층 구조를 지닙니다. 계층구조는 쉽게 말해 줄기에서 가지가 나오는 걸 말하는데요.
아래 코드를 보면서 설명해볼께요.
<body>
<div>
<h1>제목입니다</h1>
<p>컨텐츠입니다y</p>
</div>
</body>위의 코드는 <body> 아래에 <div>가 있고 <div> 하위에 <h1>, <p>가 있는 게 보입니다.
<body>와 <div> 관계를 부모 자식 관계라고 합니다. 그렇다면 <div>는 <h1>과 <p>의 부모가 되겠죠? <body>의 손자이기도 하구요.
들여쓰기를 하는게 특징인데요. 이는 코딩할 때 가독성을 높이기 위함이기도 하지만, 어떤 언어에서는 들여쓰기를 잘못하면 에러가 나는 경우도 있습니다.
들여쓰기는 스페이스 2칸 또는 4칸을 많이 쓰는데요. HTML은 2칸 들여쓰기가 많은 것 같아요.
지금까지 기본적인 HTML 구성을 알아보았습니다.
반응형
'HTML' 카테고리의 다른 글
| HTML <strong> 텍스트를 굵게 만들고 강조하는 태그 (0) | 2023.07.01 |
|---|---|
| HTML <div> 태그, 웹 페이지를 구조화하고 스타일을 입히다 (0) | 2023.06.30 |
| HTML article 태그, 웹 페이지 구성과 시멘틱 마크업 용도 (0) | 2023.06.21 |
| HTML meta viewport 반응형 웹페이지를 위한 필수 속성 (0) | 2023.06.20 |
| 웹 폼의 구조화와 접근성을 높이는 HTML legend 태그 (0) | 2023.06.11 |