HTML 크롬 익스플로어 IE 호환 문제가 아닌 경로 문제

홈페이지를 만들었는데 크롬에서는 css적용이 잘되었는데 이상하게도

Edge랑 익스플로어는 css적용이 안된채로 적용되어있어서 찾아보았는데

 

 <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

이 소스만 넣으면 호환성 랜더링 모드가 적용이 되어서

웹표준에 맞게 작동하게 된다고 했는데

저는 그대로 더라구요ㅠㅠ

 

그런데 더 자세히 파고드니깐

어떤게 문제인지 알아냈습니다.

 

바로 경로 인데요

이것이 상대경로, 절대경로 어떤 경로를 적어도 크롬은 알아서 잘되지만

익스플로어, Edge는 무조건 상대경로를 적어야지만 인식이 된다는 사실!

 

그런데 이렇게만 들으면 헷갈리시기 때문에

조금더 확실하게 설명을 해드리자면

 

절대경로

'절대경로'는 웹페이지 및 파일이 가지고 있는 고유한 경로 입니다.

예를들어서 http:/www.google.com, C:\user\document\python 등을 절대 경로라고 뜻합니다.

그래서 내가 절대경로만 알고있다면 그 경로로 바로 이동이 가능하거나 실행이 가능합니다.

따라서 파일이 현재위치랑 상관없이 이 파일은 이 주소에 있으니 가져오란 뜻입니다.

 

※ 하지만 이렇게 절대경로로 한다면

크롬에서는 CSS가 적용이 되지만

익스플로어, Edge는 적용이 안된다는 점!

 

상대경로

'상대경로'는 현재 위치한 곳 기준으로 설정해주는 것입니다.

예를 들자면 현재 내 파일이 C:\user\document\python 여기에 있다고하면

그 파일 기준으로 하위폴더에 이미지파일을 찾을것인지 CSS파일을 찾을것인지 설정하는겁니다.

따라서 현재 내가 사용하고자 파일이 여기에 있는데 현재경로에서 이쪽으로 가줘라고 생각하시면 되겠습니다.

 

---

 

이렇게 경로만 설정을 잘해주시면 호환성 문제없이

크롬, 엣지, 익스플로어 어디서든지 CSS적용이 가능하겠습니다.