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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
안드로이드 / 앱 / 카카오톡 / 카카오메일 / 알림 설정하는 방법

안드로이드 / 앱 / 카카오톡 / 카카오메일 / 알림 설정하는 방법

카카오톡에서 메일 계정을 만들 수 있다는 것을 보고 만들러 들어갔더니, 이미 만들어 놓았네요. 카카오 메일 만드는 방법을 포스팅도 했었는데, 메일 수신 알림이 한 번도 안와서 까먹고 있었습니다. 그렇다고 메일이 오지 않은 것은 아닙니다. 카카오에서 이런 저런 메일을 보냈네요. 대부분 몰라도 되는 내용이지만, 어떤 건 중요한 것인데... 이유를 찾아보니 알림 설정때문이었습니다. 카카오메일 설정으로 들어갑니다. 을 ...

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

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

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

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

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

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

노트북 / HP 빅터스 / 15-FA0061TX 구입 후기

노트북 / HP 빅터스 / 15-FA0061TX 구입 후기

노트북을 구입하게 되었다. 용도는 그래픽과 동영상 편집용. 원활한 작업을 위해서는 다음의 사양이 필요했다. 외장 그래픽 카드 메모리 확장 또는 교체 가능 디스크 확장 또는 교체 가능 가격은 100만 원 대 초중반 색은 검정 또는 그레이 색에 신경 쓰는 이유는 변색 때문이다. 손 때 묻는 거야 닦으면 되지만, 하얀색 노트북은 누렇게 변색되는 경우가 많다. 이 조건으로 검색을 하니 ...

안드로이드 / 앱 / 카카오뱅크 / 체크카드 재발급 신청하는 방법

안드로이드 / 앱 / 카카오뱅크 / 체크카드 재발급 신청하는 방법

카카오뱅크 체크카드가 반으로 쪼개졌다. 그래도 결제가 될 줄 알았는데, 안되더라. 교통카드로 사용하는 것이어서 바로 재발급 신청을 했다.(삼성페이에 다른 교통카드를 등록해두기는 했는데, 오류가 잦아서 실물 카드를 주로 사용한다.) 카카오뱅크답게 앱에서 간편하게 신청 가능하다. 준비할 것은 주만등록증. 정확히는 주민등록증에 있는 발급 일자. 캡처를 막은 단계가 있어서 다 찍지는 못했는데, 다음과 같은 과정으로 재발급 신청을 ...

당구 / 시스템 / 파이브 앤 하프 시스템

당구 / 시스템 / 파이브 앤 하프 시스템

이름의 유래 5 포인트를 향해 치면 출발한 포인트의 1/2로 도착한다는 특징에서 이름이 만들어졌다고 한다. 예를 들어 40 포인트에서 5 포인트를 향해 무회전으로 치면 수구는 20 포인트로 들어온다. 파이브 앤 하프 시스템 파이브 앤 하프 시스템은 기본적으로 내가 원하는 3 쿠션 포인트로 수구를 보내기 위한 시스템이다. 목표로 하는 3 쿠션 포인트를 정하고, 수구의 위치를 파악하여 1 ...

아이디어패드 게이밍 3 15ACH R5 3050Ti 구입 후기

아이디어패드 게이밍 3 15ACH R5 3050Ti 구입 후기

PC도 마찬가지지만, 노트북을 구입할 때 그것으로 무엇을 할 것인지 명확히 하는 것이 좋다. 그래야 적합한 제품을 고를 수 있으니까. PC는 최소 사양으로 맞춘 후 업그레이드가 가능하지만, 노트북은 메모리 추가나 저장공간 추가 정도 밖에 할 수 없으므로 더욱 신중하게 골라야 한다. 노트북은 일단 사무용으로 사용할 것인지 게임용으로 사용할 것인지를 정해야 한다. 게임용은 ...

AMD CPU, 기가바이트 메인보드 사용 시 가상화 기능 활성화하는 방법

AMD CPU, 기가바이트 메인보드 사용 시 가상화 기능 활성화하는 방법

Windows에서 VirtualBox, 안드로이드 스튜디오 등을 사용하려면 가상화 기능을 활성화해야 합니다. 기가바이트 메인보드에서 AMD CPU 가상화 기능은 보통 BIOS에서 SVM Mode라고 표시됩니다.

버추얼박스 / CentOS 8 게스트에 게스트 확장(Guest Additions) 설치하기

버추얼박스 / CentOS 8 게스트에 게스트 확장(Guest Additions) 설치하기

VirtualBox에 CentOS 8을 GUI 모드로 사용하고 싶다면 게스트 확장(Guest Additions)을 설치하는 것이 좋습니다. 그래야 호스트와 게스트 간 마우스 이동이 편리하고, 클립보드 공유나 드래그 앤 드롭이 가능해집니다. 패키지 설치하기 게스트 확장을 설치하려면 몇 가지 패키지를 설치해야 합니다. root 계정으로 로그인한 상태에서 진행하겠습니다. Activities를 클릭하고 터미널을 클릭합니다. 다음과 같이 명령하여 EPEL(Extra Packages for Enterprise Linux) 저장소를 ...

구글 애널리틱스 / GA4 / 애드센스 연결하는 방법

구글 애널리틱스 / GA4 / 애드센스 연결하는 방법

Google 애널리틱스 4(GA4) 속성에 애드센스를 연결하여, 애드센스 관리자 페이지에서는 볼 수 없는 여러 가지 통계를 볼 수 있다. 예를 들어 페이지별 수익 같은 거... 애드센스 계정과 애널리틱스 계정이 같다는 가정하에 연결하는 순서는 다음과 같다. 애드센스 관리자 페이지에서 을 클릭한다. 를 클릭한다. 연결하려는 속성을 선택하고 를 클릭한다. 완료가 ...