[JS] JavaScript 라이브러리 충돌 방지

짧은 실력이지만 현재 운영하고 있는 그룹웨어 서비스 로그인 페이지에 마우스를 오버하면 툴팁이 뜨도록 JQuery로 작업을 했습니다.

그런데, 툴팁이 뜨지 않는 것입니다. 클래스 명이나 변수가 잘못되었나 확인해봤지만 문제가 없었습니다.

firebug로 확인해보니 Prototype.js가 그룹웨어 서비스 어딘가에서 사용되고 있었습니다. Prototype.js 도 JQuery처럼 $() 를 사용합니다.  그러므로 라이브러리간에 충돌이 발생할 수 있습니다.

충돌을 방지하기 위해서는 메서드 $.noConflict() 를 사용하여 아래와 같이 해결합니다.

 

 

[CSS Quiz] CSS를 이용해 아군을 구출하라!

출처 : 정찬명님 블로그 (http://naradesign.net/wp/2014/08/01/2057/)

 상황 설명

  • <ol>은 적의 진영이기 때문에 함부로 침범하거나 수정할 수 없습니다.
  • <li>는 적군 병사이거나 또는 적군에게 잡혀간 아군 병사들 입니다.
  • 1과 9는 적의 문지기 병사이고, 짝수인 2, 4, 6, 8 역시 적군 병사입니다.
  • 밑줄 친 숫자(1보다 크고 9보다 작은 홀수)가 적진에 잡혀간 아군 병사입니다.

<style>/* 아군 진지: 작전은 이곳에 */</style>
<!–
 적군 진지: 수정할 수 없음 –>
<ol>
<li>1(
적군: 문지기)</li>
<li>2(
적군)</li>
<li>3(
아군)</li>
<li>4(
적군)</li>
<li>5(
아군)</li>
<li>6(
적군)</li>
<li>7(
아군)</li>
<li>8(
적군)</li>
<li>9(
적군: 문지기)</li>
</ol>
<!–
 적군 진지: 수정할 수 없음 –>

미션 설명

  • 아군 진지에서 스타일 상륙작전을 이용하여 적진에 잡혀간 아군 병사에게 빨간 망토(background:red)를 씌워주세요.
  • 아군 진지에서 가장 짧게 작전을 작성하여 아군 포로에게만 빨간 망토를 씌우는 사람이 승리.
  • 비밀 작전이기 때문에 JS 또는 image 연합군의 도움을 받을 수 없음.
  • 야전 교범http://www.w3.org/TR/selectors/
  • 훈련소http://codepen.io/ | http://jsfiddle.net/
  • 정찬명 님의 답 :  http://codepen.io/naradesign/pen/Hocut

최근에 전문가를 위한 CSS3를 공부하는 중에 이 문제를 만난 덕분에 쉽게 풀었습니다.

See the Pen yNPxGe by In Suk Kim (@shoo7830) on CodePen.