Oh-bingo's Chord
익스텐션(Extensions) 이란?
삼성전자 카카오 외장하드 HX-MK10K1P
COUPANG
www.coupang.com
비주얼 스튜디오 코드로 웹 개발을 할 때 작업을 좀 더 편리하게
사용할 수 있게 도와주는 플러그인이라고
생각하시면 쉽게 이해할 수 있습니다.
익스텐션 설치방법은 비주얼 스튜디오 코드의 화면 왼쪽 사이드바에서
5번째 위치한 익스텐션 아이콘을 클릭하시면
익스텐션을 검색, 설치하거나 삭제할 수 있는 관리창 이 나옵니다.
그럼 비주얼 스튜디오 코드에서 유용한 익스텐션을 설치해 볼까요
▶ Material Theme ◀
비주얼 스튜디오 코드의 테마를 변경할 때 사용하는 익스텐션입니다.
비주얼 스튜디오 코드를 사용하여 개발을 할 때
시각적인 부분도 개발자에게는 상당히 중요합니다.
장시간 개발 작업을 하다 보면 눈에 편안한 색상을 작업환경으로
만들어 사용하는 것이 필요합니다.
이때 사용하면 편리한 익스텐션이 바로 Material Theme입니다.
설치방법은 익스텐션 검색창에 Material Theme를 입력해주시면
검색 리스트에 Material Theme 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치가 끝나면 비주얼 스튜디오 코드의 테마를 원하는 데로 바꾸어 줄 수 있습니다.
Set Color Theme를 클릭해서 마음에 드는 테마를 찾아보시고
마음에 드는 설정을 선택하시면 됩니다.
▶ Material Icon Theme ◀
개발하고 있는 문서들의 아이콘들을 변경해주는 테마입니다.
Material Icon Theme를 설치해보면 아이콘들이
조금 더 명확하게 표현된 아이콘으로 보이게 됩니다.
설치방법은 익스텐션 검색창에 Material Icon Theme를 입력해주시면
검색 리스트에 Material Icon Theme 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
익스텐션 설치 전과 설치 후의 아이콘의 변화를 확인할 수 있습니다.
아이콘 종류
▶ Auto Close Tag ◀
Html 개발을 할 때 자동으로 태그를 닫아 주는 익스텐션입니다.
시작 태그만 작성해주면 닫히는 태그는 자동으로 만들어주어
아주 유용한 익스텐션 중의 하나입니다.
설치방법은 익스텐션 검색창에 Auto Close Tag를 입력해주시면
검색 리스트에 Auto Close Tag 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 후 자동으로 닫는 태그가 자동으로 생성됨
▶ Auto Rename Tag ◀
앱코 조약돌 레트로 키캡 축교환 레인보우 LED 게이밍 기계식 유선 키보드 갈축
COUPANG
www.coupang.com
html에서 태그를 작성할 때 시작 태그의 이름을 변경하면
뒤에 닫히는 태그의 이름도 함께 변경해 주어야 하는데
Auto Rename Tag를 설치하면 시작 태그와 닫히는 태그를
함께 자동으로 변경해주는 익스텐션입니다.
설치방법은 익스텐션 검색창에 Auto Rename Tag를 입력해주시면
검색 리스트에 Auto Rename Tag 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 후 자동으로 시작 태그와 끝나는 태그의 이름을 자동으로 함께 변경해 줄 수 있습니다.
▶ Bracket Pair Colorize ◀
{괄호}의 색감을 주어서 가독성을 높여 주는 익스텐션입니다.
{괄호}의 색감들이 서로 틀리게 지정되게 함으로써 html 작업을 할 때
중첩이 많은 {괄호}의 구분을 확실하게 파악할 수 있게 도와줍니다
설치방법은 익스텐션 검색창에 Bracket Pair Colorize를 입력해주시면
검색 리스트에 Bracket Pair Colorize 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 후 괄호가 생성될 때마다 자동으로 칼라로 구분되게 괄호가 생성됩니다.
▶ CSS Peek ◀
html 파일에서 정의된 CSS를 별도로 작성한 CSS파일에서
쉽게 찾을 수 있게 해주는 익스텐션입니다.
설치방법은 익스텐션 검색창에 CSS Peek을 입력해주시면
검색 리스트에 CSS Peek 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
사용하는 방법은 html 파일에서 정의된 bigboss라는 스타일을 확인해보기 위해서
command키를 윈도에서는 ctr키를 누른 상태로 bigboss라는 글자를 클릭합니다.
그러면 정의된 css파일로 이동하게 됩니다.
▶ HTML to CSS autocompletion ◀
html 파일에서 작성한 Class이름을 CSS문서에서 수동으로 입력해 주어야 하는데요.
HTML to CSS autocompletion을 설치해주면 html 파일에서 작성한 Class이름을
CSS문서에서 자동완성을 지원해 주는 익스텐션입니다.
설치방법은 익스텐션 검색창에 HTML to CSS autocompletion을 입력해주시면
검색 리스트에 HTML to CSS autocompletion 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 전
설치 후
▶ HTML CSS Support ◀
CSS에서 원하는 Class별로 원하는 스타일을 지정해 놓은 상태에서
Html 파일의 Class에서 바꾸고 싶을 때 CSS에서 지정해 놓은 스타일을
일일이 타이핑할 필요 없이 자동 완성해주는 익스텐션입니다.
설치방법은 익스텐션 검색창에 HTML CSS Support을 입력해주시면
검색 리스트에 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 전
설치 후
▶ Indent Rainbow ◀
삼성전자 카카오 외장하드 HX-MK10K1P
COUPANG
www.coupang.com
들여 쓰기 되어있는 부분의 색상을 레이보우 색상으로 적용시켜 줘서
코드의 가독성을 높여 주고자 할 때 사용하는 익스텐션입니다.
설치방법은 익스텐션 검색창에 Indent Rainbow을 입력해주시면
검색 리스트에 Indent Rainbow 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
설치 전
설치 후
▶ Live Server ◀
Html 작성이나 CSS 작성을 할 때 브라우저에서 확인하는 작업을
새로고침이나 업데이트를 할 필요 없이 실시간으로 확인할 수 있는 익스텐션입니다.
Html 작성이나 CSS 작성을 마치고 나서 저장만 하면 바로바로 브라우저에서
실시간으로 작성한 결과를 확인할 수 있습니다.
설치방법은 익스텐션 검색창에 Live server를 입력해주시면
검색 리스트에 Live server 익스텐션이 보입니다.
install 버튼을 클릭해서 설치를 해줍니다.
비주얼 스튜디오 코드 하단에 GO Live 글자를 클릭해서 브라우저 창을 활성화한 상태로
html 문서를 수정한 후에 저장을 하면 브라우저에서 변경한 작업을 바로 확인할 수 있습니다.
삼성전자 카카오 외장하드 HX-MK20K1B
COUPANG
www.coupang.com
