-
안녕하세요
제로이즈 입니다.
이번 강좌부터는 웹사이트에 최초 접속 화면인
메인을 코딩 하도록 하겠습니다.
그 전에 APMSETUP 강좌 기본 부분을 정하도록 하겠습니다.
- 다음 이미지 처럼 폴더 구조를 만들어 주세요
해당 폴더는 APMSETUP 폴더 내에 총 4가지의 폴더를 생산해 두었습니다.<!-- 참고 안내 // -->
보는 봐와 같이 3가지의 강좌를 시작으로 최종 사이트를 만드는 총 4가지 단계를 진행활 예정 입니다.
- 프로젝트A 는 레이아웃 중심의 강좌로 필요한 전 페이지를 코딩할 예정 입니다.
- 프로젝트B 는 PHP와 MySQL를 통한 개발 중심의 강좌를 진행할 예정 입니다.
- 프로젝트C 는 자바스크립트 와 제이쿼리를 활용한 웹사이트의 액션감을 표현할 예정 입니다.
- 그리고 마지막으로 정말 기획 부터 개발까지 전체 적인 일정으로 실무적 위주의 최종 강좌가 될 것 같습니다.
할 수 있을지는 모르겠지만 끝까지 함 달려 보도록 하겠습니다.
<!-- // -->
그리고 [project_a] 폴더에 다음과 같이 폴더를 생성해 주십시오!
그리고 마지막으로
나중을 위해 파일 저장시 html 아닌 php파일로 저장 하도록 하겠습니다.
(프로젝트B에서는 php개발을 강좌할 예정입니다.)
여기까지 안내 맞치도록 하겠습니다.
<2016년 11월 10일>
아래의 코드를 메모장에 입력 하여 주세요
<!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에서 '<!-- 설명 -->' 해당 표기는 주석이라고 합니다.
해당 주석 부분은 웹상에 표기 되지 않습니다.(코드 상에는 보임)
<!--// -->
위의 기본 레이아웃을 정할 건지 주석을 한 내용 입니다.
저장을 해서 브라우저에서 실행해 봐주세요.
저장 위치 및 저장파일명 : APM_Setup > root_home(htdocs) > project_a > index.php
<예시.1>
<예시.2>
<!-- 안내 //-->
- 예시.1의 박스 내용을 주의 하세요
- 실행시 크롬 브라우저에서 실행하여 주세요 앞으로 나중에 스타일(CSS) 적용 디버깅하기 편리하기 위해서 입니다.
- 예시.2와 같이 아무것도 안보입니다.
<!--// -->
실행을 하였다면 아무것도 보이지 않을 것 입니다.
해당 소스에는 실행명령어는 하나도 없기 때문 입니다.
크롬 브라우저에서 키보드 [F12]를 누르면 그림.3번과 같은 소스가 보입니다.
<예시.3>
메모장에 입력한 내용이 그대로 보이는 것을 확인 할 수 있습니다.
해당 소스는 서버상에 명령을 주지만 웹브라우저(웹클라이언트)상에는 어떠한 전달값을 부여 하지 않는 것들 입니다.
<!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>
<!-- 콘테이너 영역 시작 // -->
<div id="conteiner">
<!-- 헤더 영역 //-->
<div id="header">
</div>
<!--// 헤더 영역 끝 -->
<!-- 콘텐츠 영역 시작 -->
<div id="contents">
</div>
<!--// 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작 //-->
<div id="footer">
</div>
<!--// 푸터 영역 끝 -->
</div>
<!--// 콘테이너 영역 끝 -->
</body>
</html>이번에는 위의 소스를 입력하여 저장 후 실행 하여 주세요
그럼 아래의 예시.4 처럼 보입니다.
<예시.4>
어 그런데 이번에도 아무것도 보이질 않네요...어떻게 된걸 까요..
하지만 예시.4와 예시.2와는 다른 상태 입니다.
예시.4는 보이지는 않지만 명령어 들이 실행 되어 있는 상태 입니다.
확인을 하기 위해 아래의 소스를 입력 후 저장 하세요
<!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>
<!-- 콘테이너 영역 시작 // -->
<div id="conteiner">
콘테이너 영역
<!-- 헤더 영역 //-->
<div id="header">
헤더 영역
</div>
<!--// 헤더 영역 끝 -->
<!-- 콘텐츠 영역 시작 -->
<div id="contents">
콘텐츠 영역
</div>
<!--// 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작 //-->
<div id="footer">
푸터영역
</div>
<!--// 푸터 영역 끝 -->
</div>
<!--// 콘테이너 영역 끝 -->
</body>
</html>위에 소는 div라는 영역에 한글로 타이핑을 입력 하였습니다.
브라우저에서 실행 하면 해당 타이핑 내용이 보여 집니다.
여기서 중요한건 div라는 영역으로 타이핑이 감싸여 있다는 것을 알 수 있습니다.
<예시.5>
<예시.6><예시.7>
예시.7번과 같이 사실은 이렇게 박스안에 타이핑 내용이 둘러 싸여 저 있는 것 입니다.
아직 div에 뻐대만 있고 css(스타일)이란 옷을 안 입힌 것이지요.
그럼 좀더 확실하게 하기 위해서 아래의 코드를 입력하여 비교 하도록 하겠습니다.
<!-- 안내 //-->
앞으로는 <body> 앞부분과 </body> 뒷 부분은 표기 안하고 소스를 보여 드리겠습니다.
참여하시는 분들은 항시 고정 값이니 꼭 입력 하세요
<body></body> 안쪽만 변경 하거나 코딩하여 저장 하세요
해당 설명이 있을 경우에만 나머지 영역을 표기 하도록 하겠습니다.
<!-- // -->
<body>
<!-- 콘테이너 영역 시작 // -->
<div id="conteiner" style="padding:10px; background-color:#09F;">
컨테이너 영역
<!-- 헤더 영역 //-->
<div id="header" style="width:100%; height:100px; background-color:#F6C;">
헤더 영역
</div>
<!--// 헤더 영역 끝 -->
<!-- 콘텐츠 영역 시작 -->
<div id="contents" style="width:100%; height:300px; background-color:#F99;">
콘텐츠 영역
</div>
<!--// 콘텐츠 영역 끝 -->
<!-- 푸터 영역 시작 //-->
<div id="footer" style="width:100%; height:50px; background-color:#F63;">
푸터영역
</div>
<!--// 푸터 영역 끝 -->
</div>
<!--// 콘테이너 영역 끝 -->
</body>입력 후 저장 실행 한다면 아래의 그림 처럼 실행 됩니다.
<예시.8>
바로 기본 html에 css를 적용한 모습 입니다.
이렇게 기본적인 html 차이점을 확인 하여 보았습니다.
이제 본격적으로 메인 홈의 레이아웃을 코딩 하도록 하겠습니다.
-