웹 개발 툴(Web Developer Tool) - 브래킷(Brackets) 다운 및 설치하기

IT|2017. 4. 13. 18:35

HTML5, CSS, Javascript를 사용을 하여 웹 개발을 많이 하는 추세입니다. 기본적인 HTML5, CSS만 알아도 나 만의 웹페이지를 만드는데 있어 도움이 되는 웹 프로그래밍 언어입니다. 프로그래밍을 할려면 개발툴에서 코딩을 많이 하게 됩니다.


그 중에 웹 개발 툴(Web Developer Tool)은 종류가 정말 많습니다. 텍스트 문서, 구글 도구, 압타나(Aptana), 이클립스(Eclipse) 등이 있지만 그 중에 사용하기 수월한 툴인 브래킷(Brackets)를 소개를 하겠습니다.



이 툴이라면 개발을 하는데 있어 편리함을 가질 수 있으리라 봅니다. 여러 개발툴을 보아왔지만 사용을 하는 것도 사람 마다 다르고 원하는 스타일이 있습니다. 여러분 만의 개발툴을 찾아보시길 바래요.


브래킷(Brackets) 다운로드 받기


웹 개발 툴(Web Developer Tool)인 브래킷(Brackets)을 다운로드를 받기 위해 아래의 링크에 접속을 합니다. 사이트 중간에 Download Brackets 1.9를 클릭을 합니다. 버전이 업데이트 되면 숫자로 올라갑니다.



브래킷(Brackets) 설치하기



다운로드를 받은 브래킷(Brackets) 설치파일을 실행을 합니다. Brackets Destination Folder에서 Next를 클릭을 합니다.



Install Brackets에서 Install을 클릭을 합니다.



브래킷(Brackets)이 설치가 진행이 됩니다.



Brackets was successfully installed. 설치가 완료가 되었으면 Finish를 클릭을 합니다.



시작 - Brackets를 보내기 - 바탕 화면에 바로 가기 만들기를 클릭을 하여 바로 가기 아이콘을 만듭니다.


브래킷(Brackets) 기본 소스 테스트 확인하기



브래킷(Brackets)를 실행을 합니다. Windows 보안 경고에서 엑세스 허용을 클릭합니다.



기본적으로 제공을 하는 소스가 나타나게 됩니다.



소스의 결과를 확인을 하기 위해서 툴의 오른쪽 상단에 번개 아이콘을 클릭을 합니다.



구글 크롬이 새로 실행이 되고 해당 소스의 결과가 나타납니다.



브래킷(Brackets) 글자 크게 하기



소스의 글자가 작다면 크게 할 수 있습니다. 상단 메뉴에서 보기 - 폰트 크기 키우기를 클릭을 하면 글자를 크게 설정할 수 있습니다.



현재 소스 파일을 닫고 싶으시다면 왼쪽에 현재 파일에서 index.html에 오른쪽 마우스 클릭을 하여 닫기를 클릭을 하면 됩니다.
브래킷(Brackets) 폴더 및 파일을 생성하기


브래킷(Brackets)에서 프로그래밍을 하기 위해 새로운 폴더를 생성을 합니다. 윈도우를 설치를 할 때 파티션을 2개로 나뉘어서 사용을 많이 합니다. 한 쪽은 윈도우가 설치가 되어 있고, 한 쪽은 빈 공간으로 주로 작업이나 중요한 파일을 많이 보관을 하기도 합니다. 해당하는 드라이버에서 새 폴더를 만듭니다.



툴 왼쪽에서 Getting Started에 오른쪽 마우스를 클릭을 하여 폴더 열기를 클릭합니다.



새로 만들었던 폴더를 클릭을 합니다.



해당 폴더에서 폴더 선택을 클릭을 하면 선택이 됩니다.



새로운 소스를 작성을 하기 위해 오른쪽 마우스 버튼을 클릭을 하면 파일 만들기를 클릭합니다.



소스를 입력을 합니다.


<DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title></title>

<body>

HTML로 작성한 첫 번째 문서입니다.

</body>

</html>



소스 입력을 완료를 하였으면 파일 - 다른 이름으로 저장을 클릭을 합니다.



새로 만든 폴더에서 파일 이름을 지정해주시고 끝에 .html을 붙여서 저장을 합니다. 웹 문서를 확인을 하기 위해서는 .html을 붙여야 합니다.



해당 소스의 결과를 확인을 하기 위해 오른쪽의 번개 아이콘을 클릭합니다.



간단하게 작성된 소스의 결과를 확인하실 수 있습니다.

댓글()
  1. ee32320 2017.05.14 15:30 신고 댓글주소  수정/삭제  댓글쓰기

    포스팅, 잘 보고 갑니다.