본문 바로가기

Smart

반응형 홈페이지로 리뉴얼시 html5 & css3 익스플로러 하위 버전 호환 대응 방안

반응형 홈페이지로 리뉴얼시 html5 & css3 익스플로러 하위 버전 호환 대응 방안



최근 홈페이지들은 모바일과 같은 환경에서도 적용될 수 있는 반응형 홈페이지로 리뉴얼하는게 요즘 추세입니다. 

새로운 반응형 홈페이지로 리뉴얼을 기획하다 보면 본의 아니게 난관에 봉착하는 경우가 있는데요. 여러 웹디자이너나 퍼블리셔들이 고민하는 부분일거에요. 바로 익스플로러 버전에 따른 호환 문제인데요. 


최근에 나온 웹표준 방식으로 코딩을 하다보면 익스플로러 9이하 버전에서는 홈페이지에 적용시킨 소스들이 적용이 안되거나 깨져 보이는 경우가 종종 있습니다. 

결국엔 크로스 브라우징 개발을 해야하는데요.




미봉책이긴 하지만 급하게 익스플로러 하위 버전에서도 html5 & css3 가 호환할 수 있는 방법을 소개해드립니다. 


첫번째가 html5 & css3에 대한 조건주석문을 달아주면 익스플로러 9이하의 하위 버전에서도 HTML5 및 CSS3를 적용할 수 있습니다.


아래의 소스를 <head></head> 다음에 삽입해 줍니다.





다음으로는 익스플로러 버전업에 대한 업데이트 안내 경고 문구와 함께 경로를 예전 홈페이지 경로로 바꿔버리는 방법입니다. 






역시 아래의 소스를 <head></head> 다음에 삽입해 줍니다.





해당 소스를 적용시킨 후 익스플로러 7버전에서 리뉴얼된 반응형 홈페이지로 접속했을 때 아래와 같이 경고 문구가 나오면서 리뉴얼전 홈페이지로 이동하게 됩니다. 크로스 브라우징이 제대로 안되었을 때 홈페이지는 빨리 오픈을 해야겠고 그럴 때 급하게 사용하면 좋을 듯 보입니다. 




도움이 되셨길 바라며 반응형 홈페이지로 리뉴얼시 html5 & css3 익스플로러 하위 버전 호환 대응 방안에 대한 포스팅을 마칩니다.


해당 소스들에 대한 적용 가능 여부는 개발 환경에 따라 여러 변수로 인해 달라질 수 있으므로 댓글에 대한 답글이 없어도 양해 부탁드립니다.