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

Emmet

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

Brackets에 Emmet 확장 기능 설치

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

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

테스트

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

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

참고

같은 카테고리의 다른 글

FreeCommander / 파일 관리 프로그램 / 소개 및 사용법

FreeCommander / 파일 관리 프로그램 / 소개 및 사용법

FreeCommander FreeCommander는 윈도우에서 사용할 수 있는 무료 파일 매니저이다. 듀얼 패널을 지원하며, 대부분의 작업을 키보드로 할 수 있고, 대량의 파일을 관리할 때 편리하다. 압축(풀기), 일괄 이름 변경, 싱크(동기화), FTP 등 유용한 툴도 포함하고 있다. 다운로드 다운로드는 아래 링크에서 할 수 있다. 32비트는 무료로 제공되고, 64비트는 후원자에게 제공된다. 32비트라고 해서 기능의 제한이 있지는 않다. https://freecommander.com/en/downloads/ 한글 언어팩도 포함하고 ...

Brackets / 탭 사이즈 변경하는 방법

Brackets / 탭 사이즈 변경하는 방법

브라켓의 기본 탭 사이즈는 4입니다. 탭 사이즈 변경은 편집기의 오른쪽 아래에서 합니다. 글자를 클릭해서 Tab Size로 만듭니다. 숫자를 클릭하고 원하는 크기를 입력합니다.

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus 컴퓨터 화면을 이용해서 강의를 하거나 컴퓨터 화면을 녹화할 때, 마우스 포인터가 잘 보이지 않아서 불편할 수 있습니다. 또한 4K 모니터를 사용하면 마우스 포인터가 아주 작게 보여서 찾기 힘들 때도 있구요. 이때 유용한 프로그램이 PointerFocus입니다. PointerFocus는 마우스 포인터에 도형을 입혀서 눈에 잘 띄게 하고, 클릭했을 때 애니메이션 효과를 주어 클릭했음을 알 수 ...

크롬 / 북마크(즐겨찾기) 내보내기 가져오기

크롬 / 북마크(즐겨찾기) 내보내기 가져오기

크롬에는 동기화 기능이 있습니다. 크롬 사용자에 구글 계정으로 로그인하면 구글 서버에 즐겨찾기 등이 저장되고, 다른 기기의 크롬에 로그인하면 그 정보를 가져옵니다. 즉, 하나의 기기에 북마크를 하며 다른 기기에도 반영됩니다. 만약 동기화 기능이 싫다면 수동으로 북마크를 옮기 수 있습니다. 크롬에서 북마크를 내보내고 가져오는 방법을 정리합니다. 북마크 내보내기 오른쪽 위의 점 세 개 모양의 아이콘을 클릭합니다. 에 ...

크롬 / 검색 기록, 방문 기록 등 인터넷 사용 기록 삭제하는 방법

크롬 / 검색 기록, 방문 기록 등 인터넷 사용 기록 삭제하는 방법

크롬 웹브라우저를 사용하면 검색 기록, 방문 기록, 다운로드 기록, 쿠키, 이미지 등이 저장됩니다. 웹 서핑을 편하게 하고, 로딩 속도를 빠르게 하기 위한 기능입니다. 혼자 사용하는 기기라면 이러한 기록이 있어도 상관없지만, 여럿이 사용하는 기기라면 기록을 남기는 게 싫을 수 있습니다. 어떻게 이 기록들을 지울 수 있는지, 데스크톱과 모바일로 구분하여 알아보겠습니다. 데스크톱 크롬에서 인터넷 ...

OBS Studio / 디스플레이 캡쳐 / 검은 화면 나오는 문제 해결하는 방법

OBS Studio / 디스플레이 캡쳐 / 검은 화면 나오는 문제 해결하는 방법

OBS Studio는 컴퓨터 화면 녹화, 웹캠 녹화, 게임 녹화 등을 할 수 있는 오픈소스 프로그램입니다. 녹화뿐만 아니라 실시간 방송도 가능하고, 여러 소스를 동시에 화면에 띄워 녹화 및 방송을 할 수도 있는 유용한 프로그램입니다. 이런 프로그램이 오픈소스라는 것이 고마울 뿐입니다. 컴퓨터 화면 녹화를 하기 위해 OBS Studio를 설치했는데, 문제가 발생했습니다. 디스플레이 캡쳐를 ...

마이크로소프트 엣지 / 크로미움 기반 엣지 설치하는 방법

마이크로소프트 엣지 / 크로미움 기반 엣지 설치하는 방법

노트북을 포맷했습니다. 윈도우를 재설치한 후 제일 먼저 설치하는 프로그램은 크롬입니다. 윈도우 10에 포함되어 있는 엣지나 IE는 영 사용이 꺼려집니다. 뭔가 답답하거든요. 그래서 엣지를 열고 크롬을 검색했습니다. 그랬더니 이상한 게 하나 뜨네요. 새로운 Microsoft Edge를 다운로드하라고... 얼마 전에 엣지가 크로미움 기반으로 바뀐다는 기사를 보았고, 만약 바뀐다면 윈도우 업데이트를 통해 자동 변경될 줄 ...

마이크로소프트 엣지 / 아웃룩에서 링크를 클릭할 때 사이드바에 메일 내용 나오지 않게 하는 방법

마이크로소프트 엣지 / 아웃룩에서 링크를 클릭할 때 사이드바에 메일 내용 나오지 않게 하는 방법

기본 웹브라우저가 엣지인 상태에서 아웃룩에 있는 링크를 클릭하면, 사이드바에 메일 내용이 나온다. 만약 이 창이 불편하다면 설정을 변경하여 없앨 수 있다. 사이드 창 상단에 있는 점 세 개 아이콘을 클릭한다. 을 클릭한다. 오른쪽에 있는 토글 버튼을 클릭하여 비활성화 한다.

마이크로소프트 엣지 / Internet Explorer 모드 사용하는 방법

마이크로소프트 엣지 / Internet Explorer 모드 사용하는 방법

Windows 11에는 인터넷 익스플로러(Internet Explorer)가 아예 없다. 오로지 마이크로소프트 엣지(Microsoft Edge)만 있다. 대부분의 사이트가 엣지에서 잘 돌아가기에 별 문제가 없지만, 아직도 IE로만 접속해야 하는 곳이 있다. 그런 곳에 엣지로 접속하면 모양이 이상하게 나오거나 기능이 작동하지 않는다. IE로 접속해야 하는데 IE가 없는 상황, 어떻게 하면 될까? Microsoft Edge의 Internet Explorer 모드 사용하면 ...

OBS Studio / 디스플레이 캡쳐 / 특정 영역 녹화하는 방법

OBS Studio / 디스플레이 캡쳐 / 특정 영역 녹화하는 방법

OBS Studio로 녹화할 때, 모니터 전체가 아닌 특정 영역만 녹화할 수 있다. 디스플레이 캡처를 추가하고, 필요한 부분만 남기고 자르면 된다. 를 추가한다. 를 클릭한다. 를 클릭한다. 적당히 이름을 정하고 를 클릭한다. 영역 지정 방법은 상대적과 절대적이 있는데, 에 체크 되어 있으면 상대적으로 지정한다. 아래와 같이 하면 상하좌우 300px을 자르고 남은 부분을 지정한다. 아래와 ...