[HTML] HTML 문서 구조
- 웹 프로그래밍/HTML
- 2020. 12. 6. 00:00
안녕하세요.
오늘은 HTML에서 문서의 구조를 알아 보려고 합니다.
먼저, 제가 오늘 예제 프로그램에서 사용되는 태그는 크게 아래와 같습니다.
- <html>
- <head>
- <body>
- <title>
- <h1>, <h2>
- <ol>
- <li>
- <ul>
지난 포스팅에 비해서 이제는 태그가 확실히 많아졌죠?ㅎㅎ
이제 위의 태그들을 이용해서 한 페이지를 작성할 때, 약속? 적으로 어떤 태그는 이렇게 쓰고, 또 다른 태그는 이 태그 안에 위치해야 하고 그런것들이 있는데요.
그 규칙을 토대로 예제 코드를 작성해 보도록 하겠습니다.
예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<title>HTML 제목 - 범범조조</title>
<meta charset="utf-8">
</head>
<body>
<h1>범범조조 블로그</h1>
<ol>
<li>카테고리1</li>
<li>카테고리2</li>
<li>카테고리3</li>
<li>카테고리4</li>
<li>카테고리5</li>
</ol>
<h2>카테고리1</h2>
<ul>
<li>맛집</li>
<li>데이트</li>
<li>일상</li>
<li>여행</li>
<li>리뷰</li>
</ul>
</body>
</html>
|
cs |
실행 결과
위와 같이 타이틀, 제목,
부제목 등과 같이 구조가 잡힌 상태로 웹 페이지에 내용이 보여지는 걸 확인하실 수 있습니다.
간단히 설명을 드리면, <head> 태그는 본문이 아닌 제목과 같은 내용을 담고 있는 태고로써 <head> 태그 안에는 <title> 태그를 포함시키는게 원칙? 입니다.
다음으로 실제 본문 내용은 <body> 태그를 중심으로 그 안에 나머지 내용을 포함시키는게 원칙이에요.
저도 처음이라서..적응하는데 시간은 들겠지만..이게 표준이라고 하니까 따르는게 맞겠죠?ㅎㅎ
이렇게 오늘은 기본 태그들을 이용하여 문서의 구조를 완성해 보았습니다.
HTML..알면 알수록 점점 알아야 할 것들이 늘어나에요..ㅎㅎ 파이팅 합시다!!
728x90
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] HTML p 태그 – 단락 (0) | 2020.12.08 |
|---|---|
| [HTML] HTML 기본 웹 페이지 만들기 (0) | 2020.12.07 |
| [HTML] HTML 태그를 이용한 중첩 (0) | 2020.12.05 |
| [HTML] HTML – 시작하기 (1장) (0) | 2020.12.04 |
| 웹 스토리지 (2) | 2016.04.29 |
