Brackets / Emmet 확장 기능 설치하는 방법

Emmet

  • Emmet는 HTML과 CSS 코딩을 빠르게 할 수 있도록 도와주는 플러그인입니다. 많은 텍스트 에디터에서 Emmet을 지원하고 있고, Brackets도 확장 기능을 통해 사용할 수 있습니다.
  • Emmet의 예전 이름은 Zen Coding입니다.

Brackets에 Emmet 확장 기능 설치

  • [확장 기능 관리자]를 엽니다.

  • Emmet로 검색한 후 설치합니다.

테스트

  • HTML 형식의 문서를 새로 만듭니다.
  • html>head+body를 입력하고 Tab 키를 누릅니다.

  • 다음과 같이 바뀌면 제대로 설치된 것입니다.

참고

같은 카테고리의 다른 글
오픈 소스 / 리브레오피스(LibreOffice)

오픈 소스 / 리브레오피스(LibreOffice)

리브레오피스(LibreOffice)는 The Document Foundation에서 개발 및 관리하는 오픈 소스 오피스 스위트입니다. 2010년에 오픈오피스(OpenOffice.org) 프로젝트에서 포크(Fork)되어 독립적으로 발전해왔으며, 다양한 운영 체제에서 사용할 수 있습니다. 리브레오피스는 다양한 문서 작성, 편집 및 관리를 위한 도구들을 포함하고 있습니다. 주요 구성 요소 리브레오피스는 다음과 같은 주요 구성 요소로 이루어져 있습니다: Writer 기능 : 워드 프로세서로, 마이크로소프트 워드와 유사한 기능을 ...

Notepad++ / 플러그인 매니저, NppFTP 설치하기

Notepad++ / 플러그인 매니저, NppFTP 설치하기

Notepad++ 텍스트 에디터를 선택할 때 중요하게 생각하는 게 FTP, SFTP 접속 기능입니다. 원격 작업을 많이 하기 때문입니다. FTP 접속을 지원하는 대표적인 무료 텍스트 에디터는 Notepad++입니다. NppFTP라는 플러그인을 설치하면 서버에 있는 파일을 바로 열어서 편집할 수 있습니다. 플러그인 매니저로 NppFTP를 설치하고, 서버에 접속하는 방법을 알아보겠습니다. PluginManager PluginManager는 플러그인을 쉽게 설치하고 업그레이드하게 해주는 플러그인입니다. GitHub에서 ...

버추얼박스 / 가상 머신 만드는 방법, 삭제하는 방법

버추얼박스 / 가상 머신 만드는 방법, 삭제하는 방법

가상 머신 만들기 가상 머신에 사용할 OS의 ISO 이미지를 준비합니다. 버추얼박스에서 를 클릭합니다. 이름을 적절히 정하고 OS의 종류와 버전을 선택합니다. 을 클릭합니다. 가상 머신에 할당할 메모리 크기를 정하고 을 클릭합니다. 를 클릭합니다. 을 클릭합니다. 동적 할당은 가상 하드 디스크를 사용하는 만큼 호스트 PC의 하드 디스크를 사용합니다. 고정 크기는 그 크기 만큼 미리 공간을 확보해 놓습니다. 적절히 설정하고 을 ...

엣지 / 즐겨찾기 내보내기, 즐겨찾기 가져오기

엣지 / 즐겨찾기 내보내기, 즐겨찾기 가져오기

