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

Emmet

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

Brackets에 Emmet 확장 기능 설치

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

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

테스트

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

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

참고

같은 카테고리의 다른 글
가비아 / DNS 관리하는 방법

가비아 / DNS 관리하는 방법

도메인으로 웹서버, 메일 서버 등을 운영한다면 도메인의 DNS에 레코드를 등록해야 한다. 가비아에서는 무료로 네임 서버와 DNS를 관리할 수 있는 툴을 제공한다. DNS를 관리하고 싶다면 My 가비아로 접속한 후 을 클릭하거나, https://dns.gabia.com/로 바로 접속하면 된다. 도메인 목록 옆에 있는 을 클릭하면... 레코드 목록이 나오고, 을 클릭하면... DNS 레코드를 추가, 수정, 삭제할 수 있는 ...

Brackets / HTML, CSS 실시간 미리보기 사용하는 방법

Brackets / HTML, CSS 실시간 미리보기 사용하는 방법

Brackets의 장점 중의 하나는 실시간 미리보기입니다. HTML, CSS 등을 만들 때 유용합니다. 만약 실시간 미리보기가 안되는 상황이라면, 문서를 편집하고 저장하고 웹브라우저에서 새로 고침을 해야 하는데, Brackets의 실시간 미리보기를 이용하면 입력 또는 저장만 해도 바로 웹브라우저에 반영됩니다. 실시간 미리보기를 하려면 오른쪽에 있는 번개(?) 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 실행하는 거라면 다음과 같은 메시지가 ...

모니터 / 패널 / VA 패널

VA(Vertical Alignment) 패널은 액정 디스플레이(LCD) 기술 중 하나로, 주로 높은 명암비와 우수한 색 재현성을 제공하는 것이 특징입니다. VA 패널은 TN(Twisted Nematic) 패널과 IPS(In-Plane Switching) 패널의 중간 정도 성능을 가지며, 다양한 용도로 많이 사용되고 있습니다. VA 패널의 특징 높은 명암비 VA 패널의 가장 큰 장점 중 하나는 높은 명암비입니다. 일반적으로 3000:1 이상의 명암비를 제공하여, ...

모니터 / 시야각

모니터 시야각(Viewing Angle)은 화면을 여러 각도에서 볼 때 화면의 색상과 명암비가 얼마나 유지되는지를 나타내는 중요한 지표입니다. 시야각이 넓을수록 측면이나 위아래에서 보아도 화면의 왜곡이나 색상 변화가 적습니다. 시야각은 보통 수평(Horizontal) 시야각과 수직(Vertical) 시야각으로 나누어 측정됩니다. 시야각의 중요성 다수 사용자 환경 여러 사람이 동시에 화면을 볼 때 시야각이 좁으면 일부 사용자에게 왜곡된 색상이나 밝기가 보일 ...

모니터 / 색 영역 / Adobe RGB(Adobe Red Green Blue)

모니터 Adobe RGB는 모니터가 Adobe RGB 색 공간을 얼마나 잘 재현하는지를 나타내는 지표입니다. Adobe RGB는 주로 사진 편집, 그래픽 디자인, 인쇄 작업 등에서 사용되는 넓은 색 공간으로, sRGB보다 더 많은 색상을 포함합니다. Adobe RGB 색 공간 정의 Adobe RGB(Adobe Red Green Blue)는 Adobe Systems에서 1998년에 개발한 색 공간으로, 특히 인쇄와 그래픽 디자인 분야에서 ...

마우스 / 센서 - 종류와 장단점

마우스 센서는 컴퓨터 마우스의 움직임을 감지하고 이를 디지털 신호로 변환하는 장치입니다. 주로 사용되는 센서 타입은 광학 센서와 레이저 센서입니다. 각 센서의 작동 원리와 장단점에 대해서 알아보겠습니다. 광학 센서 광학 센서는 LED(발광 다이오드)와 CMOS(상보형 금속산화반도체) 이미징 칩을 사용합니다. 일반적으로 빨간색 LED가 사용됩니다. 이 LED는 마우스 바닥을 비추며, CMOS 센서가 표면의 이미지를 초당 수천 ...

엣지 / 사이드바 표시 여부 설정하는 방법

엣지 / 사이드바 표시 여부 설정하는 방법

얼마 전 엣지가 업데이트되면서 사이드바가 생겼다. 네이버 웨일이 있는 거와 비슷한 것인데, 원래 있던 것인지 새로 추가된 것인지는 잘 모르겠다. 사이드바에는 여러 가지 기능이 있다. 예를 들어 를 클릭하면... 계산기, 사전, 번역기, 단위 변환기, 인터넷 속도 테스트가 있고, 설정으로 들어가서... 표시 여부와 순서를 정할 수 있다. 만약 이 사이드바가 필요하지 않다면 숨길 수 있다. ...

네이버 웹마스터 도구 / 소유 확인 갱신하는 방법

네이버 웹마스터 도구 / 소유 확인 갱신하는 방법

홈페이지나 블로그가 네이버에서 검색되도록 하기 위해서는 네이버 웹마스터 도구에 등록을 해야 한다. 그런데, 한 번 등록하고 끝나는 것이 아니라 1년 마다 갱신을 해야 한다. 아마도 운영되지 않는 사이트를 색인하는데 들어가는 자원을 아낄려고 하는 거 같다. 소유확인 갱신은 사이트를 처음 등록할 때와 비슷한 과정을 거친다. 사이트를 등록할 때 HTML 파일을 업로드하거나 메타 ...

줌(Zoom) / 회원 가입하는 방법, 탈퇴하는 방법

줌(Zoom) / 회원 가입하는 방법, 탈퇴하는 방법

회원 가입하기 Zoom 홈페이지에 접속한다. 오른쪽 위에 있는 를 클릭한다. 생년월일을 입력하고 을 클릭한다. 약관 등이 나와야 하는데 오류가 있나보다. 그래도 을 클릭하면 계속 진행된다. 구글 등으로 로그인하거나 계정을 새로 만들 수도 있다. 여기서는 새로 만드는 방법으로 가입하겠다. 이메일 주소를 입력하고 을 클릭한다. 입력한 이메일 주소로 활성화 메일이 발송된다. 다음과 같은 메일을 받게 된다. 버튼을 클릭한다. 이름과 ...

안드로이드 / 앱 / 페이스북 / 뉴스피드에서 동영상 소리, 자동 재생 없애는 방법

안드로이드 / 앱 / 페이스북 / 뉴스피드에서 동영상 소리, 자동 재생 없애는 방법

페이스북 앱의 뉴스피드에 동영상이 있으면 자동으로 재생되고 소리가 난다. 이를 해제하는 방법은... 오른쪽 위의 프로필 아이콘을 누른다. 밑으로 내려와서 을 누른다. 을 누르고... 를 누른다. 를 해제하면, 재생은 되나 소리는 나지 않는다. 재생을 아예 안하고 싶다면 으로 들어가서 설정한다.