[HTML] 초보도 따라하는 HTML - 1편 (HTML 정의 & 파일 생성)

 

HTML이란?

 

• Hyper Text Markup Language의 약어
• 웹 페이지를 만들 때 사용되는 마크업 언어

 

Hyper Text란?

 

• 텍스트 안(하이퍼 링크)에 다른 문서, 이미지, 오디오 등의 다른 매체로 연결될 수 있는 텍스트
• 기존의 책과 같은 문서는 한 문장이 다음 문장과 연결되거나, 현재 페이지가 다음 페이지와 연결되는 선형적 구조
• 하이퍼 텍스트(Hyper Text)는 각각의 텍스트 요소들이 서로 링크로 연결되어 있는데
• 사용자는 이 링크를 통해 임의의 순서로 문서 내의 다른 부분으로 비순차적으로 이동할 수 있음

출처: 위키백과

 

위의 사진이 하이퍼 텍스트에 대해 가장 잘 표현한 그림입니다.

 

마크업 언어(Markup Language)란?

 

• 태그 등을 이용해 문서의 구조와 서식을 정의하는 언어

즉, HTML은 텍스트 안에 다른 매체(웹 페이지)로 이동할 수 있게 해 주면서,
텍스트 기반으로 웹페이지의 구조를 설명하는 데에 사용되는 마크업 언어입니다. 

HTML은 프로그래밍 언어??

 

HTML이 프로그래밍 언어인지 아닌지 고민하는 AI

 

HTMl은 프로그래밍 언어가 아니며, 프로그래밍 언어와는 사용 목적이 다릅니다.

	HTML	프로그래밍 언어
명령 실행 능력	X	O
변수 및 함수	X	O (변수를 사용해 데이터 저장 및 함수를 통한 기능 정의)
실행 방식	웹 브라우저에서 해석 및 표시	컴퓨터에서 실행
목적	웹 페이지 구조 및 콘텐츠 정의	데이터 처리 및 알고리즘 실행 등...

 

HTML 요소

 

출처: TCP School

 

• 태그, 속성, 내용으로 구성
• 태그는 일반적으로 시작 & 종료 태그로 구성되며, 종료 태그가 없는 경우도 있음
• 속성은 HTML 요소에 추가 정보를 제공하며, 속성명 & 속성 값으로 이루어짐 
• 내용은 웹 페이지에 표시되는 콘텐츠를 의미하며, 태그 사이에 위치

HTML 문서 만들기

 

HTML에 대한 설명은 뒤로 하고, VSCode를 사용해 HTML 문서를 만들어 보겠습니다.

 

* 만약 VSCode가 설치되어 있지 않다면 아래의 글을 참조하시길 바랍니다. 

https://nobase-coding-diary.tistory.com/9

[Visual Studio Code] 초보도 쉽게 할 수 있는 VSCode 설치

---

1) 프로젝트 폴더 만들기

 

 

 

우선 원하는 경로에 파일들을 관리할 프로젝트 폴더를 하나 만들어 줍니다. 

 

2) VSCode 열고 생성한 폴더로 이동

 

 

"파일 > 폴더 열기"로 이동해, 아까 만든 "프로젝트" 폴더로 이동해 줍니다.

 

HTML 파일 생성 및 기본 구소 생성

 

 

"탐색기 > 새 파일"을 클릭한 후 "파일명.확장자"를 입력합니다.

여기서 확장자를 ".html"로 하면 HTML 문서가 만들어집니다.

 

HTML 문서

 

 

 

Visual Studio Code는 코드 단축 기능을 제공합니다.

아까 만든 HTML 문서에 !를 입력한 다음 "!"를 클릭하면 (or 방향키 아래 > Enter) 빠르게 HTML 기본 구조가 완성됩니다.