[ HTML 기초 ] HTML / CSS 파일 구조 및 파일 경로

 

오늘 CSS 경로를 잘못 입력해서 한참을 헤맨 나 자신...

여태 상대경로로 어떻게 파일을 링크시키는지도 제대로 모르고 있었다.

진짜 어이없.... 찾아본 김에 이번 기회에 제대로 정리를 해두려고 한다.

 

 

📍 HTML / CSS 파일 구조

 

웹 페이지를 제작할 때 보통 아래와 같은 파일 구조를 가진다.

재사용성, 가독성 등 더 효율적인 관리를 위해 하나의 상위 폴더 안에 같은 형식의 파일들을 모아서 저장한다. 

웹 페이지 제작시 파일 구조

 

---

 

📍 절대 경로란?

각 파일이나 웹 페이지가 가지고 있는 고유한 경로(절대적인 위치)

 

 

---

 

 

📍 상대 경로란?

작업하고 있는 문서를 기준으로 연결하고 싶은 이미지나 동영상, 문서 등의 위치를 알려주는 경로

(현재 열린 파일을 기준으로 상대적인 위치)

 

같은 위치 / 하위 위치 / 상위 위치 세 가지의 경우가 있다. 

 

---

 

✔️ 상대 경로 이해하기

 

'상대경로'라는 이름의 차상위 폴더 안에 html, img 상위폴더와 css 파일을 생성했다. 이미지 파일로 예시를 사용하기 위해 일부러 이곳 저곳에 저장했다.

 

* 목표 : 'blue.jpg', 'water.jpg', 'link_img.jpg' 세 개의 이미지 파일들을 index.html에 연결시키기

 

 

1️⃣  같은 위치

작업하고 있는 파일과 같은 위치에 있는 파일의 경우 "연결할 파일명"을 그대로 적어준다.

 

blue.jpg 연결하기 → index.html와 같은 위치에 있는 "blue.jpg"로 작성

 

올바르게 입력하면 이렇게 밑에 미리보기가 자동으로 나오게 된다.

 

 

 

2️⃣  하위 위치

작업하고 있는 파일 기준으로 하위 위치에 있는 파일의 경우 "연결할 파일이 들어있는 폴더명/연결할 파일명"을 적어준다.

 

water.jpg 연결하기 → index.html을 기준으로 water.jpg이 같은 위치에 있는 img폴더(위에 있는 img폴더) 안에

들어 있으므로 "img/water.jpg"로 작성

 

마찬가지로 올바르게 입력하면 미리보기가 자동으로 나온다.

 

 

 

3️⃣  상위 위치

작업하고 있는 파일 기준으로 상위 위치에 있는 파일의 경우 "../연결할 파일명"을 적어준다.

상위 폴더 안에 있는 파일의 경우 "../연결할 파일이 들어있는 폴더명/연결할 파일명"이런 식으로 적어주면 된다.

 

⚡️ 여기서  "../ "는 상위 폴더로 이동한다는 의미!!

 

link_img.jpg 연결하기 → index.html을 기준으로 link_img.jpg이 상위에 있는 img폴더(아래에 있는 img폴더) 안에

들어 있으므로 "../img/link_img.jpg"로 작성

 

밑에 미리보기가 나오기 때문에 쉽게 찾을 수 있다.

 

 

 

 

보고 나면 너무나 간단한...ㅎ

구조적으로 파일을 만들지 않아 봐서 생겼던 문제였던 것 같다. 

다시는 이런 문제로 시간 날리는 일 없도록 주의하자~~🥲