Skip to content

?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 수정 삭제
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 수정 삭제
 꽤 길어짐니다. 하지만 10%로도 다 설명 하지 못한 검니다.

 

홈피만들기는 최소 책한권 분량의 내용입니다.

 

암튼 전에 써 놓은 것이 있어 그냥 붙여 봄니다.

 

 

 html 이나 태그에 관심이 있거나 나모웹에디터나 드림위버같은 프로그램을 다룰줄 안다면

 

홈피나 한번 만들어볼까 라는 생각한 한 시점부터 어느정도까지는 작업이 순조롭게 진행된다.

 

하지만 그렇지 않은 경우

 

시작하기도 전에 모르는 용어와 개념들로 인해 여기저기 검색해보지만 머리만 더 복잡해진다.

 

그래서 여기서는 우선 아주 기본적인 개념을 잡고

 

홈피를 만드는 방법 중 두가지 정도를 소개할까 한다.

 

우선 홈피를 만들기 전에 필요한 것들이있다.

 

지금 우리가 인터넷상에서 보는 모든 글이나 그림 동영상 음악등은 모두 서버에 저장된 것들이다.

다시 말하면 서버에 저장되지 않고 단지 내컴에만 있는 파일은 절대 다른 사람들에게 보여지지 않는다는 것이다.


가끔 질문 올라오는 것들을 보면 내가 가지고 있는 mp3파일을 사용해서 배경음악으로 블러그에서 들여주고 싶다. mp3파일을 소스로 어떻게 바꾸냐는 질문이 종종 있다.

 

답은 서버에 올리면 된다이다.(호스팅이든 첨부파일로든)

 

다만 개인 홈피를 위해 직접 서버를 운영하거나 임대하는 것은 너무 비효율 아니 비현실적이다.

비용도 그렇고 관리도 쉽지 않기에

 

그래서 개인 홈피를 만드는 분들은 거의 웹호스팅을 이용한다.

웹호스팅이란 업체에서 자신의 서버에 용량을 나눠서 개인에게 임대해주는 서비스이다.


좀더 쉽게 말하자면 고성능에 초고속 회선이 연결된 서버컴퓨터의 하드디스크 용량중 일부를 빌려서 사용한다는 개념이다.

 

보통 50~100메가 정도는 무료로 제공을 한다.

 

암튼 어떤 호스팅업체든 무료호스팅 신청을 완료 했음 자신의 아이디가 들어가 도메인을 받게 된다.

 

예를 들어 http://www.home.co.kr  홈이라는 호스팅업체가 있다고 하자

이곳에 aaa란 아이디로 호스팅을 신청하면

http://aaa.home.co.kr/   이란 도메인을 준다.

 

간혹 어떤분들은 여기까지 한것을 가지고 홈피를 거의 다 만들었는데 이제 어떻게 해야 하냐고 하시는분도 계신데 그러진 말자..ㅠㅠ

 

그럼이제 웹상에 나만의 저장공간이 생긴것이다.

이 저장공간인 호스팅에 접속해서 내가 만든 파일을 올리거나 올린 파일을 지우거나 다운받을 일이 생기는데 이러한 것을 해주는 프로그램이 ftp란 프로그램이다.

 

ftp란 결국 내컴과 호스팅을 연결해줘서 파일을 관리할수 있게 해주는 프로그램이라 할수 있다.

지금 사용하는 ftp프로그램이 있다면 상관없지만 그렇지 않다면 걍 알ftp 쓰자

 

네이버에서 알ftp치면 다운받기도 편하고 한글로 되었구 좀 문제가 있다는 말은 있지만 몇년째 사용하면서

