웹사이트 개발을 위한 유료 혹은 닷홈 무료 웹호스팅 서비스 신청으로, 서버와 내컴퓨터를 일정한 ID, PW라는 고유의 계정을 별도개의 FTP계정을 부여받았습니다. 닷홈의 회원계정과 별개의 계정으로 서버와 접속하는 프로그램이 FTP입니다.
하이퍼텍스트 전송 프로토콜(HTTP)은 월드 와이드 웹의 토대이며 하이퍼텍스트 링크를 사용하여 브라우저를 통해 웹 페이지를 로드하는 데 사용됩니다. FTP(파일 전송 프로토콜)는 서버의 내 공간인 리모트사이트와 내 컴퓨터인 로컬사이트로 파일을 FTP프로그램을 통해 업로드하거나 다운로드할 수 있습니다.
이번시간에는 웹사이트 개발을 위해 파일질라의 사이트관리자 기능과 비밀번호 묻기처리, 탐색 동기화등 내컴퓨터인 로컬사이트와 웹호스팅한 서버공간인 리모트 사이트의 기본적이지만 익숙하지 않아 어렵게 사용하는 분들을 위해 소개합니다.
아직 무료 웹호스팅 서비스 신청을 못했거나, 파일질라 사용법을 모르면 아래 영상을 통해서 충분히 숙지하고 따라하기 바랍니다.
Web, Hompy 폴더내에 home 폴더생성 후
01. 웹호스팅 신청 / 계정정보 확인 : ysjgood
무료웹호스팅의 호스트,id,ftp암호를 상단에 입력 후 [빠른 접속]
ysjgood.dothome.co.kr
ftp i/p : ysjgood/******f^^
db pw : ******f^^
🚘 마이닷홈 - 웹호스팅 목록
02. 홈피에 올릴 필요한 자료들을 업로드/다운로드
FTP 전용프로그램 : 파일질라(오픈소스)
[파일질라]는 오픈 소스 크로스 플랫폼의 자유 소프트웨어
파일질라 클라이언트를 주로 이용한다.
프로그램을 파일질라 공식사이트의 다운로드 페이지인... 바로 아래 그램과 같은 FileZilla Client Additional Download > 바로가기
위 바로가기를 통해 접속하고 Windows 64bit - Setup버전이 아닌 포터블(무설치판)을 다운받습니다. 압축파일을 제대로 풀어서 설치없이 USB에서 이용할 수 있는 FileZilla_3.53.1_win64.zip 을 받아서 해보세요.
호스트/사용자명/비번 입력후 [빠른연결]버튼누르면 접속성공이 된다. 암호를 몰라서 접속실패되는 예가 있으니, 호스팅회사의 내사이트 정보에서 웹호스팅 관련 정보들을 잘보고 비번설정을 변경해도 됩니다.
접속이 성공하면 좌/우로 구분되어 로컬사이트(내컴) / 리모트사이트(서버의 내공간)
♥ 아이비의 경우는 public_html 폴더가 홈피내용이 들어가야하는 부분입니다. 이 폴더내에 index.html 문서가 첫 문서가 됩니다.
♥ 닷홈의 경우는 html 폴더가 홈피내용이 들어가야하는 부분입니다. 이 폴더내에 index.html 문서가 첫 문서가 됩니다.
중요한 작업으로 홈피자료가 있는 폴더를 명확히 만들고, 위 경로명을 복사후 파일질라의 리모트사이트 주소에 붙이고 엔터키를 쳐서 동기화 준비를 한다.
탐색동기화가 되어 있으면 로컬/리모트 사이의 입장/퇴장시 동일한 방법을 경로이동이 가능하다.
FTP 접속후 화면 분할(좌 경로복사, Ftp왼쪽에 붙여!
좌(내컴의 디렉토리) / 우(리모트사이트 서버)
좌 : F:\usb\hompy\ysjgood\html
우 : /html
🚘🚘 /html/내에
index.html 파일이 업로드 되면 home
setup....파일 다운로드.
🚘 /html/imgs 폴더 생성후 png이미지 코딩해서 업로드해봅니다.
"호스팅신청완료되고 FTP가 성공했다면
html폴더내에 필요한 자료를 테스트 후 올려서
스마트폰에서도 자료를 볼 수 있습니다."
File Zilla 사이트관리자를 알면 접속이 편합니다. 독립된 FTP로 서버(리모트사이트)접속시, 매번 호스트 주소와 사용자명, 비밀번호를 입력하는 일은 힘들다. 관리하는 사이트가 많거나 새탭을 이용해서 각기다른 디렉토리간 작업시 사이트관리자 기능을 알면 작업이 편합니다.
각각의 폴더나, 사이트는 선택후 내보내기를 하면 사이트명site.xml, 혹은 폴더명site.xml로 저장하여, 파일의 불러오기를 통해서 사이트관리자내에 설정한 내용대로 바로 셋팅을 해서 동일한 조건에서 웹작업을 수행할 수 있다.
사이트관리자의 고급탭에서 기본 로컬/리모트 디렉토리를 설정하고 탐색동기화를 체크하면 원하는 위치로 바로 접속할 수 있다. FTP접속후 로컬과 리모트 사이트의 상호 동일한 디렉토리 사이에 좌우측의 각 경로 이동시 동시 입장/퇴장이 편리한 기능이다. 매번 왼쪽과 오른쪽 들락달락하는 경우 탐색동기화를 이용을 권한다.
파일질라의 사이트관리자에서 비밀번호 등 쉽게 접속하려 기입을 했음에도 접속시 보안을 위해 비밀번호를 매번 묻는다면 약간 번거로운 일이다. File Zilla에서 접속시 비밀번호를 물어볼 때... 해결하는 방법을 그림으로 설명을 해본다.
위 AppTemplate_Band_v2.zip 파일을 다운로드 후에 Home 폴더에 붙여놓고 설계시 활용하세요. 압축을 알아서 잘 풀어보면 w3images는 삽입된 이미지들이 있습니다. 2개의 웹문서가 있는데... index.html은 슬라이드 이미지 3개로 구성된 원페이지형식의 반응형 웹앱 소스입니다.
스플래쉬(Splash) 활용
도메인연결 후 스플래쉬(Splash)로 활용해서 index.html에서 자동으로 5초후 해당된 디렉토리로 이동을 원할 때는 아래 메타태그를 head문의 상단에 주로 활용합니다. 이런 이동없이 스플래쉬에서 디렉토리간 이동을 원할때는 그림형태의 아이콘을 클릭해서 해당 디렉토리 이동을 하는 사례도 많습니다. 아래 메타태그중 루트(/)와 디렉토리가 있다면 상대경로 주소로 간편히 이동됩니다. 절대경로는 외부url이나 정확한 이동을 원할 때 (프로토콜 http 포함) 주로 사용합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ready</title>
<style type="text/css">
body {background: #fff url("imgs/ready.png") no-repeat fixed center center;}
</style>
</head>
<body>
<!-- 배경이미지 처리 -->
</body>
</html>
body {
background: #fff url("imgs/ready.png") no-repeat fixed center center;
}
<head>
<meta http-equiv="refresh" content="5; url=/home"></meta>
</head>
아래 파일을 다운로드 후 html디렉토리에 붙인 후 폴더 이름을 home으로 변경해서 업로드 하고 테스트 해보세요.
'UI UX(Web)' 카테고리의 다른 글
| Bootstrap 개요, 반응형웹을 위한 그리드 시스템(4가지 클래스) (0) | 2024.09.09 |
|---|---|
| 이미지 색상컨셉 Color-Palette-Generator (0) | 2024.09.09 |
| Web 05. 웹호스팅, 도메인, 반응형템플릿(FTP) (6) | 2024.08.12 |
| Web 04. Layout을 위한 div 디비전태그, 반응형웹 기초 (0) | 2024.08.12 |
| Web 03. <a href="url">하이퍼링크, 그림글씨 폰트어썸(클래스,아이디) (0) | 2024.08.05 |
