티스토리 뷰
Web과 함께 시작하기
파일 다루기
웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고 서로가 잘 작동하는지 확인해야 하며 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.
웹사이트는 컴퓨터의 어디에 두어야 할까요?
만약 여러분이 컴퓨터에서 웹사이트에 대해 작업한다며 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 어디에나 둘 수 있지만 하드 드라이브에 두는 것을 추천합니다.
폴더 및 파일의 이름을 어떻게 지을까요?
폴더와 파일의 이름을 지을 떄는 공백을 사용하지 않고 영문의 소문자로 하는 것을 추천합니다. 그러면 에러를 방지할 수 있습니다. 단어를 구분하고 싶을 떄는 하이픈(-)을 사용하도록 합시다. 구글 검색 엔진은 하이픈(-)을 단어 구분자로 인식합니다. 다시 한번 말하지만 언더바(_)가 아닌 하이픈(-)을 사용하세요.
웹사이트는 어떤 구조를 가져야 할까요?
다음으로 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트를 만드든지 공통으로 가지게 되는 것들이 있습니다.
- index.html : 이 파일은 보통은 홈페이지를 말합니다. 처음 웹사이트에 방문하면 사람들이 가장 먼저 보는 페이지 입니다.
- images 폴더 : 이 폴더에는 이미지들을 포함하고 있습니다.
- style 폴더 : 이 폴더에는 CSS 코드를 포함하고 있습니다. 것입니다.
- scripts 폴더 : 이 폴더에는 JavaScript 코드를 포함하고 있습니다.
파일 경로
파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다. 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 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">라는 줄에서 src의 "" 사이에 경로를 입력해야 합니다.- 경로는 ../images/"파일이름".png을 입력하도록 합니다.
'Web Guides > Web과 함께 시작하기' 카테고리의 다른 글
| CSS 기본 (0) | 2022.03.04 |
|---|---|
| HTML 기본 (0) | 2022.03.04 |
| 웹사이트의 외관은 어떻게 할까요? (0) | 2022.03.04 |
| 기본 소프트웨어 설치하기 (0) | 2022.03.03 |
| Web과 함께 시작하기 (0) | 2022.03.03 |
UP NEXT : Web Guides/Web과 함께 시작하기
댓글
© 2018 webstoryboy