HTML5 편집기 '비주얼 스튜디오 코드' 맥북에서 시작하기 (HTML 입문자)

카테고리 없음

by ˚。 2020. 3. 4. 17:00

안녕하세요. HTML 공부를 시작한 도란입니다. HTML 공부를 시작하기 위해서는, HTML 코드를 키보드로 쳐보고, 웹 화면에 출력을 해봐야 합니다. 예전에는 메모장에서 적으며 공부를 했다고 하는데요, 지금은 원하는 태그를 입력하면 자동 완성해주는 기증이 있는 코드 편집기들이 있습니다. 그중에서도 제가 공부 중인 책에서 소개한 Visual Studio Code (비주얼 스튜디오 코드)라는 프로그램을 알려드리려고 합니다. 줄여서 VS code라고도 합니다.

제가 사용하고있는 2018 맥북 프로 13인치를 기준으로 설명하는 점 양해 부탁드립니다.

참고로, 이 '비주얼스튜디오코드'라는 프로그램은 무료 프로그램이며 macOS, Linux, Windows 에서 모두 사용할 수 있습니다. 태그 자동완성이 잘 되어있어 초보자도 쉽게 사용할 수 있습니다.

비주얼 스튜디오 코드(VS code) 프로그램 다운로드

아래 링크를 접속합니다.

비주얼 스튜디오 코드 홈페이지 다운로드 링크

그러면 다음과 같은 화면이 나오고, 메인화면에 Download를 눌러서 다운로드합니다.

다운로드 버튼은 우측 상단에도 있고 왼쪽 중간에도 파란색으로 있습니다. 아무거나 눌러서 다운로드하면 됩니다.

비주얼 스튜디오 코드 시작하기

다운로드한 아이콘을 눌러주면 별다른 설치 필요 없이 바로 시작합니다. 아래 화면이 바로 VS code의 첫 화면입니다.

왼쪽 사진처럼 [파일] - [새로운 파일]을 열어도 되고, 위에 빨간색 화살표처럼 New File을 열어서 새문서를 열어줍니다.

그러면 아무것도 없는 빈 화면이 나오게 되는데요, 새문서를 열자마자 바로 저장부터 해주어야 합니다. 맥북 저장 단축키는 [command] + [s]입니다. 그러면 아래와 같은 안내문이 나옵니다.

키스트로크 받는 중
'Visual Studio Code'이(가) 특정 응용 프로그램의 키스트로크를 받으려고 합니다.
시스템 환경설정에 있는 보안 및 개인 정보 보호 환경설정에서 이 응용 프로그램에 접근 권한을 부여하십시오.

VS code가 내 컴퓨터에 접근할 수 있도록 허용해야 하는 부분이기 때문에, 당황하지 말고 바로 [시스템 환경설정 열기]를 눌러줍니다. 그리고 아래와 그림과 같은 순서로 눌러줍니다.

1. 잠겨있는 자물쇠를 눌러서 열어준다.
2. VS code 체크박스에 체크를 해준다.
3. 열어준 좌물쇠를 다시 잠가준다.
4. 지금 종료를 누른다.

이렇게 하고 다시 비주얼 스튜디오 코드 VS code를 재실행시켜줍니다. 그리고 이제 진짜 새 문서 저장을 해줍니다. 아래와 같이 저장을 해줄 때에는 반드시 확장자 이름을. html이라고 해주어야 합니다. (그래야 웹이 이 문서를 읽을 수 있어요)

저는 제 맘대로 firsthtml.html이라고 해주었어요. 반드시 영어로 문서를 저장해주세요.

이렇게 HTML5 공부 준비를 마쳤습니다. 앞으로 새문서에 태그나 텍스트를 적어보면서 틈틈이 [command]+[s]를 눌러서 저장해주어야 합니다.

VS code로 텍스트 입력하기

준비를 마쳤으니 이제 가장 기본 중에 기본인 텍스트를 나타나게 해 보겠습니다. 첫 줄에 html이라는 글자를 쓰자마자 아래와 같이 자동완성 문자가 나옵니다.

htm까지 밖에 안 썼는데 이렇게 코드 자동완성으로 나왔네요. 바로 이 점이 초보자에게 비주얼 스튜디오 코드를 추천하는 이유라고 합니다. 그리고 자동완성되어 나온 것들 중에 두 번째에 있는 [html:5]를 선택하고 엔터를 누릅니다. 그러면 아래와 같은 텍스트들이 주르륵 나옵니다. 훗 뭔가 있어 보이는 듯

모르는 영어가 나왔다고 해서 당황하지 말고 노란색으로 칠해준 부분을 삭제해줍니다.

그리고 아래와 같이 <body> </body> 사이에 출력해줄 텍스트를 적어줍니다. 텍스트는 책에 나와있는 것과 똑같이 hello html5...!라고 적어줍니다.

<h1>hello html5...!</h1>

앞뒤에 붙어있는 <h1></h1>는 헤드라인 1번 굵기로 적으라는 태그입니다. 이걸 적지 않아도 상관없습니다. 그리고 저장버튼을 눌러줍니다.

이제 저장된 파일을 웹브라우저 크롬을 이용해서 테스트를 해보겠습니다.

크롬 브라우저에 글자 출력하기

아래와 같이 Finder를 열어 저장되어 있는 파일의 위치를 찾아줍니다.

더블클릭해서 파일을 열어도 되지만, 보통 맥북의 기본 브라우저는 Safari이기 때문에 크롬으로 열기 위해서는[두 손가락으로 파일 누르기] - [다음으로 열기] - [크롬]을 선택해서 열어줍니다. 그럼 아래와 같은 화면이 뜨게 됩니다. 짜잔

이렇게 첫 번째 텍스트 출력을 성공했습니다.

마치며

아주 사소한 일이지만, 저에게는 HTML과 CSS라는 분야의 공부를 시작했음을 알리는 글자이기 때문에 굉장히 남다른 기분입니다. 그리고 현재의 목표는 HTML5의 태그 부분을 빠르게 훑어보고, CSS분야에 시간을 투자할 생각입니다. 공부를 언제 마칠 수 있을지 모르겠지만, 그다음에는 정적 페이지를 동적 페이지로 만들어줄 수 있다는 Script를 공부해보고 싶네요. 이제야 시작인데 마음은 이미 저 멀리 가있네요. 컴퓨터 쪽과는 전혀 다른 삶을 살아온 제가 티스토리 블로그를 통해 새로운 공부를 시작하게 되어 마음이 설렙니다.