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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
레드 햇(Red Hat) 평가판 다운로드하고 설치하는 방법

레드 햇(Red Hat) 평가판 다운로드하고 설치하는 방법

Red Hat은 유료 프로그램이다. 설치는 가능하나 업데이트나 패키지를 설치할 수 없다. 그러나 평가판이 있으므로 체험이 가능하다. 기간은 60일로 그리 짧지도 않고 길지도 않다. 귀찮은 점은 회원 가입을 해야 한다는 것이고, 60일 사용 후에 다시 체험판을 사용하고 싶다면 90일을 기다려야 한다는 것이다. 하지만 회원 가입 시 본인 인증 절차 같은 건 ...

OBS Studio / 디스플레이 캡쳐 / 특정 영역 녹화하는 방법

OBS Studio / 디스플레이 캡쳐 / 특정 영역 녹화하는 방법

OBS Studio로 녹화할 때, 모니터 전체가 아닌 특정 영역만 녹화할 수 있다. 디스플레이 캡처를 추가하고, 필요한 부분만 남기고 자르면 된다. 를 추가한다. 를 클릭한다. 를 클릭한다. 적당히 이름을 정하고 를 클릭한다. 영역 지정 방법은 상대적과 절대적이 있는데, 에 체크 되어 있으면 상대적으로 지정한다. 아래와 같이 하면 상하좌우 300px을 자르고 남은 부분을 지정한다. 아래와 ...

버추얼박스 / 가상 머신 만드는 방법, 삭제하는 방법

버추얼박스 / 가상 머신 만드는 방법, 삭제하는 방법

가상 머신 만들기 가상 머신에 사용할 OS의 ISO 이미지를 준비합니다. 버추얼박스에서 를 클릭합니다. 이름을 적절히 정하고 OS의 종류와 버전을 선택합니다. 을 클릭합니다. 가상 머신에 할당할 메모리 크기를 정하고 을 클릭합니다. 를 클릭합니다. 을 클릭합니다. 동적 할당은 가상 하드 디스크를 사용하는 만큼 호스트 PC의 하드 디스크를 사용합니다. 고정 크기는 그 크기 만큼 미리 공간을 확보해 놓습니다. 적절히 설정하고 을 ...

PhotoScape X / 여러 이미지에 워터마크 한 번에 넣는 방법

PhotoScape X / 여러 이미지에 워터마크 한 번에 넣는 방법

캡처는 보통 픽픽으로 하고, 픽픽에 있는 워터마크 넣는 기능을 이용하여 워터마크를 넣는다. 그런데, 불편한 것은 하나씩 해야 한다는 것. 많이 이미지에 워터마크를 넣을 때 손이 많이 간다. 편한 방법을 찾아보다가 PhotoScape X에서 가능하다는 걸 발견했다. 일괄 편집을 이용하면 많은 이미지에 한 번에 워터마크를 넣을 수 있다. PhotoScape X는 Microsoft Store에서 다운로드 받을 ...

Brackets / 테마 설치하고 변경하는 방법

Brackets / 테마 설치하고 변경하는 방법

Brackets에서 배경, 글자색 등 모양과 관련된 것들의 집합을 테마(theme)라고 합니다. 브라켓을 설치하면 기본적으로 두 개의 테마가 있는데, 다른 테마를 추가하고 사용할 수 있습니다. 테마 설치하는 방법 오른쪽에 있는 아이콘을 클릭해서 를 엽니다. 분류에서 테마(Themes)를 클릭하면 테마만 목록에 나옵니다. 추가 정보(More info)를 클릭하면 데모를 볼 수 있습니다. 원하는 테마가 있다면 설치(Install)을 클릭합니다. 설치가 완료되면 ...

PuTTY / 다운로드 및 설치

PuTTY / 다운로드 및 설치

윈도우에 PuTTY를 다운로드하고 설치하는 방법은 두 가지가 있습니다. 하나는 Microsoft Store에서 다운로드 하는 것이고, 다른 하나는 PuTTY 홈페이지에서 다운로드 하는 것입니다. Microsoft Store에서는 putty로 검색한 후 설치를 하면 됩니다.(이 링크를 따라가도 됩니다.) PuTTY를 다운로드할 수 있는 사이트 주소는 아래와 같습니다. https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html   MSI 파일을 다운로드하여 설치하면 됩니다. Microsoft Store에서 또는 PuTTY 홈페이지의 MSI로 설치하면 아래처럼 PuTTY, ...

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

줌(Zoom) / 회의 만드는 방법, 초대하는 방법, 참가하는 방법

회의 만들기 회의를 만드는 방법은 으로 만든다. 새 회의로 즉시 미팅 만들기 작업하는 과정에서 Zoom 앱이 필요한 경우 다운로드하고 설치하도록 유도한다. 만약 그 과정을 놓쳤다면 https://us05web.zoom.us/download에서 다운로드하고 설치한다. Zoom을 실행하고 을 클릭한다. 계정 정보를 입력하고 을 클릭한다. 를 클리하면 바로 회의가 ...

버추얼박스 / 네트워크 / NAT Network / SSH 접속하는 방법

버추얼박스 / 네트워크 / NAT Network / SSH 접속하는 방법

버추얼박스에서 가상 머신의 네트워크를 NAT Network로 하면, 호스트에서 가상 머신으로 접속할 수가 없습니다. 리눅스를 OS로 하는 경우 PuTTY 같은 툴로 접속하는 것이 편한데, 그게 되지 않는 것이지요. 리눅스 OS에서 직접 명령어를 입력하는 건 여러모로 불편한데 말입니다. 하지만, 방법이 있습니다. 포트포워딩을 이용하면 호스트에서 SSH 접속을 할 수 있습니다. 으로 들어갑니다. 를 선택하면 NatNetwok가 ...

Bitvise SSH Client / 사용법

Bitvise SSH Client / 사용법

다운로드 및 설치 아래 링크에 접속하여 Bitvise SSH Client Installer를 다운로드하고 설치한다. https://www.bitvise.com/ssh-client-download SSH로 서버에 접속하기 Bitvise SSH Client를 실행한다. 접속에 필요한 정보를 입력하고 을 클릭한다. 적절한 방식으로 Accept하면 접속이 완료된다. 을 클릭하면... 콘솔 창이 생기면서 필요한 작업을 할 수 있다. 모든 작업을 마치면 을 클릭한다. 프로파일 저장하기 Bitvise SSH Client는 PuTTY와는 달리 접속 정보를 파일로 저장할 ...

Brackets / 언어 변경하는 방법

Brackets / 언어 변경하는 방법

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