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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

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

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

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

마이크로소프트 홈페이지에서 Microsoft 365 구입하는 방법

마이크로소프트 홈페이지에서 Microsoft 365 구입하는 방법

보유한 도메인으로 메일 주소를 만들려고 이런 저런 방법을 찾다가, Exchange 서비스가 포함된 Microsoft 365를 구입하기로 하였습니다. 무료 서비스 찾는 것도 어렵고, 신뢰성의 문제도 있고, Microsoft 365를 구입하면 1TB의 원드라이드 공간도 주고, 마침 Microsoft 365 Business Basic을 6개월 무료로 사용할 수 있는 이벤트도 있고... 구입하는 김에 그 과정을 스크린샷으로 찍었습니다. 별로 어려운 것은 ...

무료 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 설치 ...

안드로이드 / 스마트폰 / 공인인증서 백업, 복원하는 방법

안드로이드 / 스마트폰 / 공인인증서 백업, 복원하는 방법

공인인증서를 재발급 받는 것이 무척 귀찮으므로, PC의 OS를 새로 설치하든 스마트폰 OS를 새로 설치하든, 백업을 잘 하고 복원하는 것이 좋습니다. 다행히도 안드로이드를 OS로 하는 스마트폰이라면 쉽게 공인인증서를 백업하고 복원할 수 있습니다. 파일 탐색기 앱을 이용하거나 USB로 PC에 연결해서 NPKI 폴더를 복사해둡니다. 그 폴더에 공인인증서가 모여 있습니다. 안드로이드를 새로 설치한 후 복사해두었던 NPKI ...

PuTTY / 자동 로그인하는 방법

PuTTY / 자동 로그인하는 방법

PuTTY로 리눅스 서버에 접속할 때 사용자 이름과 비밀번호를 입력합니다. 그 과정이 번거롭다면 Key를 이용하여 자동으로 로그인하도록 만들 수 있습니다. 그 방법을 정리합니다. 무료 SSH 클라이언트 PuTTY 사용법 서버에서 Key 생성 서버에 root으로 로그인했고, 현재 디렉토리는 /root이라고 가정합니다. 다음과 같이 명령하여 Key를 생성합니다. 몇 가지 질문을 하는데 계속 엔터를 치면 됩니다. ssh-keygen .ssh 디렉토리로 이동합니다. cd .ssh id_rsa와 id_rsa.pub 두 ...

호스팅케이알 / 도메인 개인정보보호서비스로 개인정보 숨기는 방법

호스팅케이알 / 도메인 개인정보보호서비스로 개인정보 숨기는 방법

도메인 소유자의 정보는 WHOIS 검색을 통해 알아낼 수 있습니다. 예를 들어 네이버는... 다음과 같이 나옵니다. 회사라면 회사의 정보가 나오고, 개인이라면 개인의 정보가 나옵니다. 주소 뿐만 아니라 전화번호까지 나와서 마음에 들지 않을 수 있습니다. 만약 개인 정보가 노출되는 게 싫다면, 정보를 노출시키지 않는 부가서비스를 이용하면 됩니다. 호스팅케이알에서는 이를 도메인 개인정보보호라고 합니다. 1개월에 100원인 유료 ...

MariaDB / 데이터베이스 이름에 하이픈(-) 또는 점(.) 포함하는 방법

MariaDB / 데이터베이스 이름에 하이픈(-) 또는 점(.) 포함하는 방법

MariaDB에 하이픈(-)이나 점(.)을 포함한 이름으로 데이터베이스를 만들면 에러가 납니다. 예를 들어 create database test-test; 라고 하면 다음과 같은 에러 메시지를 출력하면서 데이터베이스를 생성하지 못합니다. ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '-test' at ...

구글 계정 삭제(구글 회원 탈퇴) 하는 방법

구글 계정 삭제(구글 회원 탈퇴) 하는 방법

구글 계정은 여러 개 만들 수 있습니다. 입력해야 하는 정보도 별로 없고, 실명 인증도 없고, 간편하게 원하는 만큼 계정을 만들 수 있습니다. 그래서 만들기는 했지만 사용하지 않는 계정이 생기기 시작합니다. 사용하지 않는다면 탈퇴하는 게 좋겠죠? 구글에서는 회원 탈퇴라는 용어를 쓰지 않고, 계정 삭제라고 합니다. 계정을 삭제하기로 했다면, 일단 백업할 데이터가 있는지 잘 ...

포토스케이프 / 여러 사진, 이미지 크기 일괄 변경하는 방법

포토스케이프 / 여러 사진, 이미지 크기 일괄 변경하는 방법

포토스케이프 다운로드 포토스케이프는 이미지를 보정하고 편집하는 소프트웨어에요. 무료로 사용할 수 있는데, 기능이 상당히 많아요. 꽤 인기 있는 소프트웨어라고 알고 있어요. 포토스케이프는 여기에서 다운로드 할 수 있어요. 만약 윈도우 10 사용자라면 마이크로소프트 스토어에서 설치할 수 있습니다. 스토어에 있는게 최신 버전이에요. 여러 사진, 이미지 크기 일괄 변경 제가 포토스케이프를 사용하는 이유는 여러 이미지의 크기를 한 번에 변경할 수 ...

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

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

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