안녕하세요.
이전 포스팅(간단한 홈페이지 만들기 - 03.간단한 웹 페이지 만들기)에서는 간단한 HTML 태그를 작성하여 웹 서버에 업로드하는 방법에 대해 다뤄보았습니다.
이번 포스팅에서는 기본적인 HTML 태그에 대한 설명을 하고자 합니다. 해당 포스팅의 카테고리에서는 빠르게 하나의 홈페이지를 만드는 과정을 다루기 때문에 자세한 HTML 태그에 대한 설명은 없습니다. 만약 HTML 태그를 완벽하게 이해하기 원하신다면 별도의 도서나 자료를 참고 하도록해주세요.
C언어나 Java, 파이썬 등의 프로그래밍 개발 경험이 있으신 분들은 비쥬얼 스튜디오, 이클리스와 같은 IDE(Integrated Development Environment, 통합 개발 환경)에 대해 들어보신적이 있을겁니다. HTML 또한 이러한 IDE가 다양하게 존재합니다. 해당 포스팅에서는 무료이고 간단한 서브라임(Sublime)을 이용하도록 하겠습니다. 사실 서브라임을 IDE라고 부르기는 힘들고, 개발에 적합한 텍스트 에디터 정도로 이해하셔도 될 듯 합니다. IDE는 개인적으로 편한게 있다면 그걸 사용하면 됩니다. 개인적으로 사용하는 IDE가 있으신 분들은 "서브라임 텍스트 설치"는 건너 띄고 다음 내용 부터 보시면 됩니다.
서브라임 텍스트 (Sublime Text) 설치 및 사용
우선 서브라임 텍스트 인스톨 파일을 다운로드(서브라임 다운로드 링크) 하여, 서브라임 텍스트를 설치 해주세요. 설치 과정에서의 특별히 어려운 내용이 없어 자세한 설명은 넘어가도록 하겠습니다.
서브라임 텍스트는 가벼우면서도 굉장히 많은 기능을 제공합니다. 하지만 해당 포스팅에서는 다루기에 부적절하다 생각하여 내용은 생략합니다.
기초 HTML 태그 레이아웃
이전 포스팅(간단한 홈페이지 만들기 - 03.간단한 웹 페이지 만들기)에서 다루었던 간단한 태그입니다.
<!DOCTYPE html> → 1.
<html lang="ko"> → 2.
<head> → 3.
<meta charset="utf-8"> → 3-1.
<title>Hello First Web Page</title> → 3-2.
</head>
<body> → 4.
<div> → 5.
<h1>Hello! This is my first web page</h1>
</div>
</body>
</html>
2. 웹 페이지에서 주로 사용하는 언어 명시
- ko(한국어) 외에 영어, 프랑스어 등 다양한 언어를 선택 할 수 있습니다.
- HTML 태그는 <html> 태그로 시작하여 </html> 태그로 끝이 납니다. 즉 <html> ~ </html> 에서 '~' 부분에 다양한 HTML 태그를 작성하면 됩니다.
3. <head> 태그
- <head> 태그로 시작하여 </head> 태그로 끝이 나며, 웹 페이지의 내용이 아니라 웹 페이지의 메타 정보 입력, 제목, 외부 CSS 링크, 외부 JavaScript 파일 링크 등의 이용됩니다.
3.1. <meta charset=' '>
- 해당 웹 페이지에서 사용되는 문자 인코딩을 선언하며, 대표적으로 utf-8과 euc-kr이 있습니다.
3.2. <title> 태그
- 해당 웹 페이지(문서)의 제목
- <title>태그로 시작하여 </title> 태그로 끝
- 보통 웹 브라우저의 탭에 출력되는 텍스트
4. <body> 태그
- 웹 페이지(문서)의 내용 부분
- 웹 브라우저의 실제로 출력되는 부분
- <body> 태그로 시작하여 </body> 태그로 끝
5. <div> 태그
- 사실상 웹 페이지에서 제일 중요한 태그라고 생각합니다. <div> 태그는 웹 페이지에서 영역을 나눠주는 역할을 합니다.
- <div> 태그에 대한 기본적인 지식은 있어야 해당 포스팅을 따라 올 수 있습니다.
이번 포스팅에서는 HTML 태그 에디터(서브라임)와 매우 기초적인 HTML 태그에 대해 다뤄보았습니다. 반드시 HTML 태그에 대해서는 개인적으로도 학습을 병행해주시면 좋습니다. 하지만 시간이 충분치 않은 경우 추후 포스팅의 내용을 쭉 따라해보신 후 홈페이지를 만드는 전체적인 과정에 대한 감을 잡고, 그 후에 필요한 부분들을 따로 공부하는 것도 좋은 방법이라고 생각합니다.
다음 포스팅에서는 웹 서버에 그누보드5(회원관리, 게시판 통합 관리 오픈소스)를 설치하는 방벙에 대해서 다루도록 하겠습니다.
(저는 홈페이지 만들기를 아르바이트로 했을 뿐, 전문적으로 공부해 본 적이 없기에 일부 용어나 기술 설명이 틀릴 수 있습니다. 혹 이런 부분이 발견된다면 가차 없이 댓글로 남겨주시면 감사하겠습니다.)
'홈페이지 만들기 > 기본편' 카테고리의 다른 글
| 간단한 홈페이지 만들기 - 06.그누보드5 게시판 생성(기본설정) (11) | 2017.03.01 |
|---|---|
| 간단한 홈페이지 만들기 - 05.그누보드5 설명 및 설치하기 (3) | 2017.02.26 |
| 간단한 홈페이지 만들기 - 03.간단한 웹 페이지 만들기 (2) | 2017.02.11 |
| 간단한 홈페이지 만들기 - 02.FTP 서버 접속하기 (2) | 2017.02.11 |
| 간단한 홈페이지 만들기 - 01.웹(서버) 호스팅 (1) | 2017.02.11 |
