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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
원노트 / 메뉴에서 할 일 태그 위치 변경

원노트 / 메뉴에서 할 일 태그 위치 변경

할 일 태그는 순서 없는 목록이나 순서 있는 목록을 만드는 버튼 옆에서 만들 수 있었는데, 업데이트가 되면서 위치가 바뀌었습니다. 오른쪽 끝의 하위 메뉴로 들어갔습니다.

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 / 다운로드 설정하는 방법

마이크로소프트 엣지 웹브라우저의 기본 설정 하에서 파일을 다운로드하면, 사용자의 다운로드 폴더로 바로 다운로드한다. 다운로드하는 기본 폴더를 변경하거나, 다운로드할지 바로 열지 선택할 수 있게 하는 것은 설정에서 정한다. 엣지 오른쪽 위에 있는 점 세 개 아이콘을 클릭한다. 을 클릭한다. 왼쪽 메뉴에서 를 클릭한다. 에서 기본 다운로드 폴더를 정할 수 있다. [각 다운로드 시 수행할 작업에 대해 ...

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

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

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

Windows용 Outlook / 무료 전자 메일 클라이언트

Windows용 Outlook / 무료 전자 메일 클라이언트

윈도우 10 또는 윈도우 11에는 메일 앱이 있다. 그 앱이 2024년부터 Windows용 Outlook으로 대체된다. 메일 앱과 같은 별도의 프로그램이 아니라, Outlook의 무료 버전으로 생각하면 된다. 인터페이스나 사용법도 아웃룩과 같다. 설치는 Microsoft Store에서 하면 된다. 메일 주소만 입력하면 대부분 계정 추가가 자동으로 된다. 상용 Outlook과 다른 점은 광고가 붙는다는 것... 만약 상용 Outlook이 설치되어 있다면, 계정 ...

픽픽 / 워터마크 넣는 방법

픽픽 / 워터마크 넣는 방법

픽픽은 캡처 프로그램이지만 이미지 편집을 할 수도 있고 동영상 녹화도 가능하다. 그리고 기타 유용한 기능들을 포함하고 있는데, 그 중 하나가 워터마크를 넣는 기능이다. 텍스트 또는 이미지로 넣을 수 있고, 클릭 몇 번으로 쉽게 넣을 수 있다. 워터마크를 넣고 싶은 이미지를 연다. 를 클릭한다. 이미지 또는 텍스트를 정하고 위치를 정한다. [캡처시 설정된 효과 자동 ...

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

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

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

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

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

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

OBS Studio / 설치하는 방법

OBS Studio / 설치하는 방법

OBS Studio는 영상 녹화 또는 방송을 할 수 있게 해주는 오픈소스 프로그램입니다. 주요 영상 플랫폼을 지원하고, 고화질의 녹화가 가능합니다. OBS Studio를 설치하고 기본 설정하는 방법을 알아보겠습니다. 다운로드 https://obsproject.com/ko에서 다운로드합니다. 윈도우, 맥, 리눅스를 지원합니다. 자신의 환경에 맞는 걸 다운로드하세요. 여기서는 윈도우용을 다운로드하겠습니다. 설치 다운로드한 파일을 실행하면 설치가 시작됩니다. 를 클릭합니다. 라이선스에 동의하면 를 클릭합니다. 클릭하지 않으면 진행되지 ...

마이크로소프트 엣지 / 크로미움 기반 엣지 설치하는 방법

마이크로소프트 엣지 / 크로미움 기반 엣지 설치하는 방법

노트북을 포맷했습니다. 윈도우를 재설치한 후 제일 먼저 설치하는 프로그램은 크롬입니다. 윈도우 10에 포함되어 있는 엣지나 IE는 영 사용이 꺼려집니다. 뭔가 답답하거든요. 그래서 엣지를 열고 크롬을 검색했습니다. 그랬더니 이상한 게 하나 뜨네요. 새로운 Microsoft Edge를 다운로드하라고... 얼마 전에 엣지가 크로미움 기반으로 바뀐다는 기사를 보았고, 만약 바뀐다면 윈도우 업데이트를 통해 자동 변경될 줄 ...

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

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

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