HTML을 처음 배운 것이 15년은 넘었고, PHP도 12년은 넘었다. 처음에 잘 배워야 한다는데… 내 HTML 코딩은 back to 90’s 다. 는 찾아볼 수 없고, 온통 중복 테이블의 연속이다. 구식 방식이라는 것은 알아도 크게 아쉬운 것 없이 써오다가, IE의 시대가 저물고 모바일이 치고 올라오면서 내 HTML은 쓰레기가 됐다

나도 멋지게 반응형 웹을 만들고 싶은데 도저히 거기까지는 배울 엄두가 안 나고, 기존 사이트를 워드프레스로 옮기자니 그것도 막막했다. 이러지도 저러지도 못 한 상태로 1, 2년을 보내다가, 구세주나 다름없는 Bootstrap을 발견했다.

디자인과 HTML코딩까지 다 되어있고, 내 수준보다 훨씬 높은 템플릿을 너무나 쉽게 받아볼 수 있다. 구글에서 Bootstrap template responsive free 라고 치면 어마어마하게 나온다. 단, 한가지 단점은 IE에서는 깨져서 보인다는 것. 이 말 때문에 서론이 길었다 :)

구글링을 하며 여러 가지 시도를 했었지만, 이 방법이 제일 깔끔했다. 참고한 문서는 Using Bootstrap 3 with Internet Explorer 8 (IE8) 인데, IE8 에서는 깔끔하게 지원되지 않는 것 같다. 아래 meta 태그는 원글에서는 비추하는 방법이지만, IE9에서 IE8로 세팅하고 할 때는 저 코드가 먹히는 것 같아 일단 같이 정리하였다. 실제 IE8로는 못 해보고, 버젼 설정값만 변경하며 테스트를 해봐서 확실치 않은 것이 문제. 다만, IE9 이상에서는 정상적으로 작동된다.

1 2 3 4 5 6 7

<meta http-equiv="X-UA-Compatible" content="IE=edge" />       <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->     <!--[if lt IE 9]>       <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>       <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>     <![endif]-->

 

 

다운 받은 템플릿을 내 사이트에 맞게끔 바꾸면서 개발 중인데, 그저 감탄하면서 쓰고 있다. CSS도 이해하기 쉽게 잘 만들어져있어서 아직까지는 커스터마이징에 큰 어려움이 없이 사용 중. 결론은, Bootstrap 만세! IE는 제발 좀 점유율 떨어지길…