HTML 에디터 Brackets 사용방법 - sejong-interface/Interface_Manual GitHub Wiki

Brackets

A modern, open source text editor that understands web design. (brakets.io)

  • 이번 프로젝트의 개발환경은 brackets을 사용하려고 합니다.
  • bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다.

ScreenShot

Download link is here

HTML 파일 만들어보자

  1. 우클릭 - 새로 만들기 - txt file을 통해 빈 파일 하나를 만듭니다.

여기서 저는 test.tst파일을 만들어 보겠습니다.
ScreenShot

  1. 그다음으로 파일의 확장자를 .txt에서 .html로 바꿔줍니다.

파일의 확장자가 안보이시는 분들은 파일 설정에서 확장자 표시를 체크 해주시면 됩니다.

ScreenShot

HTML 파일이 완성되었습니다!

Brackets에서 파일 불러오기 및 실시간 미리보기 사용

  1. 파일 - 폴더열기를 통해 .html파일이 저장된 위치를 열어줍니다.
    ScreenShot
    ScreenShot

  2. 아래 그림과 같이 좌측에 폴더안에 들어있는 파일들이 보이면 됩니다.
    ScreenShot

  3. 우선 아래와 같은 코드를 Brackets 에 입력해 봅시다.

<body>
    Hello interface!
</body>

ScreenShot

  1. 아래와 같이 실시간 미리보기 기능이 되면 성공!

ScreenShot

⚠️ **GitHub.com Fallback** ⚠️