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

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다.

  • 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다.

  • 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다.
  • [확인]을 클릭하면...

  • 크롬에서 HTML 문서를 보여줍니다.

  • 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다.

  • 코드를 수정하면 저장하지 않아도 바로 웹브라우저에 적용됩니다.

  • 그 HTML 문서에 연결된 CSS 파일도 마찬가지입니다.
  • 커서를 위치시키면 그에 해당하는 요소가 강조되고...

  • 코드를 수정하면 저장하지 않아도 바로 적용됩니다.

Related Posts

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js / 클립보드에 복사하게 해주는 스크립트

clipboard.js clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트입니다. 홈페이지 : https://clipboardjs.com/ GitHub : https://github.com/zenorocha/clipboard.js/ 사용하기 clipboard.min.js만 HTML에 연결하면 됩니다. 다운로드하여 사용할 수도 있고 CDN을 이용할 수도 있습니다. CDN 리스트는 다음 링크에 있습니다. https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers 기본 문법 다음은 가장 간단하게 구성한 기본 문법입니다. 클래스의 값이 btn인 요소를 클릭하면 data-clipboard-text의 값이 클립보드로 복사됩니다. var clipboard = new ClipboardJS( '.btn' ); ...

코딩용 글꼴 D2coding 설치하는 방법

코딩용 글꼴 D2coding 설치하는 방법

코딩할 때는 고정폭 글꼴을 사용합니다. 그래야 가독성이 높아집니다. 코딩용 글꼴로 많이 사용되는 것은 Courier New, Consolas 등이 있는데, 영어일 때는 보기 좋지만, 한글 모양은 그다지 예쁘지 않습니다. 코딩에 한글이 들어갈 일이 별로 없을 거라 생각할 수도 있지만, 주석에 사용할 수도 있고, HTML 문서 작업할 때는 꽤 많은 한글을 만나게 됩니다. 코딩에 ...

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스(EditPlus) 구입하는 방법과 과정

에디트플러스 에디트플러스는 윈도우에서 사용하는 텍스트 에디터입니다. 가볍고, 유용한 기능을 포함하고 있으며, HTML, PHP, Java, C/C++, CSS, ASP, Perl, JavaScript, VB Script, Python, Ruby 등 다양한 언어에 대한 코드 하이라이트를 제공합니다. 또한 FTP/SFTP로 원격 서버에 접속하여 바로 코딩을 할 수 있는 기능을 포함하고 있습니다. 코드 하이라이트는 직접 만들어 사용할 수도 있고, 다른 사용자가 ...

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

안드로이드 스튜디오 / 구글 플레이(Google Play)에 등록하는 APK 파일 만드는 방법

구글 플레이(Google Play)에 앱을 등록하려면 APK 형식으로 빌드해야 합니다. 이때 업로드 키도 필요합니다. 업로드 키: 첫 번째 버전을 서명하는 데 사용하는 키입니다. 이후 모든 버전을 동일한 키로 서명하여 본인이 업로드한 버전임을 증명할 수 있습니다. 업로드 키는 안전한 곳에 보관하세요. 업로드 키가 분실 또는 손상되면 개발자 지원팀에 연락하여 교체하시기 바랍니다. 업로드 키를 만들고 ...

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax / 홈페이지에 수식 출력하게 해주는 스크립트

MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트입니다. 다음의 스크립트만 HTML 문서에 추가하면 수식을 넣을 수 있습니다. <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: } }); </script> <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 수식 입력은 LaTeX나 MathML 등으로 합니다. LaTeX으로 수식을 나타낸 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

IE8, IE9에서 placeholder 적용되게 하는 방법

IE8, IE9에서 placeholder 적용되게 하는 방법

input이나 textarea에 placeholder 속성으로 어떤 내용을 입력할 지 안내할 수 있습니다. HTML5에 새로 추가된 속성으로 label을 대체할 수 있는 유용한 속성입니다. placeholder를 이용한 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML Attribute | placeholder</title> <style> ...

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

상업적으로도 사용 가능한 무료 텍스트 에디터 모음

개인 뿐만 아니라 기업에서도 사용할 수 있는 무료 텍스트 에디터 모음입니다. 라이선스는 바뀔 수 있으니, 사용 시 다시 한 번 확인하시기 바랍니다. 정렬은 알파벳순입니다. AcroEdit Platforms : Windows Atom Platforms : Windows / MAC / Linux Brackets Platforms : Windows / MAC / Linux Notepad ++ Platforms : Windows Visual Studio Code Platforms : Windows / MAC / Linux

안드로이드 스튜디오 / 버전코드 변경하는 방법

안드로이드 스튜디오 / 버전코드 변경하는 방법

구글 플레이 콘솔에 앱을 등록할 때 앱에서 설정한 버전이 등록됩니다. 버전은 versionName과 versionCode가 있습니다. 상단의 0.1.0이 versionName, 하단에 있는 1이 versionCode입니다. 버전은 build.gradle에서 정합니다. versionCode와 versionName의 값을 수정하면 됩니다.

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

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

브라켓에는 실시간 미리보기 기능이 있습니다. 에디터에서 코드를 변경하면 바로 웹브라우저에 반영되는 것이죠. 어떻게 실시간 미리보기를 사용하는지 알아보겠습니다. 실시간 미리보기를 할 HTML 문서를 열고, 오른쪽에 있는 번개 모양 아이콘을 클릭합니다. 실시간 미리보기를 처음 사용한다면, 구글 크롬이 필요하고 HTML과 CSS만 가능하다는 메시지가 나옵니다. 을 클릭하면… 크롬에서 HTML 문서를 보여줍니다. 코드에 커서를 위치시키면, 그 부분이 크롬에서 강조됩니다. 코드를 수정하면 ...

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

에디트 플러스로 카페24 쇼핑몰 디자인 편집하는 방법

카페24 쇼핑몰은 자체적으로 디자인 편집기를 제공합니다. 미리보기도 가능하고, 코드 하이라이트도 되는 편집기이기는 하지만, 전문 텍스트 에디터가 아니어서 불편한 점도 있습니다. 만약 에디트플러스를 사용한다면, 카페24에서 제공하는 플러그인을 이용하여 에디트플러스에서 코딩 작업을 할 수 있습니다. 에디트플러스 4 카페24의 플러그인이 지원하는 에디트플러스 버전은 4, 32비트입니다. 최신 버전은 5인데, 5에서는 플러그인을 사용할 수 없습니다. 에디트플러스 4는 ...