html 상대경로에 대해 알아보자

html 경로에 대해 알아보자

중간보스: /,./,../등장

html 공부하다 보면 경로 설정이라는 중간보스가 등장한다.
그이름은 바로 [상대경로 3형제].

경로3형제

먼저 img를 넣으려고 하는데 안됨 oh my... 그리고 더 공부하다보면,
link 파일 연결할 때도 경로 설정이 필요하다.
그렇기에 상대경로를 어물쩡 넘어가면,
나중에 뒷덜미 잡히니까. 최대한 후려쳐서 쉽게 알아보자.

/=폴더접속, ./ = 현재 작업중인 폴더 ../상위폴더

공식만 알려면 이것 3개만 알면 된다.

• ./ 현재 작업파일이 속한 폴더를 지정하는 것이다.
• ../상위 폴더로 선택해주는 것
• / 선택한 폴더로 들어가게 해주는 것 

  ---

파일과 폴더의 관계에 대해 아는게 첫번째

개발 공부를 하다 보면 상하 위계 관계에 대해 나오는데,
이해하기 쉽게 가족의 관계를 비유한다.
가족관계는 너무나 익숙한 상하조직 관계니까 이해하기도 거부감이 없다.

관계는 상대적이다. A는 누군가에게 자식일수도 있고, 손자일수도 있고,
부모일 수도 있다.
기준이 무엇이냐가 중요하다.

예를 들어) A라는 폴더 안에 1,2번 폴더가 있다.
1번폴더에 html파일이 있고, 2번 폴더에 img파일이 있다.
1,2는 A라는 폴더에 속해있다. A는 부모이다.
1,2는 A의 자식이다.

1의 자식은? html파일이다.
2의 자식은? img 파일이다.
1과 2는 ? 동등한 관계다.

상하 관계 대충 알겠어요 그래서 왜 이미지가 안뜨냐구요.

여기서 대체적인 예는 2폴더의 이미지 파일을,
1폴더의 html에 넣고 싶은데 어떻게 해야할까?

생각먼저 해보자
html파일을 작업중이다. 이미지 파일은 나의 부모의 동생의 자녀다.[이게 어렵다면 손가락으로 컴퓨터 전원을 눌러라]
그럼 순서를 생각해보자

1. 부모인 1폴더로 올라간다.
2. 부모의 형제 자매인 2폴더를 접속한다.
3. 2의 자녀인 이미지를 선택한다.
4. html에 이미지가 불러와진다.

이를 커맨드로 해보자.

1. ../ (1폴더 선택)
2. 2/ (2폴더 접속)
3. 이미지.img (이미지 선택)
   합치면아! 이해 했어!! [이해 안됨]자 그럼 알파이자 오메가인 할아버지 폴더이다.
   이 경우에 내가 멘붕이였다. ../을 몰라서,
   그러면 다시 예를 들어보자.
4. src="../2/이미지.img"

A 와 동급인 B 폴더에 3이라는 폴더에 3.img를 불러오고 싶다.
그럼 어떻해야 할까? 이 경우도 빈번하다.

말로 먼저 표현하면

1. tml파일에서 타고 올라와 A까지 올라간다.
2. B폴더 3폴더 까지 접속한다.
3. 3.img를 선택한다.

여기서 1번 타고 올라오는것이 바로 ../의 활용이다.

1. ../../ 다 이는 A폴더까지 올라간것이다.[이해 안되면 ../는 한칸 올라간다를 기억하자]
2. B/3/ 3폴더 까지 접속.
3. 3.img요약
4. src="../../B/3/3.img"

• /는 접속
• ./현재 작업 폴더
• ../ 부모 폴더 이동[위로 한칸 이동]
• 3번 봤는데 모르면 바로 컴퓨터 전원 끄기

  ---

참조: https://superuser.com/questions/153165/what-does-represent-while-giving-path