1.4 환경 설정 및 기본 편집기
이 책에 나타난
예제들을 테스트하기 위한 환경으로 Apache 웹 서버를 사용하고 웹 브라우저는 상황에 따라 IE9, Firefox, Chrome, Safari, Opera를 사용합니다. 이
책에 나타난 예제들의 상당 부분은 Apache, IIS, ngnx 같은 웹 서버가 필요하지 않습니다만
보다 정확한 테스트를 위해서는 웹 서버 기반으로 테스트해 볼 것을 권합니다.
이 책에서는 Windows용 Apache 웹
서버를 사용하였으며 설치 파일은 “http://httpd.apache.org/”으로 이동하여 좌측의 Download! 밑에 있는 from a mirror 링크를 클릭하여
다운로드 화면으로 이동한 후 현재 안정 버전인 2.2.21을 클릭하여 다음의 버전을 다운로드합니다.
Win32 Binary without crypto (no mod_ssl) (MSI Installer):
httpd-2.2.21-win32-x86-no_ssl.msi
1.4.1 Apache 웹 서버 설치
및 환경 설정
다운로드가 완료되면 더블 클릭하여 설치를 시작합니다.
Apache 웹서버의 기본
웹 문서의 위치
Apache
웹서버에서 기본적으로 HTML, HTML5 문서는
다음과 같이 Apache Software Foundation 디렉토리 밑에 설치된 Apache 버전 디렉토리의 하부 디렉토리인 htdocs 디렉토리에
위치하게 됩니다.
“D:\Apache Software Foundation\Apache2.2\htdocs
그래서 여러분이 방금 전 본 화면 “It works!”라는 문자열은 윈도우 탐색기를 이용하여 htdocs 디렉토리로 이동한 후 그 안에 있는 index.html 파일을 메모장으로 열어보면 알 수 있듯이 “<html><body><h1>It works!</h1></body></html>”로 되어 있어서 브라우저 화면에 “It works!”라고 표시를 해주는 것입니다. 이제 정상적을 동작하는 것을 확인했으므로 index.html 파일을 삭제합니다.
Apache 웹서버 자동
실행 및 수동 실행 설정
여러분들은 Apache 웹서버를 컴퓨터를 켜면 자동 실행되도록 할 수 있고 필요할 때 실행되도록 할 수 있습니다. 이러한 작업은 시작-설정-제어판-[관리 도구] 에 있는 서비스를 이용하여 설정이 가능합니다.
위에서 서비스를
더블 클릭하면 다음과 같이 현재 운영체제에서 설치되어 동작하는 서비스들을 나타내며 아파치 서비스는 현재 시작 유형이 수동, 즉 필요할 때 Apache 웹 서버가 반응하도록 설정되어 있습니다.
만일 컴퓨터를
켜면 자동적으로 Apache 웹 서버가 동작하도록 하려면 Apache의
해당 라인을 마우스로 선택하고 오른쪽 마우스 버튼을 클릭하면 나타나는 팝업 메뉴에서 속성을 클릭합니다.
그러면 다음과 같이 Apache의 서비스의 실행 파일 경로, 시작 유형, 서비스 상태 등을 확인할 수 있으며 시작 유형에서 자동으로 선택하고 적용을 해주면 다음에 컴퓨터를 켜게 되면 자동적으로 Apache 웹 서버가 동작을 하게 됩니다.
이번에는 수동으로
설정되어 있을 때 필요할 때 Apache 웹 서버가 동작하도록 하려면 작업 표시줄의 알림 영역에 보면
Monitor Apache Servers 아이콘이 다음과 같이 있습니다.
위에서 Open Services를 클릭하면 방금 전 자동에서 본 시작-설정-제어판-[관리 도구] 에
있는 서비스 화면이 나타나며 여기서 Apache 웹 서버가 동작하도록 할 수 있습니다.
하지만 보다 간단한 방법인 Open Apache Monitor를 클릭하여 다음과 같이 현재
동작하고 있지 않은 Apache 웹 서버를 시작할 수 있습니다.
위에서 Start 버튼을 클릭하면 정지해 있던 Apache 웹 서버가 다음과
같이 정상적으로 서비스를 시작하며 작업 표시줄의 알림 영역에 보면 Monitor Apache Servers 아이콘이
다음과 같이 바뀌어 나타납니다.
이러한 상태에서
“D:\Apache Software Foundation\Apache2.2\htdocs” 즉 Apache 웹 서버의 기본 웹 문서의 위치에 웹 페이지를 작성한 후 웹 브라우저를 이용하여 “http://localhost/웹페이웹.html” 형태로 웹 서버에
연결하면 이 책에서 다루는 모든 예제를 이해하는데 문제가 없을 것입니다. 여기까지 Windows Vista만을
기준으로 Apache 웹서버의 환경 설정에 대해서 설명했지만
Windows XP, Windows 7같은 대부분의 Windows 운영체제에 적용하는데
그리 어렵지 않을 것입니다.
끝으로 이 책에서는 웹 브라우저에서 “http://localhost/웹페이지.html” 형태를 사용합니다만 참고 삼아 Windows용 apache 웹 서버를 설치하고 IE9나 firefox, chrome 같은 웹 브라우저를 이용하여 접속할 때 IP 형태로
접속하도록 나타내기 위해서 IP 주소를 설정하는 방법을 소개하면 다음과 같습니다. 먼저 Windows용 apache가
설치된 디렉토리로 이동합니다. 제 경우는 D 드라이브에 설치했으므로
“D:\Apache Software Foundation\Apache2.2” 입니다.
conf 디렉토리를 열어서 httpd.conf 파일을 메모장으로 열고 다음과 같이 “If your host~” 부분을 찾아서 다음과 같이 ServerName 부분에 IP 정보를 입력합니다.
# If your host doesn't have a registered DNS name, enter its IP address here.
#ServerName edupickerlocalhost:80
ServerName 192.168.0.5:80
위와 같이 설정해주면 내부 네트워크에서 “http://192.168.0.9/웹페이지” 형태로 웹 브라우저에서 접근이 가능합니다.
1.4.2 기본 편집기
HTML5 문서를 작성하는데
있어서 다양한 형태의 편집기가 존재합니다. 가장 간단한 메모장부터 시작해서 Eclipse, NetBeans, Visual Studio와 같은 HTML5 문서만을
편집하기에는 너무도 다양한 기능을 제공하는 통합 개발 프로그램이 가능합니다만 이 책에서는 초보자들을 가장 쉽게 접할 수 있는 Windows 운영체제에 기본적으로 포함된 메모장을 이용하여 HTML5 문서를
작성합니다.
메모장은 여러분의 컴퓨터를 켜면 시작-프로그램-[보조
프로그램]에 포함되어 있는 아주 간단한 프로그램입니다. 이제
이 메모장을 실행해서 HTML5의 기본적인 구조를 작성해볼까요?
다음과 같이 메모장을 실행한 후 요소(Element) 부분에서 했었던 예제를 다음과 같이
작성합니다.
위와 같이 작성한 후 Ctrl+S를 누르거나 상단의 파일(F)를 클릭하여 저장을 클릭하면 다음과 같은 화면이 나타나게 됩니다.
위에서 폴더
찾아보기를 클릭하여 방금 작업한 내용을 저장할 파일의 위치를 설정해주는데 앞서
Apache 서버의 기본 웹문서가 위치하는 곳을 다음과 같이 선택합니다.
그 다음 가장
실수하기 쉬운 부분으로 메모장 프로그램은 기본적으로 파일 형식이 텍스트 문서(*.txt)입니다. 따라서 파일 형식(T): 부분 옆의 텍스트 문서(*.txt) 부분을 클릭하여 다음과 같이 변경합니다.
마지막으로 파일
이름(N): 옆에 저장하려는 파일이 HTML5 문서이므로
“memo.html” 입력하고 하단의 저장 버튼을 클릭합니다. 윈도우
탐색기를 열어서 “memo.html” 파일이 위치한 “D:\Apache
Software Foundation\Apache2.2\htdocs” 디렉토리로 이동하여 보면 “memo.html”
파일이 다음과 같이 나타납니다.
그런데 만일
앞서 파일 형식(T): 부분 옆의 텍스트 문서(*.txt) 부분을
그대로 둔 상태에서 다음과 파일 이름(N): 옆에 “memo.html”
입력하고 하단의 저장 버튼을 클릭하여 저장할 경우
방금 전과는
다르게 다음과 같이 HTML5의 문서 형식이 아닌 텍스트 파일 형식으로 저장되어 나타날 수 있습니다.
마지막으로 IE9를 실행하여 “http://localhost/memo.html”로
입력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
그 처음 시작 부분이며 본 저작물에 대한 모든 권리는 본인(원철연)에서
있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 2.2 meta 요소 (12) | 2013.07.31 |
|---|---|
| 2. metadata Elements (3) | 2013.07.31 |
| 1.3.2 HTML5에서 요소의 속성(Attribute) 작성 방법 (6) | 2013.07.31 |
| 1.3.1 HTML5의 요소(Element) 작성 방법 (3) | 2013.07.31 |
| 1.3 HTML5의 구조(structure) (6) | 2013.07.31 |
