[HTML] HTML 문서 구조

안녕하세요.

 

오늘은 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

이 글을 공유하기

댓글

Designed by JB FACTORY