Brackets / HTML, CSS 실시간 미리보기 사용하는 방법
Brackets의 장점 중의 하나는 실시간 미리보기입니다. HTML, CSS 등을 만들 때 유용합니다. 만약 실시간 미리보기가 안되는 상황이라면, 문서를 편집하고 저장하고 웹브라우저에서 새로 고침을 해야 하는데, Brackets의 실시간 미리보기를 이용하면 입력 또는 저장만 해도 바로 웹브라우저에 반영됩니다.
실시간 미리보기를 하려면 오른쪽에 있는 번개(?) 모양 아이콘을 클릭합니다.
실시간 미리보기를 처음 실행하는 거라면 다음과 같은 메시지가 나옵니다.(다음 실행할 때는 나오지 않습니다.)
[확인]을 클릭하면...
현재 문서가 웹브라우저에서 열립니다.
이제 문서를 수정하거나 수정 후 저장하면 웹브라우저에 바로 반영됩니다. 웹브라우저를 새로 고침할 필요가 없습니다.
실시간 미리보기를 그만하려면 번개 모양 아이콘을 다시 한 번 클릭하면 됩니다.
같은 카테고리의 다른 글
Exchange Server 2019 / 설치 및 설정
가정 AD 도메인 : mf.ad 도메인 : manualfactory.net 서버 IP : 123.123.123.123 설치 포트포워딩 하는 경우 80, 443, 25 필요 DNS 레코드 추가 A / mail / 123.123.123.123 MX / @ / mail.manualfactory.net CNAME / autodiscover / mail.manualfactory.net UPN 설정 의 속성에서 UPN 추가 : manualfactory.net IIS 설정 Default Web Site에 http로 mail.manualfactory.net, autodiscover.manualfactory.net 바인딩 인증서 설치 Let's Encrypt WIN-ACME 사이트에서 소프트웨어를 ...
OBS Studio는 영상 녹화 또는 방송을 할 수 있게 해주는 오픈소스 프로그램입니다. 주요 영상 플랫폼을 지원하고, 고화질의 녹화가 가능합니다. OBS Studio를 설치하고 기본 설정하는 방법을 알아보겠습니다. 다운로드 https://obsproject.com/ko에서 다운로드합니다. 윈도우, 맥, 리눅스를 지원합니다. 자신의 환경에 맞는 걸 다운로드하세요. 여기서는 윈도우용을 다운로드하겠습니다. 설치 다운로드한 파일을 실행하면 설치가 시작됩니다. 를 클릭합니다. 라이선스에 동의하면 를 클릭합니다. 클릭하지 않으면 진행되지 ...
마이크로소프트 엣지 / 사이드바 표시 여부 설정하는 방법
얼마 전 엣지가 업데이트되면서 사이드바가 생겼다. 네이버 웨일이 있는 거와 비슷한 것인데, 원래 있던 것인지 새로 추가된 것인지는 잘 모르겠다. 사이드바에는 여러 가지 기능이 있다. 예를 들어 를 클릭하면... 계산기, 사전, 번역기, 단위 변환기, 인터넷 속도 테스트가 있고, 설정으로 들어가서... 표시 여부와 순서를 정할 수 있다. 만약 이 사이드바가 필요하지 않다면 숨길 수 있다. ...
크롬 / 포커스 모드로 주소표시줄, 즐겨찾기 안 보이게 하는 방법
크롬 포커스 모드는 더 이상 지원되지 않습니다. 대신 바로 가기 만들기를 이용하여 주소창을 없앨 수 있습니다. 크롬 상단에 나오는 즐겨찾기는 Ctrl+Shift+B로 안 보이게 할 수 있습니다. 다시 한 번 Ctrl+Shift+B를 누르면 다시 보이죠. 만약 주소표시줄을 없애고 싶다면 어떻게 할까요? 모든 크롬 창의 주소표시줄을 안 보이게 할 수는 없지만, Focus Mode를 이용하면 특정 탭에서는 ...
OBS Studio로 컴퓨터 화면을 녹화해보겠습니다. 이를 OBS Studio에서는 디스플레이 캡쳐라고 합니다. + 버튼을 클릭하고 를 클릭합니다. 이름을 적당히 정한 후 을 클릭합니다. 미리보기가 나옵니다. 만약 NVIDIA 그래픽카드를 사용하면서 화면이 검정색으로 나온다면 여기의 안내를 따라 해결하세요. 을 클릭합니다. 이제 을 누르면 해당 화면이 녹화됩니다. 을 클릭하면 녹화를 마칩니다. 기본 저장 폴더는 동영상(Videos)입니다. 녹화 관련 설정을 변경하고 ...
OBS Studio / 디스플레이 캡쳐 / 특정 영역 녹화하는 방법
OBS Studio로 녹화할 때, 모니터 전체가 아닌 특정 영역만 녹화할 수 있다. 디스플레이 캡처를 추가하고, 필요한 부분만 남기고 자르면 된다. 를 추가한다. 를 클릭한다. 를 클릭한다. 적당히 이름을 정하고 를 클릭한다. 영역 지정 방법은 상대적과 절대적이 있는데, 에 체크 되어 있으면 상대적으로 지정한다. 아래와 같이 하면 상하좌우 300px을 자르고 남은 부분을 지정한다. 아래와 ...
Brackets는 다국어를 지원합니다. 원하는 언어로 사용할 수 있습니다. 언어 변경은 다음 순서로 합니다. 상단 메뉴에서 디버그(Debug)를 클릭하고 언어 변경(Switch Language)을 클릭합니다. 언어를 선택하고 Brackets 재시작(Reload Brackets)를 클릭합니다. 브라켓이 재시작 되면서 언어가 변경됩니다.
브라켓의 기본 탭 사이즈는 4입니다. 탭 사이즈 변경은 편집기의 오른쪽 아래에서 합니다. 글자를 클릭해서 Tab Size로 만듭니다. 숫자를 클릭하고 원하는 크기를 입력합니다.
구글 크롬에는 암호 저장 기능이 있다. 암호 저장을 하면 동기화한 모든 기기에서 저장된 암호를 사용할 수 있다. 편리하긴 하지만, 사용에 주의를 기울여야 한다. 암호 저장 기능 사용 여부는 에서 한다. 로 들어가면... 사용 여부를 정할 수 있고... 이미 저장된 계정을 관리할 수 있다. 유츌된 비밀번호라는 게 있는데, 정확히 어떤 의미인지는 모르겠다. 어쨌든 취약하다고 ...
마이크로소프트 엣지 웹브라우저의 기본 설정 하에서 파일을 다운로드하면, 사용자의 다운로드 폴더로 바로 다운로드한다. 다운로드하는 기본 폴더를 변경하거나, 다운로드할지 바로 열지 선택할 수 있게 하는 것은 설정에서 정한다. 엣지 오른쪽 위에 있는 점 세 개 아이콘을 클릭한다. 을 클릭한다. 왼쪽 메뉴에서 를 클릭한다. 에서 기본 다운로드 폴더를 정할 수 있다. [각 다운로드 시 수행할 작업에 대해 ...