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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

Brackets / 언어 변경하는 방법

Brackets / 언어 변경하는 방법

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

네이버 웨일 / 홈페이지 스크롤 캡처하는 방법

네이버 웨일 / 홈페이지 스크롤 캡처하는 방법

컴퓨터 화면 캡처 프로그램으로 픽픽을 주로 사용합니다. 활성화된 윈도우 캡처가 너무 편합니다. 그리고, 웹브라우저나 PDF 파일 등 세로 스크롤이 있는 긴 문서도 캡처할 수 있는 자동 스크롤 캡처 기능도 애용하는데... 최근 들어 웹브라우저 스크롤 캡처가 잘 되지 않습니다. 조금 스크롤하다 멈춰 버리는 일이 자주 발생합니다. 그런 경우 IE에서 하면 해결되는 경우가 ...

MS OFFICE / 마이크로소프트 계정에서 로그아웃하는 방법

MS OFFICE / 마이크로소프트 계정에서 로그아웃하는 방법

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

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

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

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

KT 공유기 / GiGA WiFi Wave 2 / 브릿지 모드로 설정하는 방법

KT 공유기 / GiGA WiFi Wave 2 / 브릿지 모드로 설정하는 방법

KT 인터넷을 사용하고, 공유기는 ipTIME 거 하나, KT 거 하나 있습니다. KT 공유기가 생기기 전에는 인터넷 라인을 ipTIME 공유기에 연결하고, 그 공유기와 PC, 스마트폰 등을 연결했습니다. 그런데 무선이 집 전체를 커버하지 못하네요. 그래서 KT 공유기가 생겼을 때 두 개의 공유기를 같이 쓰기로 했습니다. 즉, 아래와 같은 구성에서... 아래와 같은 구성으로 바꾸는 ...

썬더버드(Thunderbird) / 메시지, 폴더 압축 해제하는 방법

썬더버드(Thunderbird) / 메시지, 폴더 압축 해제하는 방법

썬더버드 메일 프로그램을 사용하다보면 다음과 같은 메시지를 볼 때가 있습니다. 디스크 용량을 위해 모든 메시지 및 폴더를 압축하시겠습니까? XXX MB정도 절약할 수 있습니다. 실제로 압축을 해보지는 않았지만, 압축을 하면 아무래도 속도가 떨어지겠죠? 디스크 공간이 넉넉하다면 압축을 사용하지 않는게 더 편할 겁니다. 만약 압축을 사용하지 않을 거라면 에서 압축 관련 ...

Visual Studio Code / FTP(SFTP)로 원격 서버 접속하여 파일 수정하는 방법

Visual Studio Code / FTP(SFTP)로 원격 서버 접속하여 파일 수정하는 방법

원격 서버에 파일을 추가하거나 수정할 때, 로컬에서 작업하고 서버에 업로드하는 것은 상당히 번거롭습니다. 그래서 텍스트 에디터 중에는 FTP로 서버에 접속해서 바로 작업할 수 있는 기능을 포함한 것이 있습니다. 대표적인 것은 에디트 플러스입니다. 프로그램 자체에 포함되지는 않았지만, 플러그인을 이용해서 FTP 기능을 추가할 수 있는 텍스트 에디터도 있습니다. 대표적인 것은 Brackets, Visual Studio ...

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

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

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

안드로이드 / Remote Desktop 8 / 마이크로소프트가 만든 원격 데스크톱 앱

안드로이드 / Remote Desktop 8 / 마이크로소프트가 만든 원격 데스크톱 앱

윈도우에 원격 접속할 때 원격 데스크톱을 많이 사용합니다. 윈도우에 포함되어 있어 별도의 프로그램을 설치할 필요가 없고, 마이크로소프트가 만든 것이라 믿을 수 있다는 장점이 있습니다. 또한 안드로이드용 앱도 있어서 스마트폰에서 접속하여 관리할 수도 있습니다. 물론 화면이 작다보니 그리 편하지는 않습니다. 앱 이름은 Remote Desktop 8입니다. 만든 이는 Microsoft Corporration이라도 되어 있구요. 앱을 실행한 후 ...

OBS Studio / 윈도우 캡쳐 / 크롬 웹브라우저 검정으로 나오는 문제 해결하는 방법

OBS Studio / 윈도우 캡쳐 / 크롬 웹브라우저 검정으로 나오는 문제 해결하는 방법

윈도우 캡쳐 OBS Studio로 특정 윈도우를 선택하여 캡쳐할 수 있습니다. 방법은... 윈도우 캡쳐를 추가하고... 적당히 이름을 정한 후 을 클릭하고... 윈도우 목록에서 원하는 창을 선택하면 되는데... 크롬 웹브라우저가 검정으로 나온다면 크롬을 선택했을 때 검정으로 나오는 경우가 있습니다. 해결하는 방법은 크롬의 설정을 변경하는 것입니다. 크롬 설정을 열고... 을 클릭한 다음... 을 해제하면... 해결됩니다.