[HTML5] - Basic Tags — 미 개발 구역

HTML5
Tag
1. Main page
2. Sub Page
마무리

HTML5

오늘은 'HTML' 이라는 프로그래밍 언어의 기초에 대해 공부했다.

HTML (Hypertext Markup Language) 는 웹 페이지의 틀을 만드는 아주 중요한 마크업 언어이다.

현재는 'HTML5' 가 웹 표준 언어로 선정되어있다.

여기서 마크업 언어(Markup Language) 란 '태그(Tag)' 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. HTML에서 태그는 굉장히 중요한 개념이다.

태그에 대해 쉽게 설명하자면 뜻 그대로 어떠한 표시를 하기 위한 요소이다.

글씨의 색깔, 모양, 크기 등 특정 부분의 특성을 나타내준다.

개발 환경은 메모장에서 해도 되지만, VS code에서 진행했다.

오늘 만들어볼 것은 간단한 HTML 설명 웹 페이지 이다.

먼저 '태그' 에 대해 알아보고, HTML의 기본 틀에 대해 공부해보자.

Tag

HTML에는 수 많은 태그가 존재하는데, 먼저 태그의 사용법과 어떤 것이 있는지 알아보자.

<TAG> INFORMATION <TAG>

아주 간단하다. <TAG> 로 시작하여 </TAG> 로 끝난다. 사이에는 정보를 넣어주면 끝이다.

그렇다면 가장 기본적인 태그에는 어떠한 것들이 있는지 알아보자.

1. <!DOGTYPE html> : 해당 웹 문서의 유형을 HTML로 지정한다.

2. <html lang="ko"> : 문서를 HTML로 시작하며, 기본언어는 한국어로 설정한다.

3. <head> </head> : 해당 웹 문서의 주요 정보를 입력한다. 화면 출력 안됨.

4. <body> </body> : 해당 웹 문서의 내용을 입력한다. 화면 출력 됨.

5. <meta> : 메타 데이터를 입력한다. 주로 인코딩 방식을 설정한다.

6. <title> : 해당 웹 문서의 제목을 입력한다.

위의 태그들이 HTML에서 필요한 가장 필수적인 태그들이다.

그렇다면 이 태그들을 활용하여 HTML의 기본 구조에 대해 알아보자.

<html>
    <head>
    	<title> </title>
    </head>
    <body>
    </body>
</html>

기본적인 틀은 <html> </html> 태그 안에 <head> , <body> 가 들어가있는 형태이다.

사실 HTML을 효율적으로 이용하려면 태그를 많이 알아야 한다.

그러나 외울 필요는 없다고 생각한다. 구글링하면 다 나오기 때문이다.

따라서 필요한 부분은 찾아보면서 간단한 웹 페이지를 만들어보도록 하겠다.

1. Main page

먼저 가장 메인이 되는 페이지를 만들어보자.

VS code 를 이용하였다. <파일> -> <새 텍스트 파일> -> <언어:HTML> 로 설정하자.

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
    <h1><strong>Main Page</strong></h1>
</head>

<body>
    <ol>
        <li>What is HTML</li>
        <li>How to use?</li>
        <li>Tags</li>
    </ol>
</body>

하나씩 살펴보자.

1. <!DOCTYPE html> : html 문서라는 의미이다.

2. <meta charset="UTF-8"> : 기본 인코딩은 UTF-8 방식을 따른다.

3. 간단하게 head 부분에 제목을 넣었다. 'Main Page'

여기서 <ol> 태그와 <li> 태그가 등장한다. 간단하게 살펴보자.

이는 목록을 만드는 태그로, 크게 세 종류로 나눌 수 있다.

<ul> </ul> : 'unorder list' 의 약자, 순서 없는 목록 생성
<ol> </ol> : 'order list' 의 약자, 순서 있는 목록 생성
<dl> </dl> : 'definition list' 의 약자, 용어 설명 목록 생성
<li> </li> : 'list item' 의 약자, 목록 안의 내용을 나열

이제 'index.html' 이라는 파일로 저장하고, 페이지를 열어보자.

아직 간단하지만, 우리가 원하는 목록은 모두 만들었다.

이제 각 항목에 링크를 연결해보자.

여기서 <a href=" "> 라는 태그를 사용하면 다른 html 파일과 연결할 수 있다.

따라서 새로운 html 파일 3개를 더 만들어야 한다.

2. Sub Page

먼저 HTML 이 무엇인지 설명하는 'What is HTML' 페이지를 만들어보자.

//first page

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
    <h1><strong>What is HTML?</strong></h1>
</head>

<body>
    <p>웹사이트의 모습을 기술하기 위한 마크업 언어.<br></p>

    프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함한다.<br>
    보면 알겠지만 애초에 이름 HTML의 ML이 마크업 언어라는 뜻이다. 웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자가 바로 이 언어로 작성된 문서다.<br>
    
    <p>최초 제안자는 CERN의 물리학자 티머시 J. 버너스리이다. URL, HTTP, WWW의 전신인 Enquire 등도 그가 세트로 개발하고 제안했다.<br> 
    TCP/IP 통신규약을 만든 빈턴 G. 서프(Vinton Gray Cerf)와 함께 인터넷의 아버지로 불린다.<br></p>
</body>

여기서도 몇 가지 새로운 태그들이 나온다.

HTML에 관한 내용은 나무위키에서 그대로 복붙해왔다.

<p> </p> : 단락을 바꿀 때 사용한다.
<br> : 문장의 끝에 작성하며 줄바꿈할 때 사용한다.

내용만 써버리면 굉장히 지저분하기 때문에 단락 나눔과 줄바꿈을 어느정도 해주었다.

이런 방식으로 두 번째, 세 번째 페이지도 비슷하게 만들어주자.

//secondpage

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
    <h1><strong>How to use?</strong></h1>
</head>

<body>
    <p>html은 태그로 이루어져 있으며, 모든 내용은 태그로 감싸진다.<br>
    따라서 기본적인 구조에 맞추어 원하는 내용을 작성하면 된다.</p>
</body>

//third page

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
    <h1><strong>Tags</strong></h1>
</head>

<body>
    <ol>
        <li>&lthtml&gt</li>
        <li>&lthead&gt</li>
        <li>&ltbody&gt</li>
        <li>&ltul&gt</li>
        <li>&ltol&gt</li>
        <li>&ltli&gt</li>
    </ol>
</body>

위 두 코드는 각각 두 번째, 세 번째 페이지의 코드이다.

참고로 < 와 > 같이 특수 문자를 표현하기 위해선 다른 방법을 사용해야한다.

&lt : < , &gt : > 를 나타낸다.

이제 index.html 에 다른 페이지를 모두 연결해주자.

//main page

<!DOCTYPE html>
<meta charset="UTF-8">

<head>
    <h1><strong>Main Page</strong></h1>
</head>

<body>
    <ol>
        <li><a href="firstpage.html">What is HTML</a></li>
        <li><a href="secondpage.html">How to use?</a></li>
        <li><a href="thirdpage.html">Tags</a></li>
    </ol>
</body>