-
안녕하세요
제로이즈 입니다.
나만의 웹사이트 제작을 시작 하도록 하겠습니다.
일인 일사이트를 운영하는 그 날 까지...^^
웹사이트를 만들기를 하기 위해서는 여러가지를 알아야 하며, 준비해야 합니다.
하지만 여기에서는 전반적인걸 초급 수준으로 사이트를 만들어 보도록 하겠습니다.
해당 강좌는 교육이 아닌 무작정 따라 하기 입니다.
이해가 안되는 부분은 '댓글'로 문의 하여 주세요(시간이 될때마다 답변 달아 드립니다. ㅠㅠ;)
해당 강좌는 날짜 별로 계속 업데이트 됩니다.
수정된 부분은 댓글로 공지 하도록 하겠습니다..^^
<2016년 11월 10일>
■ 준비사항
1. APM 설치
2. 에디터
위의 두가지를 준비를 미리 준비 하셔야 하지만
APM설치는 APMSETUP으로 설치 하도록 하겠습니다.
설치 방법은 [http://zerois.co.kr/?r=zi&c=188/226&uid=1435] 여기서 확인 하세요
에디터는 여러가지가 있습니다.
에디터플러스, 압타나, 나모웹에디터, 드립위버 등 여러가지가 있습니다.
그러나 이놈들은 전부 유료(기간체험 가능) 입니다.
전 개인적으로 사용하는건 에디터 플러스 및 드림위버를 사용중이며, 회사에서는 압타나를 사용중에 있습니다.
하지만 이번 강좌에서는 일단 평생무료인 '메모장'으로 하도록 하겠습니다...^^(사실 메모장으로 하면 좀 귀찮기도 합니다..ㅠㅠ;)
서두가 좀 기내요...!!
이제 본경 적으로 시작 하도록 하겠습니다.
■ 기획하기
기획이란?
간단이 말하면 내 사이트를 어떻게 운영 할 것이고 사용자에게 어떻게 표현 할것 인지 정하는 것 입니다.
(좀더 복잡하고 여러가지를 하지만 기획은 별도록 공부 하세요..^^;...뭐 아님 별도 강좌를 하던 하겠습니다...^^)
간단이 정하도록 하겠습니다.
1. 메뉴 : 홈 / 인사말 / 일기장 / 방명록
2. 레이아웃 구성 : 메인 / 서브
이렇게 구성하도록 하겠습니다.
좀더 상세하게 설명 한다면
첫번째 화면 메인(index) 화면 기본 레이아웃 입니다.
<기본 메인 레이아웃>
<기본 서브 레이아웃>
이런식으로 구성을 하도록 하겠습니다.
이렇게 레이아웃 구성을 하고 나면 디자인을 해야 하나.
디자인을 하기 위해서는 보통 포토샵으로 작업을 합니다.
하지만 포토샵은 유료(무지 비싼)프로그램 이므로 패스 하도록 하겠습니다.
해당 강좌에서는 전부 html과 CSS를 통해서만 사이트를 만들도록 하겠습니다.
2. 메인 코딩하기
지금 부터는 웹에 기본인 html로 코딩을 시작 하도록 하겠습니다.
윈도우에서 메모장을 실행하여 주세요
(설마 이것 못여시는 분 없으시죠...^^;...설명 안하겠습니다...!!)
메모장을 열어 다음의 코드를 입력하세요
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
해당 코드는 html을 시작하는 기본 문법 입니다.
설명은 html 강좌를 할때 설명 하도록 하겠습니다.
그리고 기본 코드에 필수 적으로 입력해야 할 것 들은 아래 코드를 확인 하세요
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>타이틀 입력</title>
</head><body>
해당 영역부터 웹브라우저(웹 클라이언트)에 노출 되는 영역 입니다.
</body>
</html>해당 코드들이 기본 html 코드에 필수적인 코드를 삽입된 코드 입니다.
이렇게 하면 바로 html를 시작 할 수 있는 기본 코딩 상태 입니다.
해당 코드를 메모장에 저장 후 실행 하세요
(실행 방법은 APMSETUP에서 설명 되어 있으니 참고 하세요>
테스트 순서
- APMSETUP 실행
- APMSETUP > htdocs 폴더에 text.html로 저장(주의 : 저장시 꼭 파일형식은 '모든 파일' 인코딩은 'UTF-8'로 선택)
- 브라우저(IE or 크롬) 실행 후 url 주소창에 http://localhost/test.html' or 'http://127.0.0.1/test.html' 실행 하면 완료
다음 강좌 부터는
코딩(소스) 중심으로 설명 하도록 하겠습니다.
-