파일들 다루기

« 이전 다음 »

웹사이트는 많은 파일들로 구성되어 있습니다: 문자, 코드, 스타일시트, 미디어, 등등. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일들 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇가지 문제들에 대해 이야기 할 것입니다.

웹사이트는 컴퓨터의 어디에 두어야 할까요?

여러분의 웹사이트를 여러분이 소유한 컴퓨터에서 동작할 때, 여러분은 서버로 출판된 웹사이트의 파일 구조 그대로 담고 있는 한 폴더안에 관련된 모든 파일들을 유지해야 합니다. 이 폴더는 여러분이 원하는 어디에나 둘 수 있지만, 쉽게 찾을 수 있는 곳에 두어야 합니다. 아마도 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 최상위가 될 것입니다.

여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, web-projects (또는 비슷하게) 라고 불리는 새 폴더를 생성하세요. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
첫 번째 폴더 안에, 첫 번째 웹사이트를 저장할 또 다른 폴더를 생성하세요. test-site (또는 무언가 더 상상력을 발휘해서) 라고 부릅시다.

포장과 공백에 대한 여담

이 글을 통해 알게 되실 겁니다. 우리는 여러분이 폴더와 파일의 이름을 완전히 공백이 없는 소문자로 짓기를 바랍니다. 이것이 그 이유입니다:

많은 컴퓨터, 특히 웹 서버, 는 대소문자 구분을 합니다. 그래서 예를 들면, 만약 여러분이 웹사이트의 test-site/MyImage.jpg 에 이미지를 두었다면, test-site/myimage.jpg 로 이미지를 부르는 것은 다른 파일을 요청하는 것이 되기 때문에, 잘 작동하지 않을 것입니다.
브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관적으로 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 단어를 대시나 언더스코어로 구분하는게 낫습니다: my-file.html 또는 my_file.html.

이러한 이유로, 여러분의 폴더와 파일 이름을 공백이 없는 소문자로 작성하는 습관을 들이는 것이 최고입니다, 적어도 여러분이 무엇을 하는지 알 때까지는요. 이것이 최소한의 문제에 충돌할 수 있는 방법입니다.

웹사이트가 무슨 구조를 가져야 할까요?

다음으로, 우리의 사이트가 가져야할 구조에 대해 봅시다. 우리가 생성한 어떤 웹사이트 프로젝트가 가질 가장 일반적인 것들은 인덱스 HTML 파일과 이미지, 스타일 파일, 그리고 스크립트 파일들을 포함할 폴더들입니다. 이것들을 이제 생성해 봅시다.

index.html: 이 파일을 일반적으로 여러분의 홈페이지 내용들을 포함할 것입니다, 그것은, 사람들이 여러분의 사이트에 처음 방문했을 때 보는 문자와 이미지들입니다. 텍스트 에디터를 사용하여, index.html 라는 새 파일을 생성하고 test-site 폴더 안에 저장하세요.
images 폴더: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함할 것입니다. test-site 폴더안에, images 라는 폴더를 생성하세요.
styles 폴더: 이 폴더는 여러분의 내용을 스타일링(예를 들어, 문자와 배경색을 세팅하는 것)하기 위한 CSS 코드를 포함할 것입니다. test-site 폴더 안에, styles 라는 폴더를 생성하세요.
scripts 폴더: 이 폴더는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용되는 모든 JavaScript 코드를 포함할 것입니다(예를들면, 클릭할 때 자료를 불러오는 버튼). test-site 폴더 안에, scripts 라는 폴더를 생성하세요.

노트: 윈도우 컴퓨터에서는, 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 알려진 확장자 자동 숨김이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, 폴더 옵션...에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 야후 검색을 해보세요!

파일 경로

파일들이 서로 통하게 하기 위해선, 파일들간의 파일 경로를 제공해야 합니다 — 기본적으로 한 경로이고 이를 통해 한 파일이 다른 파일이 어디있는지 알 수 있게 됩니다. 이것을 설명하기 위해, 우리는 index.html 파일에 약간의 HTML 을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 에서 여러분이 선택한 이미지를 보여주게 될 것입니다.

images 폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
index.html 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무은 뜻인지에 대해 걱정할 필요가 없습니다 — 이번 시리즈의 나중에 이 구조에 대한 더 자세한 것들을 알게 되실 겁니다.
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html> 
```
<img src="" alt="My test image"> 는 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는이미지가 어디 있는지에 대한 HTML 이 필요합니다. 이미지는 images 폴더 안에 있습니다, 이것은 index.html 와 같은 폴더에 있습니다. index.html에서 우리 이미지로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 images/your-image-filename 입니다. 예를 들어, 우리 이미지가 firefox-icon.png 라면, 파일 경로는 images/firefox-icon.png 가 됩니다.
여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

파일 경로를 위한 일반적인 규칙들:

파일을 부르는 HTML 파일과 같은 곳에 위치한 파일에 연결하기 위해서는, 그냥 파일 이름을 사용하면 됩니다. 예시: my-image.jpg.
하위 폴더에 위치한 파일을 참조하기 위해서는, 경로 앞에 폴더 이름을 작성하세요, 슬래시를 앞에 추가해야 합니다. 예시: 하위폴더/my-image.jpg.
파일을 부르는 HTML 파일의 상위 폴더에 위치한 파일에 연결하기 위해서는, 두 점을 찍어야 합니다. 예를 들면, 만약 index.html 가 test-site 의 하위 폴더 안에 있고 my-image.png 가 test-site 안에 있을 때, 여러분은 ../my-image.png 경로를 통해 index.html 에서 my-image.png 를 참조할 수 있습니다.
여러분이 원하는대로 조합해서 사용할 수도 있습니다, 예를 들면, ../subdirectory/another-subdirectory/my-image.png.

지금으로썬, 이것이 여러분이 알아야 할 전부 입니다.

노트: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다, 예시: C:\windows. 상관은 없습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도, / 슬래시를 코드에 사용해야 합니다.

또 무엇을 더 해야할까요?

현재로써는 이것이 그것입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file