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

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

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

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

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

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

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

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

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

같은 카테고리의 다른 글
Brackets / 다운로드하고 설치하는 방법

Brackets / 다운로드하고 설치하는 방법

Brackets 브라켓은 웹 코딩에 최적화된 텍스트 에디터입니다. Adobe가 후원하는 오픈소스로, 누구나 자유롭게 사용할 수 있습니다. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers. 다운로드 브라켓 홈페이지에 접속합니다. Download Brackets를 ...

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

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

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