JELEE

- X-UA-Compatible 이란?

: MS IE11 이하 버전에서 하위 호환성을 위해 사용되는 메타 정보이다.
IE가 어떤 버전의 문서 모드로 현재 문서를 해석해야하는지 정의해주는 메타 정보.

ex)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링해라.

(+)
여기서 content에 들어갈 수 있는 값은 [ IE=5, IE=7, IE=EmulateIE7, IE=8, IE=edge ]가 있다.
자세한 설명 및 깊은 얘기는 http://webdir.tistory.com/38 참고.

[ 문제 ]

Bootstrap4 beta 를 이용하여 홈페이지 제작중 저런 오류를 발견했다.

엄청난 빡침..
전문적인 프로그래머가 아닌 나로써는 난감했다.
그래서 구글서칭하던 도중 다행히 댓글로 설명을 잘 달아준 사람이 있어서 그대로 똑같이 하니 해결되었다.

[ 해결 ]

(before)

(after)

그냥 popper.min.js 를 jquery-3.2.1.min.js > popper.min.js > bootstrap.min.js 순으로 배치하면 끝.

<head>

<style>

.container {

width: 300px;

height: 100px;

margin: 100px auto 0;

}

img {

width: 100%;

height: auto;

}

</style>

</head>

<body>

</div>

$(function(){

/* 클래스 conatiner 안에 img 에 마우스를 올려놓으면 function 실행*/

$(.container img").hover(function(){

/* this(img를 뜻함)의 경로를 바꾼다. 어떤 경로? "src"의 경로를. 그리고 경로주소는 this(img)의 src 속성안에 있는 ".png"를 "_over.png"로 바꾼다. 즉, <img src="image.png"> 에서 <img src="image_over.png" 로 바뀌는 거임.*/

$(this).attr("src", $(this).attr("src").replace(".png", "_over.png"));

}, function(){

/* 마우스 오버가 아니면 다음을 실행한다. this(img)의 src 경로를 "_over" 이라는 글자를 없앤다. "" 따옴표안에는 아무것도 없으니까 _over 글자를 뺀다는 의미. 즉, <img src="image_over.png"> 에서 <img src="image.png"> 가 된다.*/

$(this).attr("src", $(this).attr("src").replace("_over",""));

});

</script>

</body>