02. DOIT - Visual Studio Code 설치 및 HTML 기본구성

Doit!-개인공부(HTML+CSS+자바스크립트)

02. DOIT - Visual Studio Code 설치 및 HTML 기본구성

코골면서 딩가딩가 2024. 3. 20. 13:12

✅ 00. Visual Studio Code 설치

설치방법

1. 주소창에 Visual Studio Code - Code Editing. Redefined 입력한다.

2. Visual Studio Code 설치하기.

3. Visual Studio Code 실행해 보기.

✅ 01. HTML 이란?

· HyperText Markup Language의 줄임말로써 웹 문서를 만드는 언어라고 할 수 있습니다.

·하이퍼텍스트(HyperText)는 문서를 서로 연결해 주는 링크를 의미합니다. 인터넷에서 링크만 클릭하면 다른 페이지나 사이트로 쉽게 연결 할 수 있는데 이렇게 HTML에는 서로 연결한다는 의미가 포함되어 있습니다.

· 마크업(Markup)이란 '표시하다'라는 뜻으로 웹 브라우저에 내용을 보여 주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미합니다.

✅ 02. HTML 기본구성

<!doctype html>

· 문서의 유형을 선택합니다. (HTML으로 설정되어있어 이 문서는 HTML이 동작됩니다.)

<HTML> ... </HTML>
· HTML 문서의 시작과 끝을 의미하는 태그로서 작성된 문서가 HTML을 사용한 문서임을 나타냅니다.
시작태그인 <HTML>은 앞쪽에, 종료태그인 </HTML>은 문서의 마지막에 두어 소스 전체를 감싸주어야합니다.
즉, <HTML> 태그 안에<HEAD>...</HEAD>와 <BODY>...</BODY> 태그가 차례로 위치하게 됩니다.

<HEAD> ... </HEAD>
· HEAD는 HTML 문서에 관한 기본 정보를 포함하고 있는 부분으로, 주로 문서의 제목, 제작자, 문서정보 등이 포함될 수 있습니다.

<TITLE> : 문서 상단의 제목 설정

<META> : 문서 정보 설정

<Script> : javascript 언어 등을 사용한 다양한 프로그램이 위치하는 공간이기도 합니다.

<Style> 문서의 장식

※ <HTML>, <HEAD>, <TITLE> 등의 태그를 적어주더라도 실제 화면상에는 아무런 내용이 출력되지 않습니다.

그럼 왜 이런 태그를 적어줘야 할까요?

쉽게 설명하면 HTML 태그를 읽는 웹브라우저에게 필요한 내용을 알려주는 역할을 합니다. 예를들면 <TITLE>는 화면에 출력되지는 않지만 아래와 같이 웹브라우저의 제목 표시줄에는 출력이 됩니다.

<BODY> ... </BODY>

HTML 문서의 본문에 해당하는 곳으로 실제 화면에 나타나는 내용을 기술하는 부분입니다. 즉, 사용자가 웹브라우저 상에 표현하고자 하는 내용들을 다양한 태그를 사용하여 구성하는 부분으로, 웹문서의 대부분을 차지하게 됩니다.

아래 그림은 에디트 플러스에서 새로운 HTML 페이지를 만들려고 할때 나오는 기본 화면입니다.

글자 관련 태그