이 책의 실습을 진행하기 위해서는 다음의 두 가지 프로그램이 필요합니다.
① 비주얼 스튜디오 코드(Visual Studio Code) : 책의 실습 예제를 작성하고 파일로 저장
② 크롬 브라우저(Chrome Browser) : 저장된 HTML 문서 파일을 실행하여 결과를 확인
이 책에서 실습하는 HTML, CSS, 자바스크립트 예제 파일들을 작성하고 파일에 저장하는 데 사용되는 비주얼 스튜디오 코드의 설치 파일을 다운로드 받기 위해 웹 브라우저에서 다음의 URL 주소를 입력합니다.
위 그림에서 'Download for Windows' 버튼을 클릭하여 설치 파일을 다운로드 받아서 실행시킨 다음, 설치 과정 중에 나타나는 창들의 설정을 기본으로 두고 설치 화면 안내에 따라 버튼을 몇 번 클릭하면 쉽게 프로그램이 설치됩니다. 비주얼 스튜디오 코드 프로그램 설치가 완료되면 다음 그림과 같은 화면이 나타납니다.
위 화면에서 '종료' 버튼을 클릭하면 창이 닫히면서 다음 그림에서와 같이 비주얼 스튜디오 코드 메인 화면이 나타납니다.
실습 HTML 파일을 직접 비주얼 스튜디오 코드에서 실행하기 위해 화면 좌측의 빨간색 박스로 표시된 확장 프로그램 아이콘을 클릭하여 'live server'를 설치합니다.
비주얼 스튜디오 코드로 작성한 HTML 문서 파일을 실행하는데는 구글의 크롬 브라우저를 사용합니다. 크롬 브라우저가 컴퓨터에 설치되어 있지 않은 독자는 현재 사용 중인 웹 브라우저의 주소 창에 다음의 URL 주소를 입력하여 크롬 사이트에 접속한다.
다음 그림의 크롬 브라우저 설치 화면에서 빨간색 박스로 표시된 'Chrome 다운로드' 버튼을 클릭하여 크롬 브라우저를 설치합니다. 크롬 브라우저를 설치하는 과정은 아주 간단하기 때문에 설치 방법에 대한 설명은 생략합니다.
먼저 비주얼 스튜디오 코드 메인 화면 메뉴에서 File > Open Folder를 선택하여 작업할 폴더를 선택합니다. 그 다음 새로운 HTML 문서를 작성하기 위해 New File 아이콘을 선택합니다. 파일명을 hello.html로 하고 다음의 내용을 키보드로 입력합니다.
입력이 완료되었으면 Ctrl + S를 눌러 작성한 내용을 hello.html 파일에 저장합니다. 위에서 작성한 내용 중에서 <html>, <head>, <body>, <p> 등을 HTML 태그라고 부르며 이에 대해서는 나중에 공부할 것입니다. 참고로 <p> 태그는 단락을 의미하는 ‘Paragraph’의 첫 글자를 따온것으로 웹 페이지에서 단락을 만들 때 사용합니다.
hello.html 파일을 크롬 브라우저에서 실행하기 위해서 먼저 윈도우 탐색기를 열어서 해당 파일을 찾습니다. 파일 이름 위에 오른쪽 마우스 버튼을 클릭한 다음 연결 프로그램 > Google Chrome을 선택합니다. 그러면 다음 그림에서와 같이 크롬 브라우저 화면이 열리면서 hello.html의 실행 결과가 나타납니다.