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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
엣지 / 다운로드 하는 방법

엣지 / 다운로드 하는 방법

Windows 11, Windows 10 최신 설치 이미지, Windows Server 2022애는 마이크로소트 엣지가 포함되어 있다. 엣지가 기본 설치되지 않는 Windows에서는 엣지를 다운로드하고 설치하여 사용할 수 있다. 다운로드 주소 : https://www.microsoft.com/ko-kr/edge/download 다운로드 버튼을 클릭하고... 를 클릭하면 설치 파일이 다운로드된다. 다른 버전의 Windows용 설치 파일은 다운로드 버튼을 확장하여 다운로드할 수 있다.

엣지 / 코파일럿 아이콘 없애는 방법

엣지 / 코파일럿 아이콘 없애는 방법

엣지 브라우저 오른쪽 위에 코파일럿 아이콘이 있습니다. 아이콘을 클릭하면 사이드바가 열리면서 코파일럿과 채팅을 할 수 있죠. 만약 코파일럿을 사용하지 않아서 이 기능이 전혀 필요하지 않다면, 코파일럿 아이콘을 안 보이게 할 수 있습니다.

FileZilla / 사용법

FileZilla / 사용법

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

버추얼박스 / 가상 머신 PXE 네트워크 부팅 하는 방법

버추얼박스 / 가상 머신 PXE 네트워크 부팅 하는 방법

버추얼박스 가상 머신에 OS 설치용 ISO를 탑재하고 부팅하면 설치 화면으로 진입한다. 이유는 DVD로 부팅하는 것이 우선 순위로 설정되어 있기 때문이다.  그런데 PXE를 이용한 네트워크 설치를 하고 싶다면 어떻게 할까? 방법 1 가상 머신의 설정을 열고 으로 들어간다. 부팅 순서에 플로피, 광 디스크, 하드 디스크, 네트워크가 있고, 네트워크는 활성화되어 있지 않다. 네트워크 앞에 있는 체크 박스에 ...

썬더버드(Thunderbird) / 메일 계정 추가, 삭제하는 방법

썬더버드(Thunderbird) / 메일 계정 추가, 삭제하는 방법

썬더버드(Thunderbird)는 모질라에서 만든 메일 클라이언트입니다. 지메일, 네이버, 다음 등 IMAP 또는 POP3를 지원하는 여러 메일 계정을 등록하여 사용할 수 있습니다. 메일 계정을 어떻게 추가하는지, 필요하지 않게 된 메일 계정을 어떻게 삭제하는지 알아보겠습니다. 밑의 과정을 진행하기 전에, 각 메일 서비스에서 IMAP을 사용 가능하게 설정해주어야 합니다. 메일 계정 추가 - 지메일 오른쪽 위의 선 세 ...

OBS Studio / 윈도우 캡쳐 / 크롬 웹브라우저 검정으로 나오는 문제 해결하는 방법

OBS Studio / 윈도우 캡쳐 / 크롬 웹브라우저 검정으로 나오는 문제 해결하는 방법

윈도우 캡쳐 OBS Studio로 특정 윈도우를 선택하여 캡쳐할 수 있습니다. 방법은... 윈도우 캡쳐를 추가하고... 적당히 이름을 정한 후 을 클릭하고... 윈도우 목록에서 원하는 창을 선택하면 되는데... 크롬 웹브라우저가 검정으로 나온다면 크롬을 선택했을 때 검정으로 나오는 경우가 있습니다. 해결하는 방법은 크롬의 설정을 변경하는 것입니다. 크롬 설정을 열고... 을 클릭한 다음... 을 해제하면... 해결됩니다.

버추얼박스 / 가상 머신 내보내기, 가져오기

버추얼박스 / 가상 머신 내보내기, 가져오기

버추얼박스의 가상 머신을 백업하고 복원하는 방법 중의 하나는 내보내기와 가져오기를 이용하는 것입니다. 내가 만든 가상 머신을 남에게 전달할 때도 유용한 방법입니다. 내보내기는 가상 머신의 모든 구성 요소를 하나의 파일로 만드는 것이라 파일의 크기가 상당히 큰데, SSD라면 꽤 빠른 시간에 끝납니다. 가져오기도 마찬가지입니다. 내보내기 왼쪽 위의 을 클릭합니다. 를 클릭합니다. 단축키는 Ctrl+E입니다. 내보낼 가상 ...

Sizer 4 / 윈도우 창 크기와 위치를 설정하는 프로그램

Sizer 4 / 윈도우 창 크기와 위치를 설정하는 프로그램

윈도우에서 창은 마우스로 드래그하여 크기를 변경할 수 있습니다. 보통의 상황에서는 대충 원하는 크기로 만듭니다. 하지만, 윈도우 창 크기를 정확하게 만들어야 할 때가 있습니다. 캡처를 할 때 일정한 크기를 유지하고 싶을 수도 있고, 큰 모니터를 사용할 때 여러 창들을 정돈하고 싶을 수도 있고... 만약 창 크기를 픽셀 단위로 정확히 만들고, 원하는 위치에 ...

오픈 소스 - 자유와 협력의 소프트웨어 혁명

오픈 소스의 정의와 개념 오픈 소스(Open Source)는 소프트웨어 개발 및 배포 모델 중 하나로, 소프트웨어의 소스 코드를 누구나 열람하고 수정할 수 있도록 공개하는 것을 의미합니다. 오픈 소스 소프트웨어는 자유롭게 사용, 배포, 수정이 가능하며, 이러한 자유로운 접근성은 소프트웨어의 품질 향상, 버그 수정, 기능 추가 등에 큰 도움을 줍니다. 오픈 소스의 개념은 소프트웨어 ...

크롬 / 주소 표시줄 검색 엔진 변경하는 방법

크롬 / 주소 표시줄 검색 엔진 변경하는 방법

크롬 웹브라우저의 주소 표시줄에 검색어를 입력하고 엔터키를 누르면 지정된 검색 엔진으로 검색하고 결과를 보여준다. 크롬의 기본 검색 엔진은 당연히 구글이다. 만약 주소 표시줄 검색 엔진을 변경하고 싶다면... 오른쪽 위의 점 세 개 아이콘을 클릭한다. 을 클릭한다. 왼쪽 메뉴에서 을 클릭한다. 주소 표시줄에서 사용되는 검색 엔진을 원하는 것으로 선택한다.