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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
Ventoy / 멀티 부팅 USB 만드는 프로그램

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

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

아이피타임(ipTIME) 공유기 / 원격으로 재부팅하는 방법

아이피타임(ipTIME) 공유기 / 원격으로 재부팅하는 방법

컴퓨터나 스마트폰 등 IT 기기가 제대로 작동하지 않을 때, 언제나 써먹을 수 있는 해결 방법이 재부팅입니다. 소프트웨어적인 문제인 경우 재부팅으로 해결 되는 경우가 많습니다. 인터넷 공유기도 마찬가지입니다. 인터넷에 연결이 잘 되지 않거나 속도가 느려졌다면, 재부팅을 해보세요. 바로 해결될 수도 있습니다. 인터넷 공유기가 거실 등 눈에 보이는 곳에 있다면 쉽게 재부팅할 수 있는데, ...

당구 / 길 / 앞돌려 치기

당구 / 길 / 앞돌려 치기

앞돌려치기 1적구를 맞추고 단장으로 돌아서 2적구를 맞추는 것을 앞돌려 치기라고 한다. 아래처럼 단장단으로 치는 것을 길게 친다고 하고... 단장단으로 치는 것을 짧게 친다고 한다. 플러스 시스템을 이용한 앞돌려치기 다음은 플러스 시스템을 이용한 앞돌려치기의 예이다. 수구의 움직임이 시스템의 흐름과 같아서 많이 사용한다. 로드리게스 시스템을 이용한 앞돌려치기 다음은 로드리게스 시스템을 이용한 앞돌려치기의 예이다. 1적구와 2적구가 장쿠션에 붙어있다고 가정하고 두 공 ...

일러스트레이터(Illustrator) 대체 프로그램 7가지

Adobe Illustrator는 벡터 그래픽 디자인 소프트웨어의 표준이지만, 고가의 가격 때문에 대체 프로그램을 찾는 사람들이 많다. 아래는 다양한 기능을 제공하면서 저렴하거나 무료로 사용할 수 있는 Illustrator 대체 프로그램이다. 1. Inkscape 특징 : 무료 오픈 소스 벡터 그래픽 에디터로, Illustrator와 유사한 기능을 제공한다. SVG 파일 포맷을 기본으로 사용하며, 다양한 파일 포맷을 지원한다. 장점 : 무료, ...

OBS Studio / 설치하는 방법

OBS Studio / 설치하는 방법

OBS Studio는 영상 녹화 또는 방송을 할 수 있게 해주는 오픈소스 프로그램입니다. 주요 영상 플랫폼을 지원하고, 고화질의 녹화가 가능합니다. OBS Studio를 설치하고 기본 설정하는 방법을 알아보겠습니다. 다운로드 https://obsproject.com/ko에서 다운로드합니다. 윈도우, 맥, 리눅스를 지원합니다. 자신의 환경에 맞는 걸 다운로드하세요. 여기서는 윈도우용을 다운로드하겠습니다. 설치 다운로드한 파일을 실행하면 설치가 시작됩니다. 를 클릭합니다. 라이선스에 동의하면 를 클릭합니다. 클릭하지 않으면 진행되지 ...

안드로이드 / 앱 / 카카오톡 / 도시가스 검침하는 방법

안드로이드 / 앱 / 카카오톡 / 도시가스 검침하는 방법

아파트 엘리베이터에 공지가 하나 붙었어요. 삼천리 도시가스 카카오톡으로 검침하면 추첨해서 선물준다고... 매달 카카오톡으로 검침 메시지가 왔었는데, 현관 앞 검침표에 적었었거든요. 선물이 있다는 말에 카카오톡으로 검침을 해보았습니다. 여지껏 살면서 경품 당첨된 적은 없지만 말이죠...^^ 삼천리가 보내온 카카오톡으로 메시지 밑에 있는 를 눌러요. 전월 검침값 밑의 당월 검침값을 눌러서 계량기에 있는 숫자를 입력합니다. ...

유튜브 / 채널 소유자, 관리자, 커뮤니케이션 관리자 추가하는 방법

유튜브 / 채널 소유자, 관리자, 커뮤니케이션 관리자 추가하는 방법

유튜브의 브랜드 채널은 사용자를 추가하여 여러 명이 관리할 수 있습니다. 어떻게 채널에 사용자를 추가하는지 알아보겠습니다. 소유자 또는 관리자를 추가하려는 채널에 접속합니다. 그리고 을 클릭합니다. 를 클릭합니다. 를 클릭합니다. 오른쪽 위의 사람 모양 아이콘을 클릭합니다. 추가할 사용자의 이메일 주소를 입력하고, 역할을 선택합니다. 를 클릭합니다. 초대하였다고 바로 추가되는 것은 아닙니다. 상대방의 동의가 있어야 합니다. 초대 받은 ...

LaTeX / 윈도우에 TeX Live 설치하는 방법

LaTeX / 윈도우에 TeX Live 설치하는 방법

TeX Live를 윈도우에 설치하고, 제대로 설치되었는지 확인하는 방법입니다. TeX Live 설치 TeX Live 사이트에서 여러 버전의 설치 파일을 구할 수 있습니다. 윈도우에 설치하기 위한 파일이 필요하다면 download를 클릭합니다. install-tl.zip을 클릭하여 다운로드하고, 압축을 풉니다. install-tl-windows를 실행합니다. 다음과 같은 화면이 잠시 나왔다가 사라지는데, 미러 사이트가 국내에 있는 것인지 확인합니다. 국내에 위치한 미러가 아니라면 를 클릭하여 미러를 ...

Apache / 디렉토리 안에 있는 디렉토리 또는 파일 목록 출력하는 방법

Apache / 디렉토리 안에 있는 디렉토리 또는 파일 목록 출력하는 방법

URL이 정확히 입력되지 않은 경우 보통 다음처럼 Forbidden 에러가 납니다. 이 에러 대신 해당 디렉토리에 있는 파일과 하위 디렉토리 목록이 나오게 하고 싶다면, 설정에 다음 코드를 추가합니다. Options +Indexes

페이팔 / 카카오뱅크 연결하는 방법

페이팔 / 카카오뱅크 연결하는 방법

최근 환율이 많이 올랐다. 그래서 페이팔에 있는 달러를 원화로 이체하기로 했다. 예전에 우리은행과 국민은행을 연결해두었는데, 최근에는 카카오뱅크를 주로 사용해서 카카오뱅크를 추가하고 이체하기로 정했다. 일단 할 것은 카카오뱅크를 페이팔 지갑에 추가하는 것인데... 많이 편해졌다. 은행계좌 연결에서 ka라고 치면... KAKAOBANK가 바로 나온다. KAKAOBANK를 선택하고... 계좌 유형을 예금으로 선택한 후, 계좌번호는 숫자만 넣는다. 동의 후 연결을 클릭하면 연결 ...