크게 불편을 느낀적은 없으니....( http://file.naver.com/pc/view.html?fnum=324466&cat=61)

 

ftp를 다운받아서 설치하고 사이트 추가를 해서 내 호스팅주소와 아이디 비번등을 입력하면

위쪽에 호스팅에 있는 파일이 보인다.

 

여기까지가 웹호스팅까지의 기본 개념이고

 

이제 홈피만들기 쪽으로 넘어가보자

 

홈피는 기본적으로 html이란 언어로 이루어진다.

지금 보는 페이지에서 보기메뉴에서 소스보기나 원본보기를 하면 영문으로 쭉 나오는 것들이 html이다.

 

그래서 홈피를 만들때 메모장만으로도 만들수 있다.

물론 배경이나 메뉴버튼등은 포샵을 이용해야 하겠지만 포샵을 이용해서 만들어 논 이미지들은

메모장에서 html 소스로 붙여 넣는 방식으로 홈피를 만들게 된다.

 

간단한 홈피 같은 경우는 html 강좌나 태그 강좌 한두번정도 쭉 보면 만들수 있다.

어차피 개인홈피에서 사용되는 태그는 링크 , 테이블, 프레임, 이미지관련, 레이어정도니까,

 

근데 이렇게 메모장으로 만들게 되면 단점이 하나 있다.  내가 지금 하는 작업의 결과를 보려면 메모장을 저장하고 나와서 파일을 다시 더블클릭해서 열어야 한다는 것이다.

그리고 만약 어떤 이미지를 넣는다고 할때 아무리 감각이 있어도 이미지의 크기를 조절해야 할때는

이미지 크기를 숫자로 넣고 나와서 어 좀 큰가 숫자 조금 올리고 다시 저장하고 나와서 너무올렸나....

 

답답하다. 그래서 차라리 나모웹에디터를 사용하는 것이 좋기도 하다.

나모는 한글하고 인터페이스가 비슷해서 한글에서 표그리고 그림 넣듯이 하면 알아서 html로 변환 해주니까

 

참 편하긴 한데 별 쓸데없는 소스들이 많이 붙어서 소스를 보면 좀 많이 지저분해 진다.

그리고 정말 딱 내가 원하는 데로 되지 않는다. 이때 html을 조금 알고 있음 좀더 쉽게 문제해결이 가능해진다.

 

암튼 이렇게 나모든 메모장이든 이용해서 웹페이지를 만들고 페이지에 들어갈 배경이나 이미지 버튼도 만들었다면  아까 말한데로 ftp로 파일을 전부 올리면 되는데

 

이때 또 많은 문제가 생긴다.

 

바로 엑박이라는 것

내컴에선 잘보이던 이미지들이 웹상에서는 하나도 보이지 않게 되는 것인데

이런 문제의 대부분은 경로 문제이다.

 

특히 나모를 쓰시는 분들에게 많이 일어나는데

나모에선 이미지를 삽입하면

이미지의 경로 즉 위치가 c:// 이런식으로 내컴의 위치로 지정되는데

 

이상태로 웹상에 올리면 어쩜 내컴에서는 제대로 보일지 모르나 다른 사람들은 안보이게 된다.

다른 사람의 컴 c:// .... 이위치에 그림이 있을리 없으니까.

(나모에서나 이미지를 삽입한다는 것은 html문서에 이미지를 넣는다는 의미가 아닌 이미지의 위치를 지정해주고 그 이미지를 출력하라는 명령어를 넣는 과정일뿐 html문서에는 이미지가 포함되지 않는다)

 

위에서 홈을 예로 들었는데

많은 호스팅이 대부분

 

ftp를 이용해서 호스팅에 접속하면

 

html 이란 폴더가 있다. 이 폴더가 내가 사용할수 있는 공간이다.

아까의 예에서

 

내 홈피의 주소가 http://aaa.home.co.kr/  이라고 했을 경우

111.jpg란 그림을 html 폴더 안에 업로드 했다면

 

이 이미지의 주소 (경로, 위치)는

http://aaa.home.co.kr/111.jpg 가 된다.

 

html 폴더 안에 넣긴 했지만 절대경로를 입력하는 것이 아닌이상 위처럼 html은 빼게 된다.

하나더

만약 html폴더 안에 img란 폴더를 만들어서 111.jpg란 이미지를 넣었다면,

http://aaa.home.co.kr/img/111.jpg  이렇게 되겠지...

 

상대경로란 것도 있는데 이건 걍 검색해 보시길(http://blog.naver.com/nadark79/208822480)

 

이정도까지 했음 홈피의 틀이라고 하는 레이아웃은 완성이 되있는 상태일것이다.

 

이제 홈피라면 그래도 로그인창하고 게시판 정도는 있어야 하는데

 

배포도 중지된 제로보드4를 기준으로 설명하면 안되긴 하지만 그누보드는 써보질 않아서......

 

제로보드 4는 설치형 게시판으로 게시판(메모장, 갤러리, 방명록)기능 이외에 로그인 최근게시물 간단한 회원관리 정도에 기능이 있다.

 

제로보드4 파일을 다운 받아서 압축을 푼뒤 ftp로 bbs 폴더를 업로드 해서 설치페이지로 들어가 설치하는 방식이다.

http://blog.naver.com/nadark79/208822556

 

앞서 말했듯 보안상의 이유로 배포가 중지 되었지만 아직 많은 분들이 사용중이긴 하다.

 

어떻게 얘기 하다보니 자신이 직접 웹페이지를 만들고 게시판을 가져다 쓰는 형태의 홈피에 대한 얘기를 마치게 됬는데

 

지금 부터 할것은 xe다.

제로보드 xe라고 하지만 잘못된 것이구 걍 xe가 맞다.

 

xe는 제로보드의 진화된 모습이라고 할수 있다.

제로보드가 게시판이라면  xe는 홈피 빌더이다.

 

얼마전에 1.5버젼이 나왔는데 설치 과정이 전보다 쉬워진 듯하다.  http://blog.naver.com/nadark79/208822603

xe 역시도 자신의 호스팅에 업로드해서 설치하는 방식이다.

 

익스프레스엔진에 가면 xe 코어를 다운 받을수 있다.

다운받은 뒤 압축을 풀면 xe란 폴더가 있는데 이걸 내 호스팅에 업로드 한다.

 

그런다음 http://홈피주소/xe/  이렇게 들어가면 설치과정이 진행되고


관리자 페이지로 들어가서

쉬운설치를 통해 게시판 모듈이나 이미지 슬라이던 위젯 최근글 위젯등 다양한 것들을 설치 할수 있고

꽤 많은 레이아웃을 다운 받을 수도 있다.

(http://blog.naver.com/nadark79/208822674)

 

그렇다고 xe는 다른 사람들이 업로드 해놓은 것만 내가 다운 받아 사용할수 있는 것은 아니다.

초중급 정도에 html 실력과 css에 대해 어느정도 이해만 있다면

 

포샵 작업을 동반해서 간단한 레이아웃정도는 만들수 있을 것 같다.

(http://blog.naver.com/nadark79/208822717)


 

처음 글을 시작하면서는 그림도 넣고 캡쳐한것도 좀 올리고 그렇게 생각했는데

 

막상 쓰다보니 글만 엄청 길어진것 같고

완전 초보자 분들에겐 설명이 좀 부족한것 같구

조금 맛본 분들에겐 다 아는 내용이 될거 같구 그러네요....ㅠㅠ

 

암튼 생각나는 데로 쭉 써내려와서 빠진 내용도 있고 괜히 길어진 부분도 있꼬

오타도 상당할거라 예상되고 합니다.

 


제 홈피 이지만 제가 만든건 아니고 다운 받은 레이아웃에 게시판 설정만 몇가지 조정 해준게 다입니다.

솔직히 xe는 저두 이번에 처음 사용하는 거라 좀 버벅거리긴 했는데

설명만 잘따라 하면 한두시간 이면 충분히 만들수 있을거란 생각도 들더군요

 

홈피 만들기 참 쉽지 않은 일이었지만

이젠 또 쉽게 만들수도 있습니다.

 

디자인 쪽에 소질이 있으시면 html 조금 공부하셔서 직접 홈피 디자인 하는 것도 좋을 것 같습니다.

긴글 읽어 주셔서 감사하고

 

이쁜 홈피 만드시길



추가 도메인에 대한 부분이 전혀 언급이 안된거 같다.


앞서 예에서 홈이란 업체에서 aaa란 아이디로 호스팅을 받으면


http://aaa.home.co.kr  이란 호스팅 주소를 받게 된다.


개인홈피라면 그냥 이걸 그대로 사용해도 무방하다.


업체홈피라모 홈피 운영자체엔 문제가 없다.


다만 업체일경우home 란 타사 업체의 이름이 들어가니 좋지 않다.


여기서 도메인이란 개념이 들어간다.


만약 도메인구입 사이트에서 http://bbb.co.kr  이란 도메인을 구입해서 사용한다는 것은


간단히 말해서 http://aaa.home.co.kr   을 http://bbb.co.kr  로 연결해준다는 의미라 할수 있다.


이걸 도메인 포워딩이라 한다.


실제 유료 도메인의 설정은 이런 방식이 아닌 네임서버를 설정하는 방식이고


흔히 무료 도메인이라 불리는 것들 대부분이 위에서 말한 포워딩서비스다.


암튼 개념자체는 도메인은 단지 물리적 공간이 아닌 


호스팅이란 물리적 공간에 이름을 하나 정해서 연결해준다는 의미가 될거다.


  1. 데모사이트 관련

    Date2013.05.07 Categoryxe레이아웃 Bygsm Views8704
    read more
  2. XE 버젼 업에 따른 관리자 페이지 변경

    Date2013.04.28 CategoryXE 홈피 Bygsm Views9354
    read more
  3. 원격 프로그램 팀뷰어

    Date2012.12.13 Category기타팁 Bygsm Views9378
    read more
  4. 초보자들을 위한 홈피만들기에 개념?

    Date2012.10.16 Category기타팁 Bygsm Views9967
    read more
  5. xe 설치과정입니다.

    Date2012.10.05 CategoryXE 홈피 Bygsm Views10107
    read more
  6. 개인 홈페이지, 팬페이지 무료 홈페이지 만들어 드릴까요?

    Date2014.04.29 Categoryxe레이아웃 Bygsm Views2935
    Read More
  7. 팬페이지 만들기 3 - 사이트메뉴 편집과 페이지

    Date2013.11.24 CategoryXE 홈피 Bygsm Views2716
    Read More
  8. 팬 페이지 만들기 2 - ftp 설정과 쉬운설치로 게시판 설치

    Date2013.11.24 CategoryXE 홈피 Bygsm Views2531
    Read More
  9. 팬페이지 만들기 1 - xe설치

    Date2013.11.24 CategoryXE 홈피 Bygsm Views2479
    Read More
  10. 팬페이지 만들기 서론

    Date2013.11.11 CategoryXE 홈피 Bygsm Views2232
    Read More
  11. 3_2

    Date2013.11.03 Category연습용 Bygsm Views4
    Read More
  12. 33333

    Date2013.11.03 Category연습용 Bygsm Views6
    Read More
  13. 222

    Date2013.11.03 Category연습용 Bygsm Views6
    Read More
  14. 팬페이지 만들기 - 1

    Date2013.11.02 Category연습용 Bygsm Views2641
    Read More
  15. 위젯 코드 생성 후 스타일 적용하기

    Date2013.09.24 CategoryXE 홈피 Bygsm Views2249
    Read More
  16. elkha_neutral 레이아웃

    Date2013.01.19 Categoryxe레이아웃 Bygsm Views3003
    Read More
  17. Elkha - Gray Style 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2818
    Read More
  18. Elkha - T.S.K. 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2882
    Read More
  19. KSO 컬럼니스트 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2881
    Read More
  20. sketchbook5 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2770
    Read More
  21. Elkha - monochrome 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2720
    Read More
  22. 다이나믹 레이아웃

    Date2013.01.17 Categoryxe레이아웃 Bygsm Views2002
    Read More
  23. xe 제작 동영상 강의 소개

    Date2013.08.13 CategoryXE 홈피 Bygsm Views3334
    Read More
  24. 트위터 위젯

    Date2013.06.19 CategoryXE 홈피 Bygsm Views3405
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6

Recent Articles

Gloomy의 비오는 일요일 홈피는 모든 저작권을 포기합니다.

Powered by Xpress Engine / Designed by Sketchbook

sketchbook5, 스케치북5

sketchbook5, 스케치북5

나눔글꼴 설치 안내


이 PC에는 나눔글꼴이 설치되어 있지 않습니다.

이 사이트를 나눔글꼴로 보기 위해서는
나눔글꼴을 설치해야 합니다.

설치 취소