가로 스크롤 슬라이더 UI를 제작하던 중 컨텐츠 영역에 hover시 z-index가 오픈메뉴 위로 튕겨나가는 이슈가 있었다. 슬라이드가 메인 전체를 차지하고 있었고 그 위로 오픈메뉴가 있는데 ie에서는 li 요소가 그 위로 뜨는 것이다. 알고보니 멍청한 ie를 위해서 z-index를 명확하게 써줘야 한다고 한다. 이런 구조로 이루어져있었는데 header와 #sidemenu에 아무리 z-index: 1000000000000000000000을 준다고 하더라도 컨텐츠가 담긴 #content에 z-index가 없다면 올라가지 않는다. 이유인 즉슨 부모들에게도 인덱스 값을 명확하게 주어야 ie에서 정상적으로 동작한다는 말이다. 참.. 별것도 아닌걸로 매일 헤멘다.. ^_ㅠ
background: #fff url(/img/arrow.jpg) no-repeat right 28px center 원래는 calc을 이용해서 background-position 에서의 위치조절을 했었는데 크롬에서는 지원되지만 익스에서는 지원되지 않는 것을 보았다. calc()함수는 ie9이상부터 지원이 되지만 background-position 안에서의 calc는 ie 전부 읽히지 않는다. calc(100% - 28px) center를 right 28px center로 교체했더니 말끔히 작동한다. reference - stack overflow
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 var date = new Date(); var dp = $('#date_start').datepicker({ //년-월-일 startDate: new Date(date.getFullYear(), date.getMonth(), date.getDate()), language: 'ko', autoClose: true, //선택한 날짜를 가져옴 onSelect: function (date) { var endNum = date; //종료일 datepicker에 최소날짜를 방금 클릭한 날짜로 설정 $('#date_end')..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 $(function (){ var controller = new ScrollMagic.Controller(); var tl = new TimelineMax(); var secSection = tl.from('.section02 .figure01', 0.5, { x:-50, autoAlpha:0, ease: Power2.easeOut }).from('.section02 div.text', 0.5, { autoAlpha:0, x:50, ease: Power2.easeOut, delay:0.1 }); // create scenes var scene = new ScrollMagic.Scene({tri..
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new daum.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new daum.maps.Map(container, options); //지도 생성 및 객체 리턴 /* 28번째 줄부터 ..