본문 바로가기

CodeTech/HTML\CSS

HTML - 2 [파일 생성]

HTML 공부를 하기에 앞서 개발환경을 위해서 

 

Visual Studio Code를 다운로드 받는다.

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

위 사이트에 각 OS환경에 맞게 다운로드 후 설치 한다음 (모두 기본 옵션을 선택하여 진행)

작업을 진행할 폴더를 만들어준다.

위 폴더를 만들었으면 visual studio code로 들어가서

이렇게 드래그만해도 익스플로러에 해당 폴더가 뜨게 된다.

 

파일명과 폴더명을 짓는데도 규칙이 필요하다.

1. 작업할 폴더 안에 파일을 만들며 작업한다.

2. 파일, 폴더명은 소문자로 지어줘야한다. (한글도 안된다.)

 

VSC에서 작업을 진행하기 위해 폴더 안에 파일을 만들어보자

home.html 이라는 파일명에서 .html은 확장자이다. 파일의 타입을 구분해주므로 붙인다.

탭 옆의 동그라미 주목

위 그림에서 흰동그라미는 아직 저장을 하지 않았다는 표시이다.

저장을 한다면 사라진다.

 

이제 html파일을 만들었다.

html은 웹브라우저를 이해 시키기 위한 언어라고 하였다.

이러한 html파일을 열려면 웹브라우저에게 파일을 주면된다.

 

아까 만든파일로 들어가

해당파일을 웹브라우저로 열어주면

아래와 같이 html파일을 웹브라우저가 읽고 표현해준다.