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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

경기도교육청 상용클라우드 계정 만들고 오피스365, 한컴오피스 2018 설치하는 방법

경기도교육청 상용클라우드 계정 만들고 오피스365, 한컴오피스 2018 설치하는 방법

아이가 학교에서 컴퓨터를 배웁니다. 프리젠테이션을 배웠는데 한쇼로 만듭니다. 그리고 과제가 나옵니다. 한쇼로 뭔가를 만들어오라고... 만약 집에 한쇼가 없다면 어떻게 할까요? 아이 과제를 위해 사야할까요? 다행히도 초중고 학생이라면 교육청에서 한컴오피스 사용권을 받을 수 있습니다. MS 오피스 사용권도 얻을 수 있구요. 다음은 교육청에서 MS 오피스, 한컴오피스 사용권을 얻는 방법입니다. 경기도교육청의 사례이고, 다른 지역 ...

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus / 마우스 포인터 강조 프로그램

PointerFocus 컴퓨터 화면을 이용해서 강의를 하거나 컴퓨터 화면을 녹화할 때, 마우스 포인터가 잘 보이지 않아서 불편할 수 있습니다. 또한 4K 모니터를 사용하면 마우스 포인터가 아주 작게 보여서 찾기 힘들 때도 있구요. 이때 유용한 프로그램이 PointerFocus입니다. PointerFocus는 마우스 포인터에 도형을 입혀서 눈에 잘 띄게 하고, 클릭했을 때 애니메이션 효과를 주어 클릭했음을 알 ...

지메일, 네이버 메일, 다음 메일 / IMAP 사용할 수 있게 설정하는 방법

지메일, 네이버 메일, 다음 메일 / IMAP 사용할 수 있게 설정하는 방법

지메일, 네이버 메일, 다음 메일 등은 아웃룩이나 썬더버드 같은 메일 클라이언트 프로그램으로 메일을 주고 받을 수 있습니다. 메일을 받을 때 POP3 또는 IMAP 방식을 사용하는데, IMAP이 여러모로 편합니다. 메일을 보내는 것은 SMTP를 이용하구요. IMAP/SMTP를 이용하여 아웃룩 등으로 메일 송수신을 하려면 웹메일에서 IMAP을 사용할 수 있도록 설정해주어야 합니다. 메일 서비스별로 설정하는 방법을 ...

마이크로소프트 계정 / 가족 구성원 추가하는 방법

마이크로소프트 계정 / 가족 구성원 추가하는 방법

가족이 모두 마이크로소프트 계정을 갖고 있다면, 가족들을 하나의 그룹으로 만들 수 있습니다. 가족 그룹으로 만들면, 노트나 일정을 공유하는 게 수월해집니다. 그리고, 컴퓨터 사용 시간 제한, 앱 사용 제한 등 자녀의 PC 사용을 제어할 수도 있습니다. 가족 그룹을 만드는 이유는, 아무래도 자녀 관리 때문이겠죠. 가족이 마이크로소프트 계정이 있다는 가정 하에서, 어떻게 가족 ...

닷네임코리아에서 도메인 인증코드 발급 받는 방법

닷네임코리아에서 도메인 인증코드 발급 받는 방법

도메인은 어디에서 구입하나 별 차이가 없습니다. 도메인 판매처에서 여러 가지 부가서비스를 제공하고 있지만 대동소이해서, 업체가 아주 이상한 곳이 아니라면 저렴한 곳에서 구입하면 됩니다. 그런 이유로 그동안 닷네임코리아를 이용했었습니다. 등록 비용도 저렴했고, 기간 연장 비용도 저렴했고, 이벤트도 자주 했었습니다. 그런데, 요즘은 달라졌습니다. 닷네임코리아의 가격이 좀 올라갔고, 더 저렴하게 공급하는 업체가 많아졌습니다. 닷네임코리아에서 웹호스팅 ...

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

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

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

크롬 / 주소 표시줄 없애는 방법

크롬 / 주소 표시줄 없애는 방법

웹브라우저 상단에 주소 표시줄이 있습니다. 현재 페이지의 URL을 보여주는 곳이고, 검색도 가능합니다. 일반적인 상황에서는 주소 표시줄이 있는 게 편한데, 특별한 경우 없애야 할 때가 있습니다. 예전엔 Focus Mode라 하여 설정에서 안 보이게 할 수 있었는데, 지금은 사라졌습니다. 그 기능은 사라졌지만, 다른 방법으로 주소 표시줄을 없앨 수 있습니다. 상단 오른쪽의 점 세 개 ...

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

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

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

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

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

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

AMD 라이젠 CPU에서 안드로이드 스튜디오 에뮬레이터 실행하는 방법

AMD 라이젠 CPU에서 안드로이드 스튜디오 에뮬레이터 실행하는 방법

인텔 CPU를 장착한 컴퓨터에서는 별다른 설정 없이도 안드로이드 스튜디오의 에뮬레이터가 잘 작동합니다. 컴퓨터 사양이 좋지 않으면 무척 느리기는 하지만, 작동은 합니다. 하지만 AMD CPU를 장착한 컴퓨터에서는 에뮬레이터 실행이 되지 않고 에러를 내는 경우가 있습니다. 몇 가지 설정을 해야 에뮬레이터가 실행됩니다. 다음은 라이젠 CPU를 사용할 때 에뮬레이터가 작동하도록 설정하는 방법입니다. BIOS 설정을 ...