생활코딩 css 정리 - 13. bracket 도구사용법

13. bracket 도구사용법

지금부터 수업에서 bracket을 사용하려고 합니다. bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다. 하지만 이 도구는 코딩을 편리하게 해줄뿐 우리 수업의 내용과는 직접적인 연관은 없기 때문에 보셔도 좋고 안보셔도 전혀 문제되지 않습니다.

brackets.io 홈피에 가면 다음과 같이 툴을 다운 받을 수 있습니다.

이 프로그램의 킬러 콘텐츠는 빠른 편집입니다.

body 태그에서 위와 같이 오른쪽 마우스 버튼을 누르고 빠른 편집을 누르면 아래와 같이 body 태그에 적용된 css를 바로수정 할 수 있습니다.

그 다음 오른쪽에 레고 블럭 같은 아이콘을 클릭한 뒤

아래와 같이emmet을 검색하고 설치해봅시다.

그 다음 파일을 생성하고 아래와 같이 html을 작성한 뒤 탭키를 누르면

아래와 같이 자동으로 브라켓(괄호)가 생성됨을 알 수 있습니다.

또한 아래와 같이 li*3 을 치고 탭 키를 누르면

li태그가 3개가 생성됨을 알 수 있습니다.

그리고 다음과 같이 작성 후 탭키를 누르면

아래와 같이 작성됨을 알 수 있습니다.

사실 이 기능은https://docs.emmet.io/abbreviations/syntax/에 있는 emmet이라는 모듈의 기능입니다. 위 사이트를 통해서 다양한 기능을 알아보는 것도 좋습니다.

출처　：　https://opentutorials.org/course/2418/13455