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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

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

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

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

Recuva / 삭제 파일 복구 프로그램 사용법

Recuva / 삭제 파일 복구 프로그램 사용법

파일을 삭제하고 휴지통을 비우면 복구가 불가능하다고 하지만, 사실 그렇지 않다. 그 파일이 있던 곳에 다른 파일을 덮어쓰지 않았다면 복구가 가능하다. 그런 파일을 복구하기 위해서는 프로그램이 필요한데, Recuva는 삭제 파일을 복구해주는 무료 프로그램이다. 무료라는 것은 개인에 한해서이다. 기업이라면 비즈니스용 제품을 구입해야 한다. 다운로드는 여기서 할 수 있다. 설치를 마치고 실행하면 복구 마법사가 나온다. 수동 설정도 가능하지만, ...

CD/DVD 굽는 무료 프로그램 두가지

CD/DVD 굽는 무료 프로그램 두가지

CD나 DVD를 구울 일은 아주 가끔 있습니다. 그 가끔을 위해 CD/DVD 굽는 프로그램을 구입하는 건 좀 아깝죠. 다행히 무료로 사용할 수 있는 프로그램이 몇가지 있습니다. 대표적인 두가지를 소개해드립니다. CDBurnerXP 무료 프로그램입니다. 주요 특징은 다음과 같습니다. burn all kinds of discs audio-CDs with or without gaps between tracks burn and create ISO files data verification after burning process create bootable ...

Brackets / 탭 사이즈 변경하는 방법

Brackets / 탭 사이즈 변경하는 방법

브라켓의 기본 탭 사이즈는 4입니다. 탭 사이즈 변경은 편집기의 오른쪽 아래에서 합니다. 글자를 클릭해서 Tab Size로 만듭니다. 숫자를 클릭하고 원하는 크기를 입력합니다.

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

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

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

마이크로소프트 엣지 / 스크롤 캡처

마이크로소프트 엣지 / 스크롤 캡처

활성화된 창을 캡처하는 것은 쉽다. 많은 캡처 프로그램이 창 캡처를 지원한다. 그런데, 화면에 보이지 않는 곳까지 캡처할 수 있는 프로그램은 많지 않고, OS 버전이나 캡처 대상이 되는 프로그램에 따라 잘 작동하지 않는 경우가 많다. 만약 웹페이지 전체를 캡처하고 싶다면 웹브라우저에 그런 기능이 있나 살펴보자. 쉽고 빠르게 캡처할 수 있다. 마이크로소프트 엣지는 웹 ...

MobaXTerm / 사용법

MobaXTerm / 사용법

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

PhotoScape X / 콜라주 만드는 방법

PhotoScape X / 콜라주 만드는 방법

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

픽픽 / 컴퓨터 화면을 동영상으로 녹화하는 방법

픽픽 / 컴퓨터 화면을 동영상으로 녹화하는 방법

픽픽은 컴퓨터 화면 캡처 프로그램이다. 그런데, 최근에 업데이트되면서 화면 녹화 기능이 추가되었다. 화면 녹화를 위해서 별도의 프로그램을 사용했어야 했는데, 이제는 픽픽에서 다 해결할 수 있다. 를 클릭하면 녹화 모드로 들어간다. 를 클릭하면 녹화가 시작되고, 다시 클릭하면 녹화가 중지된다. 녹화 방식에는 영역 지정 녹화와 전체 화면 녹화가 있다. 영역 지정 녹화는 사각형 ...

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 웹브라우저의 기본 설정 하에서 파일을 다운로드하면, 사용자의 다운로드 폴더로 바로 다운로드한다. 다운로드하는 기본 폴더를 변경하거나, 다운로드할지 바로 열지 선택할 수 있게 하는 것은 설정에서 정한다. 엣지 오른쪽 위에 있는 점 세 개 아이콘을 클릭한다. 을 클릭한다. 왼쪽 메뉴에서 를 클릭한다. 에서 기본 다운로드 폴더를 정할 수 있다. [각 다운로드 시 수행할 작업에 대해 ...