나의 첫번째 웹사이트 만들기 #3
NOTEPAD++ 설치하기
이전 글에서 닷홈 무료호스팅을 개설했고 파일질라까지 다운로드해서 설치해 보았습니다. 이번 글에서는 코드 에디터를 알아볼 예정입니다 이 코드 에디터로 코드를 짜서 파일질라로 웹서버에 올려두면 됩니다.
[시리즈 목차]
#3 NOTEPAD++ 설치하기
NOTEPAD++은 에디터입니다. 이 에디터는 문서 편집뿐 아니라 소스코드 편집을 할 수 있기도 합니다. 한마디로 말해, 코딩을 할 수 있는 편집기입니다.
물론 이것 말고 수없이 많은 코드 편집기들이 있습니다. ATOM, Visual Studio Code 같은 것들이 대표적입니다. 굳이 Notepad++을 쓰지 않으셔도 됩니다. Notepad++을 제가 선택한 이유는 사용이 간단하면서 FTP 프로그램과 연결해서 사용할 수 있다는 장점이 있기 때문입니다.
인터넷상에 존재하는 모든 웹 페이지는 HTML과 CSS, 자바스크립트로 만들어집니다.
그래서 웹 문서를 만들 때는 HTML언어로 만들어줘야 합니다. 이런 의심은 들 수 있겠죠. 난 그동안 인터넷에 글을 쓸 때 HTML 문서로 만들지 않고 그냥 썼는데요?라고 말이죠.
물론 그렇습니다. 블로그에 글을 쓰거나, 카페에 글을 쓰거나, 기사에 댓글을 달거나 모두 웹문서이지만 HTML 언어로 쓰지 않죠. 인터넷에 우리가 글을 쓰는 것은 웹사이트에서 알아서 HTML 언어로 변환시켜 주기 때문에 우리가 굳이 HTML을 몰라도 되었던 것입니다.
그런데 우리가 직접 사이트를 만든다면 우리는 그걸 HTML 문서로 만들어야 합니다. HTML 문서를 내 컴퓨터에서 만들고 그걸 웹 서버에 올리려면 FTP 프로그램을 통해 업로드해야 합니다. Notepad++은 이런 과정을 한방에 할 수 있습니다. FTP와 연동하여 에디터에서 쓴 HTML 파일이 바로 서버로 저장되게 하는 것입니다. 이 에디터 Notepad++을 설치해 봅시다. 아래 사이트에서 무료로 다운로드할 수 있습니다.
접속해서 Download 메뉴에서 최신 버전을 클릭해 다운로드 받으세요.
다운로드한 실행파일을 클릭하여 설치를 시작합니다.
설치가 완료되고 노트패드++을 실행하면 아래와 같은 화면이 나옵니다.
NOTEPAD++ 실행화면일단 흰 바탕이 좀 마음에 안 드네요. 코드를 짤 때는 검은 바탕이 좋습니다. 눈에 부담도 안 가고요. 개인적으로 좋아하는 글쓰기 모드를 알려드릴게요. 본인이 편한 대로 설정하시면 됩니다.
상단 메뉴 중 설정 > 형식 설정으로 들어갑니다. 테마 선택 중 ‘Obsidian’을 선택하여 저장 후 닫기를 클릭합니다.
테마는 본인이 편한 것을 선택하시면 됩니다.
이제 노트패드++과 FTP를 연결해 봅시다. Notepad++ 메뉴 중 플러그인 > 플러그인 관리를 클릭합니다.
플러그인 관리 창이 나오면 찾기에서 FTP를 입력하면 NppFTP 플러그인이 보일 것입니다. 이걸 체크하고 설치를 클릭하세요.
설치를 클릭하면 노트패드++이 재실행됩니다. 몇 초 안 걸립니다.
다시 실행되고 나서 다시 플러그인 메뉴를 보면 NppFTP 메뉴가 생성되어 있음을 볼 수 있습니다. 그 하위 메뉴 중 Show NppFTP Window를 선택합니다.
선택하면 화면 우측에 창이 하나 생깁니다. FTP와 노트패드++을 연결해주는 장치입니다.
먼저 Show messages window를 클릭해서 상태 표시 창을 띄워 둡니다.
다시 플러그인으로 돌아와 플러그인에서 톱니처럼 생긴 Setting 버튼을 클릭합니다. 세부 메뉴가 나오면 ‘Profile settings’를 클릭합니다.
Profile settings 창이 나오면 먼저 Add new를 클릭합니다. 새로운 profile을 입력하는데 자기가 알아볼 수 있는 이름을 적어줍니다. 전 testwebpage라고 적었습니다. 어떤 것을 적어도 상관없습니다.
다음 접속 정보를 입력해야 하는데 접속하고자 하는 프로필을 선택하고 Connection 정보를 입력합니다. 이미 FTP 접속할 때 해보았던 것과 같습니다. Hostname에는 도메인을 써줍니다. Username에는 FTP 아이디를 입력하고 Password에는 FTP 패스워드를 입력합니다. Initial remote directory에는 아까 FTP에서 봤던 우리 웹 서버의 메인 루트 폴더인 /html을 적어줍니다. 다 적었다면 Close를 누릅니다.(다음 페이지 이미지 확인)
닷홈 웹호스팅 정보 입력해주기이렇게 입력하고 나면 NppFTP 화면에 링크가 활성화됩니다. 서버에 접속을 하거나 접속을 해제하는 버튼입니다. 이걸 클릭해 볼게요. 아까 입력한 profile이 나옵니다.
이걸 클릭하면 해당 서버와 Notepad++ 가 서로 연결이 됩니다. html 디렉터리가 표시되면 정상입니다.
Notepad++ 에는 여러 사이트와 호스팅을 연결할 수 있습니다. 각각 호스팅은 profile로 관리를 하게 됩니다. 새로운 사이트의 호스팅을 만든다면 profile을 추가해서 관리할 수 있습니다.
이제 이 편집기에서 작성한 코드들이 바로 서버로 저장시킬 수 있는 모든 환경이 만들어졌습니다. 실제로 한번 해볼까요? NppFTP에서 html폴더에 마우스 커서를 올리고 마우스 오른쪽 키를 눌러보세요. Create new file을 눌러서 문서 생성을 해보겠습니다.
문서 명은 1.html로 해볼게요. html로 만든 문서의 확장자는 html입니다.
‘1.html’ 문서를 생성하고 더블클릭해서 편집 창으로 해당 문서를 가져오겠습니다. 빈 문서가 보이실 겁니다.
여기에 한번 글을 써보죠.
글을 쓰면 탭의 디스크 아이콘이 빨간색으로 변하는데 수정이 되었다는 의미입니다. Ctrl+S 또는 위에 저장버튼을 눌러서 저장합니다. 저장이 됐으면 한번 각자 사이트에 접속해 봅시다. 도메인 주소에 1.html 문서까지 적어서 브라우저창에 적습니다. 제 사이트를 예를 들면,
http://testwebpage.dothome.co.kr/1.html
이렇게 됩니다. 이 주소로 접속해 보겠습니다. 여러분들은 여러분들이 만든 웹사이트로 접속해 보세요. /1.html 파일명을 붙여서요. 아래 사진과 같이 나오면 대성공입니다.
축하드립니다. 이걸 봤다면 여러분은 최초로 온라인 서버에 여러분의 문서를 올려 두신 것입니다. 이제 다음번에는 실제로 HTML 언어로 된 정보를 담은 웹 문서를 만들어보도록 하겠습니다.
