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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

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

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

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

OBS Studio

OBS Studio

OBS Studio 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어. 홈페이지 : https://obsproject.com 한국어 홈페이지 : https://obsproject.com/ko Windows, MAC, Linux를 지원한다. 설치 Windows OS에서의 설치 방법 컴퓨터 화면 녹화 방법 컴퓨터 화면은 디스플레이 캡쳐로 녹화한다. 어도비 프리미어 프로에서 편집할 것이라면 고정 비트레이트로 설정하는 것이 좋다. Tip NVIDIA 그래픽 카드를 사용하면 디스플레이 캡쳐에 문제가 생길 수 있다. NVIDIA 제어판에서 ...

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기 / GiGA WiFi Wave 2 / 초기화하는 방법

KT 공유기를 사용하고 있습니다. 겉면에 GiGA WiFi Wave 2라고 써있네요. 장기고객 혜택이었는지 결합할인 때문이었는지는 기억이 나지 않지만, 공짜로 사용하고 있습니다. 오랫동안 사용해서인지 작동하는 게 좀 이상해져서 초기화를 했습니다. 방법은 간단한데, 모든 설정이 사라지므로 중요한 설정은 메모해두는 것이 좋습니다. KT 공유기 옆면에 초기화 버튼이 있습니다. 펜 같은 걸로 꾸욱 누르고 잠시 기다랍니다. 전면에 LED가 ...

크롬 / 포커스 모드로 주소표시줄, 즐겨찾기 안 보이게 하는 방법

크롬 / 포커스 모드로 주소표시줄, 즐겨찾기 안 보이게 하는 방법

크롬 포커스 모드는 더 이상 지원되지 않습니다. 대신 바로 가기 만들기를 이용하여 주소창을 없앨 수 있습니다. 크롬 상단에 나오는 즐겨찾기는 Ctrl+Shift+B로 안 보이게 할 수 있습니다. 다시 한 번 Ctrl+Shift+B를 누르면 다시 보이죠. 만약 주소표시줄을 없애고 싶다면 어떻게 할까요? 모든 크롬 창의 주소표시줄을 안 보이게 할 수는 없지만, Focus Mode를 이용하면 특정 탭에서는 ...

Brackets / 언어 변경하는 방법

Brackets / 언어 변경하는 방법

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

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

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

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

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

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

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

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

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

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

현대자동차 / 스마트키 / 배터리 교체하는 방법

현대자동차 / 스마트키 / 배터리 교체하는 방법

차 시동을 끄는데 메시지가 하나 떴어요. 자동차 스마트키 배터리 전압이 낮다는.. 그래서 그 키는 두고 다른 키를 사용했는데, 그것도 전압이 낮다고 나왔어요. 어쩔 수 없이 배터리를 교체했습니다. 차량 설명서에는 설명이 너무 간단하게 나왔어요. 일자 드라이버로 분해하고, 건전지 교체하고, 다시 조립하라고... 뭐, 틀린 말은 아닌데, 사진 같은 것도 없어서 좀 오래 걸렸네요. 제일 ...

크롬 / 검색 기록, 방문 기록 등 인터넷 사용 기록 삭제하는 방법

크롬 / 검색 기록, 방문 기록 등 인터넷 사용 기록 삭제하는 방법

크롬 인터넷 사용 기록 크롬 웹브라우저를 사용하면 검색 기록, 방문 기록, 다운로드 기록, 쿠키, 이미지 등이 저장됩니다. 웹 서핑을 편하게 하고, 로딩 속도를 빠르게 하기 위한 기능입니다. 혼자 사용하는 기기라면 이러한 기록이 있어도 상관없지만, 여럿이 사용하는 기기라면 기록을 남기는 게 싫을 수 있습니다. 어떻게 이 기록들을 지울 수 있는지, 데스크톱과 모바일로 구분하여 ...