온오프믹스 코드테스트에 오신것을 환영합니다. 

아래의 문제를 잘 읽고 풀어 보신뒤 
hr@onoffmix.com 으로 이력서및 자기소개서와 함께
답안을 TXT 혹은 HTML 파일로 제출해 주세요.

3개의 문제중 하나라도 푸셔도 제출 해 주시면 됩니다

자세한 채용공고는 아래 글을 참고 하세요 
http://blog.onoffmix.com/59

자 그럼 코드 테스트 시작!

1.
아래의 HTML 에서 예제 이미지를 사용하여 
자바스크립트를 사용하지않고 mouse Over/Out이 가능한 동적 메뉴를 만드세요

onMouseOver시 보여져야할 이미지 : http://recruit.onoffmix.com/btn_mkevt_over.gif
onMouseOut시 보여져야할 이미지 : http://recruit.onoffmix.com/btn_mkevt_out.gif

HINT : CLASS
사용 HTML : 
<a href="#" id="aTag">
  <div id="DivTag">마우스가 OUT/OVER일때 이미지가 다르게 나와야 해요</div>
</a>



2.
외부 자바스크립트 프레임웍을 이용하여 
아래의 Table 태그에 검색 및 페이징이 사용 가능 하도록 하세요.
단, 자바스크립트만 사용하세요 

HINT : jquery / datatables.net
사용 HTML : 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 4.0 (focus once)</td>
			<td>Win 95+</td>
			<td class="center">4</td>
			<td class="center">X</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 5.0</td>
			<td>Win 95+ (blur)</td>
			<td class="center">5</td>
			<td class="center">C</td>
		</tr>
		<tr>
			<td>Trident (focus)</td>
			<td>Internet Explorer 5.5</td>
			<td>Win 95+ (action/bold)</td>
			<td class="center">5.5</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 6 (focus)</td>
			<td>Win 98+</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+ (blur)</td>
			<td class="center">7</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP (action/italic)</td>
			<td class="center">6</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko (UTF-8: $¢€)</td>
			<td>Firefox 1.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Firefox 1.5</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Firefox 2.0</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Firefox 3.0</td>
			<td>Win 2k+ / OSX.3+</td>
			<td class="center">1.9</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Camino 1.0</td>
			<td>OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Camino 1.5</td>
			<td>OSX.3+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Netscape 7.2</td>
			<td>Win 95+ / Mac OS 8.6-9.2</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Netscape Browser 8</td>
			<td>Win 98SE+</td>
			<td class="center">1.7</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Netscape Navigator 9</td>
			<td>Win 98+ / OSX.2+</td>
			<td class="center">1.8</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.0</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.1</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.1</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.2</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.2</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.3</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.3</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.4</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.4</td>
			<td class="center">A</td>
		</tr>
		<tr>
			<td>Gecko</td>
			<td>Mozilla 1.5</td>
			<td>Win 95+ / OSX.1+</td>
			<td class="center">1.5</td>
			<td class="center">A</td>
		</tr>
	</tbody>
</table>




3.
아래는 php 를 통한 텍스트 제어 입니다. 

아래의 코드를 수정하여 
계속 변경 되는 메시지 항목을 
한글 5글자만 나오도록 수정 하세요.

<?
  $xml_doc = file_get_contents('http://recruit.onoffmix.com/intext.php');
  $xml_obj = simplexml_load_string($xml_doc);

  $loc  = $xml_obj->event->location;
  $msg  = $xml_obj->event->message;
  $time = $xml_obj->event->time;
?>

<div id="location">장소 : <?=$loc?>   </div>
<div id="time">시간 : <?=$time?>      </div>
<div id="message">메시지 : <?=$msg?>  </div>