이번 팀을 소개하는 홈페이지를 만드는 프로젝트에서 저는 멤버정보를 자세히 볼수 있는 Modal window을 구현하는 파트를 맡았습니다. 여러가지 라이브러리를 이용해서 열심히 꾸미고 있었는데 아무리 폰트를 넣어도 폰트 적용이 되지 않는 것이였던 거 아니겠어요? 아니 폰트하나 가지고 몇 시간을 투자하는 제 자신이 너무 답답했어요😭
CDN 링크도 빠뜨리지 않았고
폰트 선언과 폰트 패밀리 사용도 했는데 아무리 해도 적용이 안되는데..? 대체 이유가 뭐지 라는 생각을 계속 하면서 영상도 찾아보고 구글링도 해봤지만 바뀌는 건 없었습니다. 혹시나 해서 경로 문제인가? 싶은 생각이 들었고
경로를 상위폴더로 변경
폰트가 적용이 된다!! 근데 왜지...?
1️⃣ Alt + B (브라우저에서 열기)
- Alt + B는 VSCode가 파일을 브라우저에서 바로 열도록 하는 기능
- 이 경우 브라우저는 파일을 file:// 프로토콜을 사용해서 열음
- 주소의 경로가 C드라이브에서 시작을 한다.
2️⃣ 라이브 서버 (Live Server)
- 라이브 서버는 파일을 http://localhost 주소로 실행
- 이 경우 브라우저는 웹 서버 환경을 통해 경로를 해석하기 때문에 폰트가 올바르게 작동
📌 정리
- Alt + B로 파일을 열 때 경로 문제가 발생하는 이유는 상대경로와 절대경로가 다르게 해석되기 때문
- 이를 해결하기 위해 경로를 상위폴더로 까지 넓혀서 상대경로를 사용하거나, 웹 서버 환경에서 경로를 다시 확인하는 절대경로를 사용해야함! :)
