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><html></li>
<li><head></li>
<li><body></li>
<li><ul></li>
<li><ol></li>
<li><li></li>
</ol>
</body>
위 두 코드는 각각 두 번째, 세 번째 페이지의 코드이다.
참고로 < 와 > 같이 특수 문자를 표현하기 위해선 다른 방법을 사용해야한다.
< : < , > : > 를 나타낸다.
이제 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>
실제로 main page 에 들어가 각 목록을 클릭하면 해당 페이지로 이동할 수 있다.
그렇다면 각 페이지에서 다시 main page 로 돌아가기 위한 코드도 작성해야 하지 않을까?
직접 해보길 바란다.
각 페이지의 <h1> 태그에 같은 방법으로 <a> 태그를 이용하면 된다.
정답은 아래 파일에 올려두겠다.
마무리
오늘은 HTML이 무엇인지, 기본 태그를 알아보았다.
이를 활용하여 간단한 HTML 소개 웹 페이지도 만들었다.
이 글은 HTML 이라는 언어를 맛보기 위한 글이므로 기본 문법이나 태그 등 자세한 정보 글은 따로 작성하겠다.