마이크로소프트 엣지에서 즐겨찾기를 내보내고 가져오는 방법은 다음과 같다. 내보내기 오른쪽 위의 점 세 개 아이콘을 클릭하고 를 클릭한다. 검색 폼 옆에 있는 즐겨찾기 아이콘을 클릭해도 된다. 점 세 개 아이콘을 클릭한다. 를 클릭하면... HTML 형식으로 즐겨찾기를 내보낸다. 가져오기 를 클릭한다. 을 클릭한다. 선택 목록에서 [즐겨찾기 ...

픽픽 / 워터마크 넣는 방법

픽픽 / 워터마크 넣는 방법

픽픽은 캡처 프로그램이지만 이미지 편집을 할 수도 있고 동영상 녹화도 가능하다. 그리고 기타 유용한 기능들을 포함하고 있는데, 그 중 하나가 워터마크를 넣는 기능이다. 텍스트 또는 이미지로 넣을 수 있고, 클릭 몇 번으로 쉽게 넣을 수 있다. 워터마크를 넣고 싶은 이미지를 연다. 를 클릭한다. 이미지 또는 텍스트를 정하고 위치를 정한다. [캡처시 설정된 효과 자동 ...

Microsoft Office 2016 / 마이크로소프트 계정에서 로그아웃하는 방법

Microsoft Office 2016 / 마이크로소프트 계정에서 로그아웃하는 방법

MS OFFICE 2016은 마이크로소프트 계정에 로그인되어 있지 않아도 사용할 수 있습니다. 어떻게 로그아웃하는지 알아보겠습니다. 오른쪽 위에 있는 계정 이름을 클릭하면 조그만 창이 나오는데, 제일 아래에 있는 을 클릭합니다. 을 클릭합니다. 계정 옆에 나오는 을 클릭합니다. 로그아웃할 때 발생하는 문제를 안내하는 창이 나옵니다. 를 클릭하면 로그아웃되고, 오른쪽 위에 계정 이름 대신 링크가 생깁니다.

엣지 / 스크롤 캡처

엣지 / 스크롤 캡처

활성화된 창을 캡처하는 것은 쉽다. 많은 캡처 프로그램이 창 캡처를 지원한다. 그런데, 화면에 보이지 않는 곳까지 캡처할 수 있는 프로그램은 많지 않고, OS 버전이나 캡처 대상이 되는 프로그램에 따라 잘 작동하지 않는 경우가 많다. 만약 웹페이지 전체를 캡처하고 싶다면 웹브라우저에 그런 기능이 있나 살펴보자. 쉽고 빠르게 캡처할 수 있다. 마이크로소프트 엣지는 웹 ...

Brackets / 언어 변경하는 방법

Brackets / 언어 변경하는 방법

Brackets는 다국어를 지원합니다. 원하는 언어로 사용할 수 있습니다. 언어 변경은 다음 순서로 합니다. 상단 메뉴에서 디버그(Debug)를 클릭하고 언어 변경(Switch Language)을 클릭합니다. 언어를 선택하고 Brackets 재시작(Reload Brackets)를 클릭합니다. 브라켓이 재시작 되면서 언어가 변경됩니다.

버추얼박스 / 가상 하드 디스크 만드는 방법, 삭제하는 방법

버추얼박스 / 가상 하드 디스크 만드는 방법, 삭제하는 방법

가상 하드 디스크 만들기 버추얼박스의 가상 디스크는 가상 머신을 생성할 때 만들 수 있는데, 가상 머신을 만들 때마다 디스크를 만드는 게 번거로울 수 있다. 디스크를 가지고 이런 저런 작업을 많이 한다면, 미리 만들어 둔 다음 필요할 때 연결해서 사용할 수 있다. 가상 디스크를 만드는 경로는 여러 가지가 있는데, 가장 쉽게 접근할 수 ...

파이어폭스 / 계정 만들고 동기화하는 방법

파이어폭스 / 계정 만들고 동기화하는 방법

크롬에 구글 게정으로 로그인하면 즐겨찾기를 포함한 여러 데이터를 동기화할 수 있다. 예를 들어, A 컴퓨터의 크롬에서 즐겨찾기를 추가하면, B 컴퓨터의 크롬에도 반영된다. 컴퓨터를 포맷하고 크롬을 새로 설치해도 로그인하면 데이터를 가져온다. 파이어폭스에도 그런 기능이 있다. 파이어폭스를 자주 사용하지 않아서 미루고 있었는데, 요즘 여러 PC에서 사용할 일이 생겨 동기화 기능을 사용하기로 했다. 계정을 ...