제작하려고 하는 홈페이지의 키워드들을 선택했다면 이에 맞게 디렉토리 구조를 만들어야 합니다. 하지만 이 과정을 이해하기 위해서, 웹문서는 어떻게 만드는지 index 파일은 무엇인지 알 필요가 있습니다.
간단한 HTML 문서 만들기
웹문서는 주로 HTML(Hyper Text Markup Language)이란 간단한 마크업 언어로 작성을 합니다. 이 HTML은 메모장 프로그램을 사용해서 작성을 할 수도 있고, 또는 좀 더 편리하게 작성할 수 있게 도와주는 에디터(드림위버, 나모 웹 에디터, front page, …)를 사용할 수도 있습니다.
아래의 코드는, 웹표준에는 맞지 않지만, HTML 문서를 만드는데 가장 기본적으로 필요한 태그들로 이루어진 코드입니다. 이렇게 작성한 코드를 메모장이나 에디터에서 저장할 때 확장자를 html로 지정하면 브라우저가 HTML 태그로 만든 문서로 인식하고 화면에 출력하게 됩니다.
<html>
<head>
<title>브라우저 최상단에 나타나는 글 제목을 여기에 씁니다.</title>
</head>
<body>
<h1>글 제목 태그입니다. h1에서 h6까지 있는데 가장 큰 글 제목입니다.</h1>
<p>문단의 내용을 이 태그안에 적습니다. 줄을 바꿀 때는 <br />태그를 사용합니다.</p>
</body>
</html>위 코드를 이용하여 메모장으로도 간단히 HTML 문서를 만들 수 있습니다. 컴퓨터 바탕화면에 오른쪽 마우스 버튼을 클릭한 후 ‘새로 만들기>텍스트 문서’를 클릭해서 바탕화면에 새 텍스트 문서를 하나 만듭니다. 그 문서를 열고 아래 코드를 복사해서 붙여넣기 한 후에 ‘다른 이름으로 저장’을 선택하고 ‘파일이름’의 확장자를 ‘txt’에서 ‘html’로 바꾸어서 저장하면 됩니다.(예: test.html) 해당 문서를 클릭해 보면 브라우저에서 어떻게 출력되는지 확인할 수 있습니다. 이 문서를 서버에 올리면 인터넷에서 다른 사람들도 볼 수 있게 됩니다. – 파일을 직접 만들지 않고 온라인에서 제공하는 태그 연습장같은 것을 사용해서 결과물을 볼 수도 있습니다.
참고 : HTML 초보 강좌 동영상
HTML tag는
- ‘<’ 와 ‘>’ 사이에 태그이름을 넣어서 만들 수 있습니다. (예:<p>)
- 태그이름은 소문자를 사용합니다.
- 태그는 보통 시작태그와 종료태그 쌍으로 이루어져 있고 종료태그에는 태그명 앞에 ‘</’를 붙입니다. 종료태그를 잊어버리고 안쓰는 경우가 있는데 태그가 쌍인 경우 꼭 종료태그를 사용해야 합니다. (예:<p>, </p>)
- 줄바꿈 태그처럼 쌍이 아닌 단독으로 사용되는 태그의 경우 태그이름 뒤에 ‘/>’를 붙여줍니다.(예: <br />)
- <html> 태그는 HTML 문서의 시작을 뜻하며 문서의 끝에는 </html>을 사용합니다.
- <head>와 </head>사이에 있는 태그들은 문서자체에 대한 정보들이 있으며 브라우저와 검색엔진이 참고하는 내용입니다. 브라우저 안에서 실제로 출력되는 내용은 없습니다.
- <body>와 </body> 사이에는 브라우저에 출력되는 내용들(텍스트, 이미지, 링크,색상…)등의 내용들이 있습니다.
Index 파일이란?
일반적으로 규모가 크지 않은 개인 홈페이지나 웹사이트는, 하나의 큰 서버에서 일정부분을 할당 받아서 그 영역에 웹문서와 이미지를 올리고 운영하게 됩니다. 이 영역은 호스팅 업체에 따라 다른데, 일반적으로 ‘www’ 나 ‘public_html’ 또는 ‘htdocs’ 등의 이름을 가진 디렉토리로 주어집니다. 그리고 자신의 도메인 주소가 이 디렉토리로 연결이 됩니다. 따라서 디렉토리의 이름이 맘에 안든다고 해서 이름을 바꾸거나 삭제하면 안됩니다.
index 파일은 디렉토리의 대표 문서로서, 브라우저에서 어떤 디렉토리에 접속 했을 때 자동적으로 보여주는 파일입니다. 만약 디렉토리에 index 파일이 없을 경우 그 디렉토리에 있는 파일들을 리스트 형식으로 보여주거나 또는 forbidden 메세지가 뜨면서 접근이 금지됩니다.
즉, 브라우저에서 ‘http://yoursite.com/’ 이라고 입력한다면 public_html 디렉토리에 있는 index.html을 보게 되는 셈이고 브라우저에 ‘http://yoursite.com/index.html 을 입력한 것과 같은 결과가 나오게 되는 것입니다. 따라서 public_html 디렉토리에는 반드시 index 파일이 있어야 합니다. 보기는 싫겠지만, 좀전에 만든 test.html을 index.html로 바꾸고 public_html 디렉토리에 올려도 됩니다.
그리고 index 파일은 사용된 언어에 따라서 index.html, index.htm, index.php, index.shtml, index.asp 등이 사용될 수 있습니다. 만약 한 디렉토리에 두개의 인덱스 파일이 있다면 보통 html, htm, php 등의 파일 순서로 우선 순위를 가집니다.
브라우저에서 /(슬래쉬)의 의미
앞에서도 설명했지만, ‘/’는 브라우저 주소창에서
- 디렉토리를 의미합니다.
- ‘/’로 주소가 끝나면 그 디렉토리의 인덱스 파일(index.html, index.htm, index.php, …)을 불러옵니다.
- 주소 끝의 슬래쉬는 보통 생략하지만 의미상으로 본다면 정확한 사용법은 아닙니다. – http://yoursite.com/ ( O ), http://yoursite.com ( X ), http://yoursite.com/index.html ( O )
- 주소가 특정 디렉토리의 파일을 가리키고 있을 때는 ‘/’는 사용하지 않는게 알맞은 사용법입니다. – http://yoursite.com/index.html/ ( X )
