먼저 HTML/CSS 결과물을 확인 하기 위해서 크롬 브라우저를 설치해 보도록 하겠습니다. 크롬 브라우저는 개발자에게 편리한 다양한 기능을 지원하고 있기 때문에 개발하는 과정에서 편리합니다. 😀
HTML/CSS 코드를 입력 할 텍스트 에디터 툴인 비주얼 스튜디오 코드 툴을 설치해 보도록 하겠습니다. 여기서 에디터 툴은 쉽게 말하면 메모장이라고 보시면 될 것 같아요.
우리가 정산이나 계산 같은거를 할 때 메모장에 적어놓고 할 수도 있지만! 엑셀로 하면 더 효율적일 거에요! 이렇듯이 HTML/CSS도 메모장으로 코딩할 수 있지만 VSCode와 같은 툴을 이용하면 더 효율적으로 할 수 있습니다.
개발을 위한 툴(도구)! 이라고 보시면 될 것 같아요 😀
HTML/CSS 마크업(코드 입력)을 도와주는 확장 프로그램을 설치해 보도록 하겠습니다! 확장 프로그램은 우리가 어떤 일(여기서는 HTML/CSS 코딩)을 더 효율적으로 작업할 수 있게 도와줘요!
Korean Language Pack
비주얼 스튜디오 코드 툴을 한국어로 사용할 수 있다.
Indent-Rainbow
Tab 영역을 컬러별로 다르게 표시하여 코드라인이 길어 졌을때 읽기 편하게 합니다.
Auto Rename Tag
HTML Tag에서 태그 이름을 바꾸면 쌍을 이루는 여는태그 또는 닫는태그 명도 함께 바꿔줍니다.
CSS Peek
HTML 문서에서 정의된 CSS를 금방 찾을 수 있도록 도와줌! ctrl + 클릭 하면 선언된 곳으로 이동함.
HTML to CSS autocompletion
HTML 문서에 선언된 class 명을 .css파일에서 입력할 때 자동완성 기능을 제공합니다.
HTML CSS Support
HTML 문서에서 CSS의 자동완성을 이용할 수 있다.