Section02. 무료도메인단축 FTP 프로그램1. FTP(File Transfer Protocol)란?: 인터넷 망으로 연결되어 있는 멀리 떨어져 있는 서버로 파일을 올리거나 가져오기 위해 필요한 일종의 프로토콜(전송 서비스). 도메인으로 접근을 가능하게 해준다.​ex. 사진이나 그림 등을 사진을 찍을 수 있지만 화질을 높여서 원본 그대로 올리고 싶을 때스캐너나 복사기를 이용하듯이, 여기서 스캐너나 복사기가 컴퓨터로 전송을 할 수 있게 해주는 매개체이다.마찬가지로, FTP도 서버에 파일이나 문서를 올릴 수 있는 매개체 역할을 한다고 볼 수 있다.만든 문서/파일 → FTP 무료도메인단축 프로그램 → 도메인(땅)/ IP 주소이렇듯 FTP 프로그램을 통해서 문서나 파일을 넘겨 결과를 볼 수 있다.웹서버가 있어야 하는데, 웹서버를 임시로 빌려줘서 자리를 만들어 준다고 볼 수 있다.​2. 무료 호스팅 업체 가입하기(도메인 만들기)무료 호스팅 업체를 이용해 파일을 올려보자. (닷홈)홈페이지가 첫 화면이다.​상단 메뉴에서 웹호스팅 - 무료호스팅을 클릭한다.​​무료호스팅에서 신청하기 버튼을 누른다.​​다음 화면이 뜨면 개인정보를 입력한다.웹호스팅 설정 정보는 절대 까먹지 않도록 하고 메모를 남겨두는게 좋다.​참고로, CMS는 자동설치 선택박스에서 그누보드는 관리자로 연결해 주는 무료도메인단축 것이다.​​그다음은 FTP 프로그램을 다운로드해보자.​3. 무료 FTP 프로그램 다운로드 방법 - FileZilla(파일질라) 다운로드 방법FTP 프로그램은 많이 있지만, FileZilla(파일질라) 프로그램을 다운로드 받아보자.​-왜냐하면, 무료로 사용가능하고 업데이트가 꾸준히 되는 프로그램이기 때문이다.파일질라 첫 화면이다.중간에 있는 두개의 아이콘 중 왼쪽 아이콘(Download FileZilla Client)을 클릭한다.​이제 초록색 버튼(Download FileZilla Client)을 클릭한다.활성화된 창에서 제일 왼쪽에 있는 초록색 버튼(Download)을 클릭한다.​동의하면 된다.(I Agree)​그 이후에도 파란색으로 활성화된 부분인 Next를 계속 누르면 된다.이제 이 화면에서 왼쪽 부분은 현재 내 컴퓨터에 무료도메인단축 있는 로컬 사이트(local site)이고,오른쪽 부분은 연결하게 된 도메인에서 보여지게 될 내 파일들에 대한 공간(땅자리)이라고 보면 된다.​[파일] - [사이트 관리자] - [New site]를 클릭해 보자.여기서 프로토콜은 FTP-파일 전송 프로토콜로 설정하고호스트에는 IP 주소(도메인 주소)를 넣으면 된다.​​ex. ​​그리고 아까 잊어버리지 말라고 했던 비밀번호도 야무지게 넣어준다.​이제 html 공간이 생겼다!html 파일을 클릭하여 내용물을 채워넣으면이제 홈페이지를 구축할 수 있다.도메인에 파일을 넣는 방법으로는 두가지가 있다.1. 왼쪽(로컬 사이트, local site)에서 오른쪽(도메인 공간)으로 끌어서 놓거나2. 밖에서 무료도메인단축 문서나 파일을 끌어서 오른쪽(도메인 공간)에 놓으면 된다.​※ 주의사항 ※앞시간에 배웠듯이,인코딩 방식을 UTF-8 로 맞춰야 오류가 안 생긴다.​참고)파일명을 index로 한 이유는 홈페이지에서 첫번째 화면으로 보이기 때문에 그렇게 설정한 것이다.​index.html​문서 수정 시에는 문서나 파일을 그냥 덮어씌우면 된다.​​4. 코딩 편집 프로그램을 다운받자.(Brackets)코딩 편집 프로그램은 다양하다. Brackets(브라켓)뿐만 아니라 Visual Studio Code(비주얼 스튜디오 코드), Adobe Dreamweaver(어도비 드림위버), Editplus(에디트 플러스),Notepad++(노트패드++), Sublime text(서브라임 텍스트), Atom(아톰)이 있다.​그 중 어도비사에서 나온 무료 사용이 가능한 브라켓을 깔아보자.(맥과 무료도메인단축 윈도우 모두 호환이 가능하다) 중간에 파란색 버튼을 클릭하면 다운로드 받을 수 있다.​​​편리한 사용을 위해 템플릿을 다운받아보자.브라켓은 다양한 플러그인(plug-in)을 지원하는 장점이 있다.​[파일] - [확장기능 관리자] - New File Tamplates를 검색해 다운로드 받으면일일이 Brackts(브라켓)에서 html 구조를 일일이 입력하지 않아도 된다!​다운로드 후, 단축키 Ctrl + Shift + N 을 누르면 새 템플릿(서식)이 열린다.새 템플릿 열기 : Ctrl + Shift + N ​※ 플러그인(plug-in): 웹 브라우저의 일부로서 쉽게 설치하고 사용될 수 무료도메인단축 있는 프로그램을 말함.또한, 실시간 미리보기도 지원한다.1. [파일] - [실시간 미리보기] 나2. 실시간 미리보기 단축키 Ctrl + Alt + P 로도 가능하다.실시간 미리보기 단축키 : Ctrl + Alt + P 작업 결과물이 바로바로 호환되면서 손쉽게 미리보기 화면을 볼 수 있어서 편리하다.​​​​​​​하단___수업 자료(텍스트)------​01-FTP프로그램: FTP(File Transfer Protocol) 파일 전송 프로토콜 TCP/IP 프로토콜을 가지고 서버와 클라이언트 사이의 파일 전송을 하기 위한 프로토콜단순하게 이야기 하여 나의 컴퓨터와 서버(인터넷)사의 공간을 연결하여 파일을 전송하게 무료도메인단축 해주는 프로그램​연결방법 ) 호스팅 사이트를 통하여 일정공간(도메인)을 임대하여 해당 도메인의 ID와 PASSWORD를 생성 후 연결한다. ​: 필요한 도구 - IP - FTP ID - FTP PW ​[＃잠깐상식＃]호스팅(=hosting)이란? 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스 ​------------------------------------------------------------------------------------------------------------------------------- ​02 - 코딩편집프로그램​코딩 편집프로그램 종류 : Sublime text / VS code(Visual Studio Code) / Atom /Editplus / Notepad++​​[＃잠깐상식＃]편집기보다 코딩에 대한 이해가 중요하다는 점!!​​​#HTML#HTML5#CSS#웹디자인#웹디자인기능사#코딩#무료호스팅사이트#무료호스팅#호스팅#웹페이지호스팅#닷홈#dothome#무료FTP사이트#무료FTP#FTP#FTP란#무료도메인#도메인