텍스트 에디터 설치 및 웹 사이트 만들기
1. 텍스트 에디터 설치
코드작성, 자동완성 등의 간단한 기능을 수행하는 프로그램이다. Sublime Text, Atom, VS Code, Notepad ++ 등 다양한 프로그램 중에서 원하는 프로그램을 골라 설치해서 사용하면 된다. 여기선 Sublime Text 3을 사용한다.
https://code.visualstudio.com/
2. Sublime Text 3 실행 및 세팅
Sublime Text를 실행하면 다음과 같은 화면을 볼 수 있다. 화면의 우측 하단에 Plain Text를 클릭하고 HTML을 선택하면 기본적인 세팅은 끝이 난다.
3. 간단하게 웹 페이지 만들기
html 이라고 적은 뒤에 키보드의 Tab을 클릭하면 기본적인 세팅을 볼 수 있다.
<!DOCTYPE html> : 모든 HTML 문서는 <!DOCTYPE> 선언으로 시작된다. 이 선언은 HTML의 태그가 아니라 우리가 무슨 타입의 다큐먼트를 사용할지 알려주는 정보로 사용된다. HTML 5에서는 <!DOCTYPE html> 이라고 선언하면 된다.
<html>, </html> : <> 안에 들어있는 요소들을 HTML의 태그라고 부른다. <html> 태그는 HTML 다큐먼트의 루트 요소를 나타낸다. 다른 태그들은 모두 <html> 태그 안에 있어야 하기 때문이다. 태그들은 </OOO>를 통해 태그의 끝을 정한다.
<head>, </head> : <head> 태그는 <html> 태그와 <body> 태그 사이에 있는 태그로 메타데이터를 담고 있다. <head> 태그 안에 <title> 태그가 들어가 웹 페이지의 제목을 설정할 수 있다.
<body>, </body> : <body> 태그는 이름 그대로 다큐먼트의 몸을 뜻한다. HTML 다큐먼트의 모든 콘텐츠를 담을 수 있다.
이제 <title> 태그 안에 First Webpage를 <body> 태그 안에 Hello there를 사용하고 파일의 이름을 index.html로 저장을 해준다. 그리고 파일을 실행하면 다음과 같은 화면을 볼 수 있다.
