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

Brackets의 장점 중의 하나는 실시간 미리보기입니다. HTML, CSS 등을 만들 때 유용합니다. 만약 실시간 미리보기가 안되는 상황이라면, 문서를 편집하고 저장하고 웹브라우저에서 새로 고침을 해야 하는데, Brackets의 실시간 미리보기를 이용하면 입력 또는 저장만 해도 바로 웹브라우저에 반영됩니다.

실시간 미리보기를 하려면 오른쪽에 있는 번개(?) 모양 아이콘을 클릭합니다.

실시간 미리보기를 처음 실행하는 거라면 다음과 같은 메시지가 나옵니다.(다음 실행할 때는 나오지 않습니다.)

[확인]을 클릭하면...

현재 문서가 웹브라우저에서 열립니다.

이제 문서를 수정하거나 수정 후 저장하면 웹브라우저에 바로 반영됩니다. 웹브라우저를 새로 고침할 필요가 없습니다.

실시간 미리보기를 그만하려면 번개 모양 아이콘을 다시 한 번 클릭하면 됩니다.

같은 카테고리의 다른 글
마이크로소프트 엣지 / 기본 검색 엔진 변경하는 방법

마이크로소프트 엣지 / 기본 검색 엔진 변경하는 방법

크로미움 기반의 새로운 엣지를 설치했습니다. 이것저것 둘러보는데, 역시 기본 검색 엔진이 빙(Bing)입니다. 주소 표시줄에 검색어를 입력하고 엔터키를 누르면 빙의 검색 결과가 나옵니다. 제가 주로 사용하는 건 구글과 네이버... 빙의 검색 결과는 아직 마음에 들지 않습니다. 아무리 마이크로소프트가 제공한 것이라 해도 빙을 꼭 사용할 필요는 없겠죠? 기본 검색 엔진을 구글로 변경해 보겠습니다. 오른쪽 ...

OBS Studio / 윈도우 캡쳐 / 녹화 영역 윈도우에 맞추는 방법

OBS Studio / 윈도우 캡쳐 / 녹화 영역 윈도우에 맞추는 방법

OBS Studio의 윈도우 캡쳐를 이용하면, 특정 창만 선택하여 캡쳐를 할 수 있습니다. 그런데, 화면에 꽉 차지 않은 창을 선택하면 아래처럼 나머지 부분이 검정으로 나옵니다. 그 부분에 다른 화면이나 창을 넣을 수 있는데, 만약 선택한 창만 녹화를 한다면 검정 부분까지 녹화가 됩니다. 검정 부분을 없애고, 선택한 윈도우만 녹화하고 싶다면, 마우스 우클릭하여 [출력 ...

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

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

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

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

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

Emmet Emmet는 HTML과 CSS 코딩을 빠르게 할 수 있도록 도와주는 플러그인입니다. 많은 텍스트 에디터에서 Emmet을 지원하고 있고, Brackets도 확장 기능을 통해 사용할 수 있습니다. Emmet의 예전 이름은 Zen Coding입니다. Brackets에 Emmet 확장 기능 설치 를 엽니다. Emmet로 검색한 후 설치합니다. 테스트 HTML 형식의 문서를 새로 만듭니다. html>head+body를 입력하고 Tab 키를 누릅니다. 다음과 같이 바뀌면 제대로 설치된 것입니다. 참고 Emmet ...

픽픽 / 컴퓨터 화면을 동영상으로 녹화하는 방법

픽픽 / 컴퓨터 화면을 동영상으로 녹화하는 방법

픽픽은 컴퓨터 화면 캡처 프로그램이다. 그런데, 최근에 업데이트되면서 화면 녹화 기능이 추가되었다. 화면 녹화를 위해서 별도의 프로그램을 사용했어야 했는데, 이제는 픽픽에서 다 해결할 수 있다. 를 클릭하면 녹화 모드로 들어간다. 를 클릭하면 녹화가 시작되고, 다시 클릭하면 녹화가 중지된다. 녹화 방식에는 영역 지정 녹화와 전체 화면 녹화가 있다. 영역 지정 녹화는 사각형 ...

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 웹브라우저의 기본 설정 하에서 파일을 다운로드하면, 사용자의 다운로드 폴더로 바로 다운로드한다. 다운로드하는 기본 폴더를 변경하거나, 다운로드할지 바로 열지 선택할 수 있게 하는 것은 설정에서 정한다. 엣지 오른쪽 위에 있는 점 세 개 아이콘을 클릭한다. 을 클릭한다. 왼쪽 메뉴에서 를 클릭한다. 에서 기본 다운로드 폴더를 정할 수 있다. [각 다운로드 시 수행할 작업에 대해 ...

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

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

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

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

회의 만들기 회의를 만드는 방법은 으로 만든다. 새 회의로 즉시 미팅 만들기 작업하는 과정에서 Zoom 앱이 필요한 경우 다운로드하고 설치하도록 유도한다. 만약 그 과정을 놓쳤다면 https://us05web.zoom.us/download에서 다운로드하고 설치한다. Zoom을 실행하고 을 클릭한다. 계정 정보를 입력하고 을 클릭한다. 를 클리하면 바로 회의가 ...

썬더버드(Thunderbird) / 메일 계정 추가, 삭제하는 방법

썬더버드(Thunderbird) / 메일 계정 추가, 삭제하는 방법

썬더버드(Thunderbird)는 모질라에서 만든 메일 클라이언트입니다. 지메일, 네이버, 다음 등 IMAP 또는 POP3를 지원하는 여러 메일 계정을 등록하여 사용할 수 있습니다. 메일 계정을 어떻게 추가하는지, 필요하지 않게 된 메일 계정을 어떻게 삭제하는지 알아보겠습니다. 밑의 과정을 진행하기 전에, 각 메일 서비스에서 IMAP을 사용 가능하게 설정해주어야 합니다. 메일 계정 추가 - 지메일 오른쪽 위의 선 세 ...

크롬 / 사이트 알림 차단 하는 방법

크롬 / 사이트 알림 차단 하는 방법

구글 크롬에는 알림 기능이 있습니다. 알림 받는 게 싫어서 왠만하면 차단을 하는데, 실수로 차단을 안 한 경우도 있습니다. 그럴 땐 수동으로 알림을 차단할 수 있습니다. PC의 크롬과 안드로이드의 크롬으로 나누어서 어떻게 차단하는지 알아보겠습니다. PC용 크롬 점 세 개 아이콘을 클릭하고, 설정을 엽니다. 밑으로 내려가서 고급을 클릭합니다. 콘텐츠 설정을 클릭합니다. 알림을 클릭합니다. 알림을 차단한 목록과 허용한 목록을 ...