일단 www.dothome.co.kr 이 사이트에 접속을합니다.
닷홈 - 호스팅은 닷홈
닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 있습니다.
www.dothome.co.kr
유출되면 위험한 수준의 개인정보는 요구하지 않으니 마음편히 회원가입을 해도된다.
여기서 우측 상단에 회원가입 눌러준다
동의 버튼 다 눌러주면된다.
아이디와 비밀번호 확인은 여러분이 쓰실 아이디와 비밀번호 입력하면 된다.
이름(회사명)은 그냥 여러분 이름을 쓰면 됨.
연락처랑 이메일있는데 이건 뭐 말안해도 아실거라 믿는다.
보안가입 문자 입력하는 란도 있는데 그것도 보이는대로 적으시면 된다.
그러면 이런 창이하나 뜰 것이다.
이제 아까 입력한대로 로그인해준다.
그러면 이 상태가 로그인 한 상태이고 위에 타이틀에서 웹호스팅을 눌러준다.
그러면 웹호스팅에 무료호스팅이 보일텐데 무료호스팅 눌러준다.
이렇게 나올텐데 신청하기 해주자.
네모박스 체크해주시고 무료호스팅 신청하기 눌러준다.
그러면 또다른 페이지로 넘어가지는데
여기서 보면
담당자 정보란이 있는데
담당자 정보란에는 회원가입했을때 입력했던 내용이 적혀있다.
요즘에는 집전화가 따로 없으니 전화번호와 휴대전화 똑같이 해주도록 하자.
그 다음에 계약자 정보란 다 기입해주시고
그다음 웹호스팅 설정 정보 입력 란이 있는데
여기가 가장 중요하다.
ftp 아이디랑 비밀번호를 입력하라고 하는데 이건
닷홈에 회원가입했을때 쓴거랑은 전혀 다른것이다.
똑같이 해주셔도 되는데 다르게 하실 경우 헷갈리지 않도록 어딘가에 잘 메모해두도록 하자.
ftp아이디 쓰고 중복확인해주고 비밀번호만 입력하면 다른거는 별다르게 적을 것은 없다.
확인단어 입력해주고
이메일인증 해주고
로봇이 아닙니다 체크하면
이제 우리는 무료 호스팅이 가능해진다.
만약 ftp 아이디가 good 이었다면
우리가 할당받은 주소는 good.dothome.co.kr 가 되는 것이다.
자 이제 이 다음은 Brackets라는 프로그램을 설치하여야 한다.
Brackets
웹 디자이너를위한 무료 텍스트 편집기
brackets.softonic.kr
이 사이트에 들어가서 설치해주면 되고 설치하는 방법은 다른 여러 프로그램과 크게 다르지 않다.
아무튼 그래서 설치 후 실행시키면
다음과 같이 뜬다
여기서 저희는 플러그인을 따로 설치해주어야 하는데 어렵지 않다.
파일 - 확장 기능 관리자를 들어가면
이렇게 뜰텐데 우측 상단의 검색창에 ftp를 치고 검색한다.
밑으로 스크롤 내리시면 Bracets synapse가 있는데 오른쪽에 보면 필자는 설치를 하여서 설치완료로 뜨지만
여러분들은 설치를 눌러서 플러그인을 설치해주면 된다.
그러면
필자가 빨간 동그라미친 로고가 새로 생겼을텐데 저걸 눌러준다.
그러면 이렇게 뜰텐데 저 빨간 표시한 부분에 마우스를 갖다대면 흰색 창을 약간 오른쪽으로 치울수 있다.
치워주면 +버튼이 생길텐데 +버튼을 눌러준다.
그러면 이렇게 뜰텐데
Host에 우리가 Dothome에서 받은 주소를 입력하면 된다.
이때 복사 붙여넣기가 안되니 귀찮더라도 손으로 입력해주어야 한다.
user와 password에는 웹호스팅 설정 정보입력에 넣었던 ftp 아이디와 비밀번호를 기입 한다.
setting name에 넣고싶은대로 넣으시면 된다. 물론 이 때도 한글쓰지말고 제발 영어쓰세요(단호)
다 적으면 APPEND가 활성화 될텐데 APPEND를 눌러준다.
필자는 setting name을 test로 해서 test로 떴고
구름 모양에는 아까 dothome에서 할당받은 주소가 출력되고
사람 모양에는 ftp아이디가 출력된다.
여기서 CONNECT를 눌르면
이렇게 나오는데 html을 눌러주시면
favaion.ico와
setup-finish.html이 나올 것이다.
그런데 여기서 중요한 것은
보통 국룰은 index.html로 해야하기 때문에
setup-finish.heml에 오른쪽 마우스 클릭하시고 Delete 해준다.
그리고 html 폴더에 오른쪽 마우스 클릭하셔서 new file 해준다.
그리곤 그 파일 이름을 index.html 이라고 쳐준다.
.html 이라는 확장자명까지 확실히 써주도록 하자. 일부러 안쓰고 안된다고 하지마세요
그 다음에 index.html을 클릭해준다.
그러면 우리가 코딩하는 흰색창이 생길텐데
<html>
<head>
</head>
<body>
</body>
</html>그 창에다가 다음과 같이 넣어준다.
지금 이 상태가 html의 기본 세팅이다.
head태그는 문서의 구조를 주로 나타내기때문에 body태그에 주된 코딩을 하면 된다.
한번 테스트 해보도록 하자.
<html>
<head>
</head>
<body>
good
</body>
</html>이렇게 써주자.
필자의 경우는 good.html을썼기 때문에
good.dothome.co.kr/good.html을 써주면
이렇게 뜬다.
이때 필자가 good.dothome.co.kr/good.html 라고 썼다고 그대로 똑같이 복붙해놓고 안된다고 하지말자.
맨앞에 good 대신에 여러분들이 무료 호스팅 신청할때 쓰셨던 ftp id를 쓰시고
다시 구동시키시면 되는거 보실 수 있다.
'기술노트 > 웹프론트엔드' 카테고리의 다른 글
| 웹 프론트엔드 강의(2) (0) | 2020.12.25 |
|---|---|
| 웹 프론트엔드 강의(1) (0) | 2020.12.25 |
| Notepad++를 이용한 html강의(2) (0) | 2020.12.25 |
| Notepad++를 이용한 html 강의(1) (0) | 2020.12.25 |
| Notepad++를 이용하여 html 입문하기 (0) | 2020.12.25 |
