웹 브라우저와 웹 편집기 및 Visual studio code 설치와 기능
- HTML 소스를 직접입력해 보기 전에 준비해야 할 것들이 있다. 바로 웹 편집기이다. 이들의 종류를 알아보고 이 책에서 사용할 웹 브라우저 '크롬' 과 웹 편집기 '비주얼 스튜디오 코드'를 설치하고 다뤄보자.
웹 브라우저 종류와 HTML5 지원 정도
웹 브라우저는 웹 사이트를 둘러볼 때 사용하는 프로그램이면서 웹 편집기로 작서한 웹 문서를 화면에 표시해 주는 프로그램으로 현재 사용할 수 있는 웹 브라우저는 매우 다양하다. 대표적으로
- 크롬(구글) : 빠른 업데이트를 통해 HTML5 표준에 가장 발 빠르게 대응하고 있어 최근 가장 많이 사용되는 브라우저이다.
- 파이어 폭스(모질라) : 일반 사용자들보다 개발자들이 자주 사용하는 웹 브라우저로 개발 도구와부가 기능들이 뛰어나다.
웹 편집기의 종류
웹 문서를 만들때 HTML 태그를 입력하는 프로그램을 '웹 편집기'라고 한다. 웹 편집기에 HTML 소스를 입력하면 그 내용을 웹 브라우저로 읽는데 이 웹 편집기는 메모장이든 전문 편집기 프로그램이든 텍스트를 입력할 수 있는 프로그램이면 모두 가능하다.
비주얼 스튜디오 코드 설치하기
비주얼 스튜디오 코드는 https://code.visualstudio.com/ 에서 내려 받아 간단히 설치할 수 있다.
[Download]를 선택한 후 윈도우나 맥용을 프로그램을 선택하여 실행하면 된다.
라이브 서버 확장 설치하기
여기에서는 확장 중에 하나인 라이브 서버(Live Server)를 설치해 본다.라이브 서버는 우리가 앞으로 하게 될 여러 실습들의 결과를 편하게 확인할 수 있게 해줍니다.
1. 왼쪽 메뉴에서 확장 아이콘을 클릭하면 확장 기능 목록이 나타난다
Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다.
설치를 완료하면, 에디터 밑부분에 Prettier: ✔ 표시가 되어있다면 활성화된 것이다.
1) Extension Tab 에서 Prettier - Code Formatter 를 설치한다.
2) Ctrl + , 혹은 File > Preferences > Settings 를 선택해 설정에 진입한다.
설정 중 formatter 를 입력해 Editor: Default Formatter 를 찾아 Prettier - Code formatter를 선택한다.
Default Formatter를 Prettier로 설정한 다음 Format on Save 설정을 체크해주세요. 저장 이외에도 타이핑했을 때마다 붙여넣기 할 때마다 자동으로 포맷되도록 설정할 수 있습니다. 저장 시 자동 포맷팅 기능을 활용하면 편하게 개발이 가능합니다.