01 홈페이지 만들기 준비 단계

포트폴리오 홈페이지 만들기

안녕하세요?

언제인지는 잘 기억은 안 나지만 막연하게 나만의 홈페이지를 가지고 싶다는 생각을 한 적이 있었어요. 

그때는 대부분 홈페이지를 나무웹으로 만들 때였는데, 저도 인터넷 강의를 들으면서 한번 시도한 적이 있었지요. 

그리고 잊고 살다가... 

이렇게 자의 반 타의 반으로 홈페이지를 제작할 수 있게 된 거죠. 

그래서 포트폴리오 홈페이지나 기업의 홈페이지를 만들 수 있는 방법을 공유해 드리려고 해요. 

물론 코딩의 세계는 제가 생각한 것보다 더 넓었고...

실제로 하나의 홈페이지가 돌아가기 위해서는 클라이언트 측 언어와 서버 측 언어를 모두 알아야 하지만...

개인적인 포트폴리오 홈페이지나, 기존의 홈페이지의 코드를 읽고 수정하는 정도라면 클라이언트 언어만 알아도 되거든요. 

실제로 제가 배운 것도 모두 클라이언트 측의 언어였고요. 서버 측은 따로 학습해서 배울 생각 중이에요. 

여기서 클라이언트 언어라는 것은 쉽게 말하면 브라우저 상에 보여지는 것을 구현하는 언어라고 할 수 있어요. 

HTML, CSS, 자바스크립트, 제이쿼리를 이용해서 홈페이지를 만드는데, 이런 언어라고 보면 돼요. 

이런 코드는 F12를 누르거나 오른쪽 마우스 클릭하여 페이지 소스보기를 하면 거기에 쭉~~나오는 코드들이죠. 

먼저 홈페이지를 만들기 위한 준비단계예요. 

 1. 웹 편집 프로그램 설치하기 

: 코딩을 하기 위한 웹 편집 프로그램을 설치해야 하는데, 

종류에는 에디터 플러스, 드림위버, 비주얼 스듀디오, 아톰에디터 등이 있어요. 

저는 첫 시작을 에디터 플러스로 했어요. 

학원에서 하드코딩을 해서 편리한 기능 따위 써본 적도 없이 노가다 코딩을 한 거죠. 

정말 모든 코드를 다 치면서 배웠어요. 덕분에 빨리 익히긴 했지만... 

에디터에는 생각보다 편리한 기능들 많으니 편집 프로그램을 설치한 후에 한번 천천히 살펴보세요. 

에디터플러스는 평가판 한달 이용 가능하고요. 

그 뒤로는 유료지만... 언제나 그랬듯 무료로 쓸 수 있는 방법들이 인터넷이 돌아다니죠~ ㅎㅎ 

 <에디터 플러스 프로그램>

그리고 제가 사용해보진 않았지만 무료로는 비주얼 스튜디오가 있어요. 

또 요즘 쉽게 코딩할 수 있는 에디터로 주목받고 있는 아톰에디터가 있는데... 이것 또한 사용해 보진 않아서 뭐라 말할 순 없지만 사용해본 친구 말로는 아주 좋다고~하네요. 

 2. 웹상에 볼 수 있도록 호스팅 서버 준비하기   

: 호스팅 서버는 내가 만든 홈페이지를 실제로 웹상에서 다른 사람들이 볼 수 있도록 하는 거예요. 

쉽게 말해 코딩 작업을 한 후 웹에 올리는 거예요. 

그러면 인터넷을 통해서 다른 사람들도 나의 홈페이지를 볼 수 있게 되는 거죠. 

호스팅을 사용하기 위해서는 사실 비용이 들지만, 무료로 사용할 수 있는 곳들이 있으니 그곳을 이용하면 좋겠죠?

저는 호스팅 서비스를 1년간 무료로 이용할 수 있는 닷홈(http://www.dothome.co.kr/)을 선택했어요. 

이용방법은

1. 회원 가입을 한다. 

2. 웹호스팅 -> 무료 호스팅 신청 클릭한다. (마음에 드는 걸로 선택)

3. 웹호스팅 설정 정보를 입력한다. 

: FTP 아이디와 비밀 번호를 입력하는데 이걸 따로 메모하거나 잘 기억해야한다. 

 웹문서를 올리는 프로그램 사용 시 필요하다. 그리고 FTP는 나의 웹사이트 주소가 된다. 

4. 신청하기 

 3. 웹문서를 호스팅 서버에 올리는 프로그램 설치 

: 여기에도 다양한 프로그램이 있지만, 저는 알드라이브를 설치해서 사용하고 있어요. 

공부하던 책에서는 Filezilla라는 프로그램도 사용하던데... 사용해 본 적이 없어서~ 패스~

먼저 프로그램을 설치하고 메뉴에 접속하기를 누르면 

사이트 정보 입력하는 창이 나와요. 

그러면 안쪽 창의 FTP 폴더 밑에 자신의 이름으로 폴더 하나를 만들어요. 

그리고 나서 오른쪽에 사이트 정보를 입력하는데, 앞서 닷홈에서 입력한 FTP 아이디와 비밀번호를 입력하면 돼요. 

그런 다음 연결을 누르면 창이 하나 뜨는데, html 폴더를 클릭하고 그 안에 작업한 웹문서 폴더를 복사 붙이기에서 넣으면 돼요. 

1. 접속하기 

2. FTP 폴더 밑에 내 이름으로 폴더 만들기 

3. 사이트 상세정보 (FTP 아이디/ 비밀번호) 입력한 후 연결하기 

4. html 폴더 클릭 한 후 그 안에 작업한 폴더/파일 올리기 

이렇게 올리고 난 후 홈페이지 주소를 찾아서 들어가면... 짜잔~!!

작업한 홈페이지가~ 나오죠~

여기까지가 홈페이지를 만들고 웹상에 올리기 위한 준비단계예요. 

이제부터는 하나씩 언어를 배워나갈 거예요. 

HTML, CSS, 자바스크립트, 제이쿼리까지... 

먼저 HTML에 대해서 알아해요. 그건 다음 포스팅에~

그럼 오늘 하루도 파이팅하세요^^