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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

포토샵(Photoshop) 대체 프로그램 7가지

Photoshop은 강력한 이미지 편집 도구이지만, 고가의 가격과 높은 시스템 요구사항으로 인해 많은 사용자가 대체 프로그램을 찾고 있다. 다음은 다양한 기능을 제공하면서도 무료 또는 저렴한 가격으로 이용할 수 있는 Photoshop 대체 프로그램이다. 1. GIMP (GNU Image Manipulation Program) 특징 : 무료 오픈 소스 소프트웨어로, Photoshop과 유사한 기능을 제공한다. 레이어, 필터, 브러시 및 다양한 ...

워드 프로세서 - 뜻, 주요 기능, 소프트웨어

워드 프로세서의 정의와 역사 워드 프로세서(word processor)는 텍스트 문서를 작성, 편집, 형식화하고 출력할 수 있는 소프트웨어 응용 프로그램입니다. 워드 프로세서는 글쓰기와 문서 작성 작업을 단순화하고 효율적으로 만들기 위해 다양한 기능을 제공합니다. 워드 프로세서의 개념은 1960년대에 전자 타자기의 발전과 함께 등장했습니다. 초기 워드 프로세서 프로그램 중 하나인 IBM의 "타입라이터"는 1970년대에 출시되었고, 이후 ...

버추얼박스 / 호스트에서 게스트로, 게스트에서 호스트로 파일 전송하는 방법

버추얼박스 / 호스트에서 게스트로, 게스트에서 호스트로 파일 전송하는 방법

사용하는 PC에 영향을 주지 않고 이런 저런 테스트를 하기 위해 가상 머신을 만듭니다. 호스트와 게스트가 독립적으로 작동하는 것이죠. 하지만 독립적이라는 게 항상 편한 것은 아닙니다. 별개의 머신이라는 것이 불편할 때도 있습니다. 대표적인 예가 파일 전송입니다. 호스트에 있는 파일을 게스트로, 게스트에 있는 파일을 호스트로 옮기는 게 쉽지만은 않습니다. 하지만 방법이 없는 것은 ...

크롬 / 유튜브 영상 끊김 해결하는 방법

크롬 / 유튜브 영상 끊김 해결하는 방법

노트북을 샀다. 모니터 주사율 144Hz의 게이밍 노트북. 별도의 모니터와 연결하여 듀얼 모니터로 사용하고 있는데, 예상치 못한 문제가 발생했다. 외부 모니터와 연결된 상태에서, 크롬 웹브라우저로, 노트북 모니터로 유튜브 영상을 보면 뚝뚝 끊긴다. 외부 모니터에서 볼 때는 문제가 없고... 주사율을 변경하는 등 여러 가지 방법을 시도해보았는데, 해결책은 크롬 설정에 있었다. 에서 [가능한 경우 하드웨어 가속 ...

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

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

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

크롬 / 맞춤법 검사 해제하는 방법

크롬 / 맞춤법 검사 해제하는 방법

크롬 웹브라우저에는 맞춤법 검사 기능이 있습니다. 폼에 텍스트를 입력하면 맞춤법 검사를 하고, 맞춤법에 맞지 않으면 빨간 밑줄을 칩니다. 유용한 기능이기는 하지만, 굳지 필요하지 않을 수도 있습니다. 글 주제에 따라 빨간 줄이 너무 많이 나올 수도 있기 때문입니다. 맞춤법 검사는 크롬 설정에서 해제할 수 있습니다. 오른쪽 위의 점 세 개 아이콘을 클릭한 후 ...

버추얼박스 / 호스트 키 사용법과 호스트 키 설정하는 방법

버추얼박스 / 호스트 키 사용법과 호스트 키 설정하는 방법

호스트 키 버추얼박스의 호스트 키는 가상 머신에서 하는 여러 작업에 사용됩니다. 예를 들어 마우스가 가상 머신 밖으로 나오지 않는 경우 호스트 키를 누르면 가상 머신 밖으로 빠져나옵니다. 호스트 키와 E를 누르면 가상 머신의 화면을 캡쳐합니다. 호스트 키와 DEL을 누르면 가상 머신에 Ctrl+Alt+Del을 전송합니다. 호스트 키 설정하는 방법 버추얼박스의 기본 설정 호스트 키가 불편하다면 ...

PuTTY / 사용법 / 백업하는 방법, 복원하는 방법

PuTTY / 사용법 / 백업하는 방법, 복원하는 방법

PuTTY를 사용할 때 여러 접속 정보를 저장하여 사용합니다. 그런데 그 접속 정보를 내보내고 가져오는 기능은 없습니다. 만약 컴퓨터 포맷, 다른 컴퓨터에서 사용 등의 이유로 접속 정보를 백업하고 복원하고 싶다면, 레지스트리를 이용합니다. 그 정보들을 레지스트리에 저장하기 때문입니다. 백업 WIN+R을 눌러 실행 창을 엽니다. regedit을 입력하고 을 클릭합니다. 왼쪽을 확장하면서 \HKEY_CURRENT_USER\SOFTWARE\SimonTatham로 찾아 들어갑니다. 마우스 우클릭 후 를 ...

버추얼박스 / Cannot register the DVD image 에러 해결하는 방법

버추얼박스 / Cannot register the DVD image 에러 해결하는 방법

버추얼박스에 윈도우 10을 OS로 하는 가상 머신을 만들었습니다. 그런데, 다른 위치로 옮기거나, 다른 계정으로 로그인했을 때 다음과 같은 에러가 났습니다. Cannot register the DVD image 'C:\Program Files\Oracle\VirtualBox\VBoxGuestAdditions.iso' {8e3e5db2-0f2f-4b3a-b162-939c80e2689d} because a CD/DVD image 'C:\Program Files\Oracle\VirtualBox\VBoxGuestAdditions.iso' with UUID {a541c58e-3b90-4b21-a168-226e0e510a17} already exists. 항상 발생하는 문제는 아니고, 특정 가상 머신에서만 발생했습니다. 이를 해결하는 방법은, 해당 가상 머신의 ...

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

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

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