요새 자기소개용 홈페이지를 만드느라 맨바닥부터 시작해보고 있습니다.
아무것도 모르는 백지상태에서 시작하느라 머리가 느무느무 아픈데
혹시 저처럼 머리가 깨질 것 같은 분이 있을까 하여 필요한 정보를
간단하게 써봅니다.
0. 홈페이지에 대한 이해
홈페이지는 사람과 같아서 크게 뼈대와 살, 그리고 기타 파트(뇌, 눈알 등등)으로 이루어져 있습니다.
만드는 순서 역시 뼈대 -> 살 -> 기타파트지요.
1.뼈대세우기 html
뼈대는 html로 만듭니다. 요새 html5라는 말이 많이 나오는데 이건 html의 최신버전입니다. 즉 html을 배우건 html5를 배우건 결국 연결이 되어있습니다. 쌩 초보부터 배운다면 html을 먼저 배우는 것을 추천합니다. 저도 그렇게 배웠음.
html을 통해서 markup을 만든다고 표현합니다. 예를 들어 이렇게 생겼음..
<html>
<head>
<title>hello, world!</title>
</head>
<body>
<h1>I hate learning html5!!</h1>
</body>
</html>
이건 굉장히 간단한 마크업이지만, 얼마든지 복잡해질 수 있음.. 특히 디자인 요소를 살려서 만들기 위해서는 각 파트를 묶는 센스가 정말 필요합니다. 요건 css에 가서 자세하게 설명하도록 하겠음. 암튼 이 뼈대작업을 먼저 다 마친후에 살을 바르는 다음 단계 css로 넘어갑니다.
2. 살 바르기 css
뼈대를 다 세웠으면 이쁘게 살을 발라봅니다. 모두 생물시간에 배웠다시피 피부는 각 층을 이루어져 있는데, 얼추 대부분 어디에 붙어있건 간에 같은 구조로 되어 있습니다. 요게 포인트임!
css가 없는 html 뼈에 살(스타일)을 입힐려면 어떻게 해야 할까요.. <style>.....</style>이런 태그를 각 뼈대마다 다 써줘야 하는 개노가다를 해야할 겁니다..
그런데 만약! 살들을 한꺼번에 모아서 스타일을 지정해 줄 수 있다면??? 한번 수정으로
관련된 모든 피부스타일을 바꿀 수 있게 되는겁니당... 그게 바로 위대한 cascading style sheet, CSS입니당. 대충 이렇게 생겼음다.
.wrapper {
width: 560px;
text-family: san-serif;
}
의미 - wrapper라는 클래스가 붙은 html의 너비는 560픽셀, 글자스타일은 산세리프로 지정한다.
클래스니 뭐니 하는건 직접 배우면서 익히시길 바랍니다.
3. 기타 파트 붙이기 javascript
자 이거는 저도 아직 못 해본 것입니다.. html이랑 css하기에도 벅차서 손을 못댔는데 뭐 기본적으로 이렇습니다. 뼈랑 피부만 있다고 사람인가요? 움직이고 말도 해야 사람이지. html와 css만으로 구축된 사이트는 좀 재미가 없습니다. 막 불이 번쩍번쩍하고 사진도 휙휙 돌아가는 다이나믹 이펙트를 주는 놈이 바로 javascript지요. 거기에 뭐 jquery등등 해서 효과를 현란하게 주는 것이 이것입니다. 익히기가 어려운지 이미 만들어진 템플릿을 복사붙여넣기해서 사용하는 사람들도 많은듯 합니다!
*** javascript는 선택일뿐. html과 css는 필수임다! ***
4. 다 만들었다면 이제 홈페이지를 올려봅시다!
필요한 것은 호스팅과 도메인입니다.
cafe24에서 약 3시간에 걸려 돌아다닌 끝에 알게된 귀중한 정보...
이해하기가 너무 어려워서 머리가 뽀개질 것 같슴다.
4-1 호스팅이란 무어냐.
자 우리가 지금까지 만든 html과 css파일은 지금 내 컴터에 있슴다. 이걸 웹상에 올려야
사람들이 홈페이지를 볼 수 있겠죠? 물론 내 컴터에 서버를 설치할 수도 있으나 우리같은
양민들은 못하므로, 웹호스팅을 이용하여 우리의 파일을 웹에 올려서,
24시간동안 접속이 가능하도록 합시다. 이것이 호스팅임.
cafe24에 가면 호스팅 서비스를 월 500원에 이용할 수 있슴다.
4-2 도메인이란 무어냐.
도메인은 홈페이지 주소입니다. cafe24에 가면 무료 도메인을 받을 수 있으나? 주소 끝에 cafe24이렇게 붙여야 됨다. 사고 싶은 사람은 1년에 22000원 정도 내면 자기가 하고 싶은 주소로 할 수 있는듯.. 비싼것도 있음. 암튼 이걸 지르도록 합니다.
4-3 ftp란 무어냐.
ftp는 파일 트랜스퍼 프로그램으로서, 우리가 만든 파일을 웹에 전송하는 장치입니다.
무료인 파일질라 등을 사용하는 건데, 프로그램을 다운받고, 호스팅 주소 (웹사이트 주소) 호스팅 아이디 비번을 치면 접속이 됨니다. 이제 우리의 파일을 올리면 됨!
**만약 올렸는데도 404 not found가 뜨면.. (저는 이거땜에 2시간동안 방황)
ftp로 올릴때 파일 전체를 www라는 이름의 폴더 안에 넣어야 합니다. 그러면 됨!
도움이 되었기를 바랍니다!
No comments:
Post a Comment