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

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

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

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

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

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

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

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

같은 카테고리의 다른 글

GeForce Experience / 그래픽 드라이버 업데이트하는 방법

GeForce Experience / 그래픽 드라이버 업데이트하는 방법

GeForce Experience를 설치한 상태에서 드라이버 등 소프트웨어 업데이트가 있으면 여기 저기에서 알림이 뜹니다. 그리고 GeForce Experience를 실행하면 설치할 수 있죠. 빠른 설치와 사용자 지정 설치가 있는데, 빠른 설치를 하면 아무 것도 묻지 않고 설치를 합니다. 만약 사용자 지정 설치를 클릭하면… 몇 가지 옵션을 정할 수 있습니다. 설치를 클릭하고 잠시 기다리면… 업데이트가 완료됩니다.

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

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

Brackets의 장점 중의 하나는 실시간 미리보기입니다. HTML, CSS 등을 만들 때 유용합니다. 만약 실시간 미리보기가 안되는 상황이라면, 문서를 편집하고 저장하고 웹브라우저에서 새로 고침을 해야 하는데, Brackets의 실시간 미리보기를 이용하면 입력 또는 저장만 해도 바로 웹브라우저에 반영됩니다. 실시간 미리보기를 하려면 오른쪽에 있는 번개(?) 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 실행하는 거라면 다음과 같은 메시지가 ...

포토스케이프 / 여러 사진 이어 붙이는 방법

포토스케이프 / 여러 사진 이어 붙이는 방법

여러 이미지를 그냥 이어 붙이는 쉬운 방법은 없을까요? 포토스케이프 X를 이용하면 간단하게 이어 붙일 수 있습니다. 포토스케이프 X는 마이크로소프트 스토어에서 다운로드할 수 있습니다. 포토스케이프 메뉴 중에 이어붙이기가 있습니다. 그 메뉴를 클릭한 후… 이어 붙이고 싶은 이미지들을 끌어다 놓으면 바로 적용됩니다. 이어 붙이는 방법은 여러 가지입니다. 세로 방향으로 이어 붙일 수도 있고… 가로 방향으로 이어 ...

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

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

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

썬더버드(Thunderbird) / 메시지, 폴더 압축 해제하는 방법

썬더버드(Thunderbird) / 메시지, 폴더 압축 해제하는 방법

썬더버드 메일 프로그램을 사용하다보면 다음과 같은 메시지를 볼 때가 있습니다. 디스크 용량을 위해 모든 메시지 및 폴더를 압축하시겠습니까? XXX MB정도 절약할 수 있습니다. 실제로 압축을 해보지는 않았지만, 압축을 하면 아무래도 속도가 떨어지겠죠? 디스크 공간이 넉넉하다면 압축을 사용하지 않는게 더 편할 겁니다. 만약 압축을 사용하지 않을 거라면 에서 압축 관련 ...

당구 / 당구대 크기, 당구대 도면

당구 / 당구대 크기, 당구대 도면

당구대 크기 당구대는 정사각형 두 개를 연달아 붙여놓은 것입니다. 그래서 가로 세로 비율은 크기와 상관 없이 2:1입니다. 당구대는 국제식 대대, 국제식 중대, 국내식 중대로 구분되는데 각각의 크기는 다음과 같습니다.(단위는 mm) 국제식 대대 : 2844×1422 국제식 중대 : 2540×1270 국내식 중대 : 2448×1224 대한당구연맹의 경기 규칙서에는 다음과 같이 규정되어 있습니다. 캐롬 당구대는 구멍이 없는 직사각형의 평평한 테이블이며, 내경은 ...

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

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

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

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

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

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

호스팅케이알 / DNS 설정하는 방법

호스팅케이알 / DNS 설정하는 방법

웹브라우저에서 도메인을 입력하면, 그 도메인의 네임서버에서 설정한 IP로 접속합니다. 즉, 도메인과 IP를 연결해주는 역할을 하는 게 네임서버입니다. 예전에는 도메인 등록기관에서 네임서버 관련 서비스를 제공하지 않아 별도의 네임서버가 있어야 했지만, 요즘은 대부분 무료로 DNS 서비스를 제공합니다. 호스팅케이알도 마찬가지입니다. 호스팅케이알에서 어떻게 DNS 설정을 하는지 알아보겠습니다. 호스팅케이알에 접속하고 로그인합니다. 상단의 를 클릭합니다. DNS 설정을 ...

mRemoteNG / 여러 대의 컴퓨터에 쉽게 원격으로 접속할 수 있게 해주는 무료 프로그램

mRemoteNG / 여러 대의 컴퓨터에 쉽게 원격으로 접속할 수 있게 해주는 무료 프로그램

원격으로 윈도우를 OS로 하는 컴퓨터를 관리할 때 원격데스크톱을 주로 사용합니다. 리눅스 시스템이라면 SSH로 접속하여 관리를 하죠. 만약 관리해야할 컴퓨터가 많다면 기억해야할 IP, ID, PW도 많아집니다. 그리고 동시에 접속한다면 창도 많아지죠. mRemoteNG는 그런 불편을 줄여주는 프로그램입니다. 접속 정보를 저장할 수 있어 접속 시마다 정보를 입력할 필요가 없고, 탭을 지원하여 하나의 창에서 탭 ...