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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
팟플레이어 / 영상 캡처, 영상 회전, 영상 반전

팟플레이어 / 영상 캡처, 영상 회전, 영상 반전

영상 캡처 마우스 우클릭 후 에서 캡처를 할 수 있다. 복사, 바로 캡처, 캡처가 있는데... 복사 : 클립보드에 복사한다. 이미지 편집 프로그램 등에서 붙여넣으면 된다. 바로 캡처 : 캡처한 이미지를 캡처 폴더에 바로 저장한다. 캡처 : 저장할 위치와 파일 이름을 정할 수 있다. 캡처 폴더는 에서 정할 수 있다. 원본 크기와 ...

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

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

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

FileZilla / 사용법

FileZilla / 사용법

FileZilla는 오픈 소스 파일 전송 프로토콜(FTP) 클라이언트 프로그램으로, 사용자 친화적인 인터페이스와 강력한 기능을 제공하여 다양한 파일 전송 작업을 효율적으로 수행할 수 있게 한다. 주로 웹 개발자, 시스템 관리자, 그리고 파일 전송을 자주 수행하는 사용자들 사이에서 인기가 높다. 서버에 접속하기 FileZilla를 다운로드 받아 설치하고 실행한다. 호스트와 사용자명, 비밀번호, 포트에 정보를 입력하고 을 클릭하면 서버에 접속된다.(포트에 ...

PhotoScape X / 설치하는 방법

포토스케이스(PhotoScape)는 유용한 이미지 편집 보정 프로그램입니다. 많은 기능을 갖추고도 무료로 사용할 수 있어 인기가 많습니다. 개인적으로 사진 크기 일괄 변경과 콜라쥬 기능을 자주 사용합니다. 윈도우 10에 설치하여 사용할 수 있는 포토스케이는 두 가지가 있습니다. 하나는 포토스케이프 홈페이지에서 배포하는 것을 사용하는 것입니다. 다운로드하고 설치하고 사용하면 됩니다. 또 하나는 마이크로소프트 스토어에서 설치하는 것입니다. photoscape로 ...

사진 파일 이름 일괄 변경 해주는 프로그램 / FreeCommander, 알씨, PhotoScape X

사진 파일 이름 일괄 변경 해주는 프로그램 / FreeCommander, 알씨, PhotoScape X

사진을 찍으면 자동으로 파일 이름이 생성된다. DSLR인 EOS 650D와 아이패드는 IMG로 시작하고 뒤에 일련번호가 붙는다. IMG_0001.jpg 넥서스5는 IMG 뒤에 찍은 날짜와 시간이 붙는다. IMG_20150322_123456.jpg 오래전에 구입했던 삼성 디카는 S 뒤에 일련번호가 붙는다. S5002978.jpg 사진이 잔뜩 쌓이니 서로 다른 규칙의 이름이 상당히 불편하다. 모든 사진 파일의 이름이 일정한 규칙을 따른다면 훨씬 관리하기 편할 것이다. 아래의 프로그램을 이용하면, 쉽게 ...

크롬 / 유튜브 영상 끊김 해결하는 방법

크롬 / 유튜브 영상 끊김 해결하는 방법

노트북을 샀다. 모니터 주사율 144Hz의 게이밍 노트북. 별도의 모니터와 연결하여 듀얼 모니터로 사용하고 있는데, 예상치 못한 문제가 발생했다. 외부 모니터와 연결된 상태에서, 크롬 웹브라우저로, 노트북 모니터로 유튜브 영상을 보면 뚝뚝 끊긴다. 외부 모니터에서 볼 때는 문제가 없고... 주사율을 변경하는 등 여러 가지 방법을 시도해보았는데, 해결책은 크롬 설정에 있었다. 에서 [가능한 경우 하드웨어 가속 ...

버추얼박스 / 설치하는 방법

버추얼박스 / 설치하는 방법

버추얼박스(VirtualBox)는 오라클이 제공하는 오픈소스 가상화 프로그램입니다. VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers. 다음은 윈도우에 버추얼박스를 설치하는 방법입니다. 다운로드 버추얼박스 홈페이지에 접속합니다. 왼쪽 메뉴의 Downloads 또는 Download VirtualBox 버튼을 클릭합니다. 자신의 OS에 맞는 ...

엣지 / Internet Explorer 모드 사용하는 방법

엣지 / Internet Explorer 모드 사용하는 방법

Windows 11에는 인터넷 익스플로러(Internet Explorer)가 아예 없다. 오로지 마이크로소프트 엣지(Microsoft Edge)만 있다. 대부분의 사이트가 엣지에서 잘 돌아가기에 별 문제가 없지만, 아직도 IE로만 접속해야 하는 곳이 있다. 그런 곳에 엣지로 접속하면 모양이 이상하게 나오거나 기능이 작동하지 않는다. IE로 접속해야 하는데 IE가 없는 상황, 어떻게 하면 될까? Microsoft Edge의 Internet Explorer 모드 사용하면 ...

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

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

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

Visual Studio Code (VS Code) / 소개, 장점, 단점

Visual Studio Code (VS Code) / 소개, 장점, 단점

Visual Studio Code (VS Code)는 Microsoft에서 개발한 오픈 소스 코드 편집기로, 다양한 프로그래밍 언어와 플랫폼을 지원하며 개발자들 사이에서 매우 인기가 높습니다. 이 편집기는 가벼우면서도 강력한 기능을 제공하며, 개발 생산성을 높이기 위해 설계되었습니다. 아래에서 VS Code의 상세한 소개와 장단점에 대해 자세히 살펴보겠습니다. Visual Studio Code 소개 출시 및 배경 출시일 : 2015년 4월 29일에 ...