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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

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

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

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

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

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

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

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기를 사용하고 있습니다. 겉면에 GiGA WiFi Wave 2라고 써있네요. 장기고객 혜택이었는지 결합할인 때문이었는지는 기억이 나지 않지만, 공짜로 사용하고 있습니다. 오랫동안 사용해서인지 작동하는 게 좀 이상해져서 초기화를 했습니다. 방법은 간단한데, 모든 설정이 사라지므로 중요한 설정은 메모해두는 것이 좋습니다. KT 공유기 옆면에 초기화 버튼이 있습니다. 펜 같은 걸로 꾸욱 누르고 잠시 기다랍니다. 전면에 LED가 ...

닷네임코리아에서 도메인 인증코드 발급 받는 방법

닷네임코리아에서 도메인 인증코드 발급 받는 방법

도메인은 어디에서 구입하나 별 차이가 없습니다. 도메인 판매처에서 여러 가지 부가서비스를 제공하고 있지만 대동소이해서, 업체가 아주 이상한 곳이 아니라면 저렴한 곳에서 구입하면 됩니다. 그런 이유로 그동안 닷네임코리아를 이용했었습니다. 등록 비용도 저렴했고, 기간 연장 비용도 저렴했고, 이벤트도 자주 했었습니다. 그런데, 요즘은 달라졌습니다. 닷네임코리아의 가격이 좀 올라갔고, 더 저렴하게 공급하는 업체가 많아졌습니다. 닷네임코리아에서 웹호스팅 ...

GeForce Experience / 설치하는 방법

GeForce Experience / 설치하는 방법

게임을 할 거라면 제조사가 제공하는 최신 그래픽 드라이버를 설치하는 것이 좋습니다. NVIDIA 그래픽 카드라면 GeForce Experience로 드라이버를 최신으로 유지할 수 있습니다. 어떻게 설치하는지 알아보겠습니다. GeForce Experience 페이지에 접속합니다. 를 클릭합니다. 다운로드한 파일을 실행합니다. 를 클릭합니다. 설치가 완료되면 다음과 같은 화면이 나옵니다. 로그인해야 사용 가능하므로 로그인하거나, 회원이 아니라면 회원 가입을 합니다. 로그인하면 다음과 같은 화면이 ...

마이크로소프트 계정 / 가족 구성원 추가하는 방법

마이크로소프트 계정 / 가족 구성원 추가하는 방법

가족이 모두 마이크로소프트 계정을 갖고 있다면, 가족들을 하나의 그룹으로 만들 수 있습니다. 가족 그룹으로 만들면, 노트나 일정을 공유하는 게 수월해집니다. 그리고, 컴퓨터 사용 시간 제한, 앱 사용 제한 등 자녀의 PC 사용을 제어할 수도 있습니다. 가족 그룹을 만드는 이유는, 아무래도 자녀 관리 때문이겠죠. 가족이 마이크로소프트 계정이 있다는 가정 하에서, 어떻게 가족 ...

OBS Studio / 프리미어 프로 편집을 위한 녹화 설정

OBS Studio / 프리미어 프로 편집을 위한 녹화 설정

OBS 스튜디오로 방송도 가능하고 녹화도 가능합니다. 녹화를 하는 경우 편집을 하게 되는데, 녹화 영상에 따라 편집이 수월할 수도 있고 곤란할 수도 있습니다. 만약 어도비 프리미어 프로로 편집을 할 거라면, 설정을 다음과 같이 하세요. 기본 설정인 FLV 형식으로 녹화하면 프리미어 프로에서 영상을 불러올 때부터 난관에 부딪히게 됩니다. 을 클릭합니다. 왼쪽에서 을 클릭합니다. 출력 방식이 ...

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

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

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

OBS Studio / 디스플레이 캡쳐 검은 화면 나오는 문제 해결하는 방법

OBS Studio / 디스플레이 캡쳐 검은 화면 나오는 문제 해결하는 방법

OBS Studio는 컴퓨터 화면 녹화, 웹캠 녹화, 게임 녹화 등을 할 수 있는 오픈소스 프로그램입니다. 녹화뿐만 아니라 실시간 방송도 가능하고, 여러 소스를 동시에 화면에 띄워 녹화 및 방송을 할 수도 있는 유용한 프로그램입니다. 이런 프로그램이 오픈소스라는 것이 고마울 뿐입니다. 컴퓨터 화면 녹화를 하기 위해 OBS Studio를 설치했는데, 문제가 발생했습니다. 디스플레이 캡쳐를 ...

무료 SSH 클라이언트 PuTTY 사용법

무료 SSH 클라이언트 PuTTY 사용법

PuTTY PuTTY는 무료로 사용할 수 있는 SSH 클라이언트 프로그램입니다. PuTTY is an SSH and telnet client, developed originally by Simon Tatham for the Windows platform. PuTTY is open source software that is available with source code and is developed and supported by a group of volunteers. 다운로드 PuTTY는 다음 링크에서 다운로드 할 수 있습니다. https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html 설치 ...