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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
Brackets / 언어 변경하는 방법

Brackets / 언어 변경하는 방법

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

OBS Studio / 컴퓨터 화면 녹화하는 방법

OBS Studio / 컴퓨터 화면 녹화하는 방법

OBS Studio로 컴퓨터 화면을 녹화해보겠습니다. 이를 OBS Studio에서는 디스플레이 캡쳐라고 합니다. + 버튼을 클릭하고 를 클릭합니다. 이름을 적당히 정한 후 을 클릭합니다. 미리보기가 나옵니다. 만약 NVIDIA 그래픽카드를 사용하면서 화면이 검정색으로 나온다면 여기의 안내를 따라 해결하세요. 을 클릭합니다. 이제 을 누르면 해당 화면이 녹화됩니다. 을 클릭하면 녹화를 마칩니다. 기본 저장 폴더는 동영상(Videos)입니다. 녹화 관련 설정을 변경하고 ...

줌(Zoom) / 설문 조사 만드는 방법

줌(Zoom) / 설문 조사 만드는 방법

줌(Zoom) 미팅을 하면서 설문 조사를 할 수 있다. 유료 요금제 상품에 있는 기능으로, 무료 버전에서는 사용할 수 없다. 설문 조사 기능 켜기 기본적으로 비활성화되어 있으므로, 사용을 하려면 활성화해야 한다. 를 활성화한다. 즉, 개인별로, 그룹별로, 전체 계정에 대하여 ...

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

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

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

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

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

PuTTY는 널리 사용되는 무료 SSH 클라이언트 프로그램입니다. 많은 기능을 포함하고 있어 사용에 문제는 없는데, 한 가지 아쉬운 점은 설정을 백업, 복원하는 기능이 없다는 것입니다. 하지만, 다른 방법으로 백업과 복원이 가능합니다. 바로 레지스트리를 이용하는 것입니다. PuTTY 백업 WIN+R을 눌러 실행 창을 엽니다. regedit을 입력하고 을 클릭합니다. 왼쪽을 확장하면서 \HKEY_CURRENT_USER\SOFTWARE\SimonTatham로 찾아 들어갑니다. 마우스 우클릭 후 를 클릭합니다. 파일 이름을 ...

PhotoScape X / 콜라주 만드는 방법

PhotoScape X / 콜라주 만드는 방법

위키백과에 따르면 콜라주란... 콜라주(collage)는 질이 다른 여러 가지 헝겊, 비닐, 타일, 나뭇조각, 종이, 상표 등을 붙여 화면을 구성하는 기법이다. 라고 해요. 그런데 보통 사진에서는 여러 사진을 모은 하나의 사진을 콜라주라고 합니다. 콜라주는 포토샵 같은 이미지 편집 프로그램으로 만들 수도 있지만, 손이 많이 가요. 그래서 콜라주를 만들어주는 프로그램을 찾게 되는데, 그 중 하나가 포토스케이프에요. 상단 메뉴에 콜라주라고 있어요. 거기서 드래그, 클릭하면 콜라주가 ...

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

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

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

마이크로소프트 엣지 / Internet Explorer 모드 사용하는 방법

마이크로소프트 엣지 / Internet Explorer 모드 사용하는 방법

Windows 11에는 인터넷 익스플로러(Internet Explorer)가 아예 없다. 오로지 마이크로소프트 엣지(Microsoft Edge)만 있다. 대부분의 사이트가 엣지에서 잘 돌아가기에 별 문제가 없지만, 아직도 IE로만 접속해야 하는 곳이 있다. 그런 곳에 엣지로 접속하면 모양이 이상하게 나오거나 기능이 작동하지 않는다. IE로 접속해야 하는데 IE가 없는 상황, 어떻게 하면 될까? Microsoft Edge의 Internet Explorer 모드 사용하면 ...

Ventoy / 멀티 부팅 USB 만드는 프로그램

Ventoy / 멀티 부팅 USB 만드는 프로그램

보통의 경우 운영체제는 한 번 설치하면 오랫동안 쓴다. 하지만 개발자나 전산 담당자라면 자주 여러 OS를 설치하게 된다. 이를 위해 OS별로 설치 USB를 만들게 되는데, 상당히 불편하다. 다양한 OS를 설치하는 상황이라면, Ventoy를 이용해서 그 OS들을 다 담은 설치 USB를 만들 수 있다. 대부분의 OS를 지원하며, 1100개 이상의 ISO 파일을 테스트했다고 한다. Ventoy is an ...

MobaXTerm / 사용법

MobaXTerm / 사용법

다운로드 MobaXTerm 다운로드 : https://mobaxterm.mobatek.net/download.html Home Edition과 Professional Edition 두 가지가 있고, Home Edition은 기능 제한이 있는 무료이다. Download now를 클릭한다. Portable edition은 설치가 필요 없고, Installer edition은 설치를 해야 한다. 원하는 것을 다운로드한다. SSH 기본 MobaXTerm을 실행하고, 을 클릭한다. SSH를 클릭한다. 접속에 필요한 정보를 입력하고, 를 클릭하면... 새 탭이 생기면서 연결된다. 로그인하면 아래와 같은 화면이 나온다. 로그아웃하면 세션이 끊기고, 엔터키를 누르면 ...