javascript:location='http://shauninman.com/vs/?url='+escape(location)

북마클릿은 원래 책갈피 등록이 되지 않기 때문에 아무 주소나 먼저 즐겨찾기에 추가한 다음 등록된 URL을 이 북마클릿 코드로 교체하면 됩니다. 그 다음 소스 보기를 원하는 페이지에서 이 북마클릿을 실행합니다.

스크린샷은 데스크탑에서 넣어야겠네요. 이런 짓을 왜 하냐고 물으신다면 다른 사람의 소스 코드가 미치도록 궁금해서 애달아 그럽니다.

단계1: 북마클릿을 아이폰 사파리 책갈피에 추가

단계2: 소소 보기를 원하는 페이지에 접속

단계3: 책갈피에서 북마클릿 실행

단계4: HTML 소스를 볼 수 있다

단계5: CSS 소스를 볼 수 있다

참고: http://goo.gl/LyRxH

그래서 웹 개발자는 언제부터인가 이런 불편을 개선할 목적으로 데이터 유효성 확인과 같은 핵심 기능을 자바스크립트에 의존하기 시작했습니다. 데이터 유효성 검사를 자바스크립트로 처리하면 서버에 한번 다녀오지 않아도 데이터 유효성 확인이 가능하기 때문에 잘못된 데이터를 페이지 갱신 없이 즉석에서 정정할 수 있습니다. 자바스크립트에 의존한 것은 창의적으로 UX를 개선한 일로써 전혀 문제가 되지 않는데요. 문제는 자바스크립트에만 의존하는 것입니다. 개발자가 작성한 자바스크립트 가운데 전부 또는 일부를 해석하지 못하는 브라우저는 현재도 존재하고 앞으로도 존재할지 모릅니다. 대중적인 브라우저만 지원하면 그만이라는 생각은 학생증이 있는 청소년에게만 책을 빌려주는 도서관 운영 방침과 같은 겁니다.

자바스크립트를 지원하는 환경에서는 자바스크립트에 의존하여 사용성(만족, 효율)을 높이고, 자바스크립트를 지원하지 않는 환경에서는 HTML, CSS, 서버측 스크립트에 의존하도록 양쪽 방향을 모두 고려하여 설계함으로써 상호 운용성(JS 지원 여무에 무관한 운용성)을 확보할 수 있습니다. 이런 설계 기법을 겸손한 자바스크립트(Unobtrusive Javasript)라고 합니다. 겸손한 자바스크립트 관련글 하나, 겸손한 자바스크립트 관련글 둘. 이런 개념을 탑재하고 나서 자바스크립트 실력을 향상시켜도 늦지 않습니다.

오늘의 주제는 jQuery를 이용한 데이터 유효성 검사 입니다. 서버측 유효성 검사 방법은 다루지 않겠지만 서버측 스크립트에 의한 데이터 유효성 검사 또한 진행할 것이라는 전제 아래 자바스크립트로 데이터 유효성 검사 기능을 구현해 봤습니다.

데이터 유효성 검사 예제 미리보기 

데이터 유효성 검사 예제 코드

<form action="" class="form">
	<p>(*) 항목은 반드시 입력해 주세요.</p>
	<ul>
		<li>
			<label for="uid">ID(*):</label>
			<input id="uid" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 3~16 문자.
		</li>
		<li>
			<label for="upw">PW(*):</label>
			<input id="upw" type="password" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 6~18 문자.
		</li>
		<li>
			<label for="mail">Email(*):</label>
			<input id="mail" value="@" />
		</li>
		<li>
			<label for="url">Web(*):</label>
			<input id="url" value="http://" />
		</li>
		<li>
			<label for="tel">Tel(*):</label>
			<input id="tel" />
			하이픈(-)은 입력하지 마세요.
		</li>
	</ul>
	<input type="submit" value="전송" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery( function($) { // HTML 문서를 모두 읽으면 포함한 코드를 실행

	// 정규식을 변수에 할당
	// 정규식을 직접 작성할 줄 알면 참 좋겠지만
	// 변수 우측에 할당된 정규식은 검색하면 쉽게 찾을 수 있다
	// 이 변수들의 활약상을 기대한다
	// 변수 이름을 're_'로 정한것은 'Reguar Expression'의 머릿글자
	var re_id = /^[a-z0-9_-]{3,16}$/; // 아이디 검사식
	var re_pw = /^[a-z0-9_-]{6,18}$/; // 비밀번호 검사식
	var re_mail = /^([\w\.-]+)@([a-z\d\.-]+)\.([a-z\.]{2,6})$/; // 이메일 검사식
	var re_url = /^(https?:\/\/)?([a-z\d\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/; // URL 검사식
	var re_tel = /^[0-9]{8,11}$/; // 전화번호 검사식

	// 선택할 요소를 변수에 할당
	// 변수에 할당하지 않으면 매번 HTML 요소를 선택해야 하기 때문에 귀찮고 성능에도 좋지 않다
	// 쉼표를 이용해서 여러 변수를 한 번에 선언할 수 있다
	// 보기 좋으라고 쉼표 단위로 줄을 바꿨다
	var
		form = $('.form'),
		uid = $('#uid'),
		upw = $('#upw'),
		mail = $('#mail'),
		url = $('#url'),
		tel = $('#tel');

	// 선택한 form에 서밋 이벤트가 발생하면 실행한다
	// if (사용자 입력 값이 정규식 검사에 의해 참이 아니면) {포함한 코드를 실행}
	// if 조건절 안의 '정규식.test(검사할값)' 형식은 true 또는 false를 반환한다
	// if 조건절 안의 검사 결과가 '!= true' 참이 아니면 {...} 실행
	// 사용자 입력 값이 참이 아니면 alert을 띄운다
	// 사용자 입력 값이 참이 아니면 오류가 발생한 input으로 포커스를 보낸다
	// 사용자 입력 값이 참이 아니면 form 서밋을 중단한다
	form.submit( function() {
		if (re_id.test(uid.val()) != true) { // 아이디 검사
			alert('[ID 입력 오류] 유효한 ID를 입력해 주세요.');
			uid.focus();
			return false;
		} else if(re_pw.test(upw.val()) != true) { // 비밀번호 검사
			alert('[PW 입력 오류] 유효한 PW를 입력해 주세요.');
			upw.focus();
			return false;
		} else if(re_mail.test(mail.val()) != true) { // 이메일 검사
			alert('[Email 입력 오류] 유효한 이메일 주소를 입력해 주세요.');
			mail.focus();
			return false;
		} else if(re_url.test(url.val()) != true) { // URL 검사
			alert('[Web 입력 오류] 유효한 웹 사이트 주소를 입력해 주세요.');
			url.focus();
			return false;
		} else if(re_tel.test(tel.val()) != true) { // 전화번호 검사
			alert('[Tel 입력 오류] 유효한 전화번호를 입력해 주세요.');
			tel.focus();
			return false;
		}
	});

	// #uid, #upw 인풋에 입력된 값의 길이가 적당한지 알려주려고 한다
	// #uid, #upw 다음 순서에 경고 텍스트 출력을 위한 빈 strong 요소를 추가한다
	// 무턱대고 자바스크립트를 이용해서 HTML 삽입하는 것은 좋지 않은 버릇
	// 그러나 이 경우는 strong 요소가 없어도 누구나 form 핵심 기능을 이용할 수 있으니까 문제 없다
	$('#uid, #upw').after('<strong></strong>');

	// #uid 인풋에서 onkeyup 이벤트가 발생하면
	uid.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (uid.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (uid.val().length < 3) { // 입력 값이 3보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (uid.val().length > 16) { // 입력 값이 16보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 3 이상 16 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});

	// #upw 인풋에서 onkeyup 이벤트가 발생하면
	upw.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (upw.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (upw.val().length < 6) { // 입력 값이 6보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (upw.val().length > 18) { // 입력 값이 18보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 6 이상 18 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});

	// #tel 인풋에 onkeydown 이벤트가 발생하면
	// 하이픈(-) 키가 눌렸는지 확인
	// 하이픈(-) 키가 눌렸다면 입력 중단
	tel.keydown( function() {
		if(event.keyCode==109 || event.keyCode==189) {
			return false;
		}
	});
});
// ]]>
</script>

jQuery 코드 해설

• 변수 할당은 'var 변수이름 = 할당 값'  형식으로 작성한다. re_* 라는 변수에 다양한 정규식을 할당했다. 정규식 표현은 사용자 입력 값이 유효한지 검사해 줄 것이다.
• 정규 표현식을 어떤 값과 비교하면 true 또는 false 값을 얻을 수 있다. true라면 form을 서밋하고 false라면 form 서밋을 중단한다. 정규 표현식으로 데이터 유효성을 확인하려면 '정규식.test(어떤값)' 형식으로 작성한다. 
• .val() 메소드는 선택한 input 또는 select 요소의 value 값을 구한다. uid.val()은 $('#uid').val()과 같다. 이렇게 val() 괄호 안쪽이 비어있으면 값을 구해온다. 만약 val() 괄호 안쪽에 명시적으로 어떤 값이 있으면 값을 구해오는 것이 아니라 값을 넣는다. 여기서 val() 값은 사용자가 #uid 인풋에 입력한 값이다.
• if(좌변의 정규식과 != 우변의 사용자 입력 값이 같지 않으면) 사용자가 입력한 값은 오류이다. 이 조건문은 사용자 입력 값이 올바르지 않은 경우 {실행문}을 실행한다. 조건문 안에서는 ==(같음), !=(같지않음), !(아님), >(보다큰), <(보다작은), >=(같거나 큰), <=(같거나 작은) 이런 등호가 자주 쓰인다. 등호는 어떤 값을 true, false와 같은 참 거짓 또는 숫자와 자주 비교한다. 
• .after() 메소드는 선택한 요소의 다음(형제 노드) 순서에 문자열이나 HTML 요소를 넣는다. 이 예제는 $('#uid, #upw').after('<strong></strong>') 두 요소를 선택하고 두 요소의 다음에 strong 요소를 넣었다. 반대 개념의 메소드 .before()는 선택한 요소의 이전 형제노드에 문자열을 넣는다. 
• .length 메소드는 선택한 HTML 요소의 개수 또는 val() 값의 문자 개수를 구해온다. 이 경우는 선택한 HTML 요소의 개수를 구한 것이 아니라 val() 값의 문자 개수를 구했다.
• .next() 메소드는 선택한 요소의 바로 다음에 등장하는 형제를 선택한다. $(this).next('strong') 예제는 선택된 본인의 다음에 등장하는 strong 요소를 선택한다. 반대 개념의 메소드 .prev()는 이전 형제 요소를 선택한다. 
• .text() 메소드는 .val() 메소드와 사용법이 유사하다. HTML 요소 내부에 포함된 문자열을 구하거나 셋팅한다. 값이 비어있으면 값을 구해오지만 값이 설정되어 있으면 값을 셋팅한다. 이 코드는 값을 셋팅하는 예제만 포함하고 있다.
• event.keyCode는 사용자가 누른 키의 값을 구한다. 키 값은 숫자를 반환하는데. 109, 189는 하이픈(-)의 키 값이다. 즉 하이픈(-) 키가 눌리면 keydown 동작을 취소함으로써 하이픈(-) 입력을 제한한다.

수직 네비게이션 만들기

수직 네비게이션의 요구 조건은 다음과 같습니다.

• 큰 메뉴를 클릭하면 
  • 열려있는 서브 메뉴가 모두 닫히고
  • 클릭한 메뉴의 하위 메뉴가 열리며
  • 클릭한 메뉴의 글꼴이 굵어진다 
• 포커스가 맺히면 클릭한 것처럼 동작한다

수직 네비게이션 예제

수직 네비게이션 HTML

<div class="gnbVr">
	<ul>
		<li><a href="#">#1</a>
			<ul>
				<li><a href="#">#1-1</a></li>
				<li><a href="#">#1-2</a></li>
			</ul>
		</li>
		<li><a href="#">#2</a>
			<ul>
				<li><a href="#">#2-1</a></li>
				<li><a href="#">#2-2</a></li>
			</ul>
		</li>
		<li><a href="#">#3</a>
			<ul>
				<li><a href="#">#3-1</a></li>
				<li><a href="#">#3-2</a></li>
			</ul>
		</li>
	</ul>
</div>

수직 네비게이션 JS

<script type="text/javascript">
$(function(){
	var gnbVr = $('.gnbVr');
	gnbVr.find('>ul>li>ul').hide();
	gnbVr.find('>ul>li>a[href=#]')
		.click(function(){
			gnbVr
				.find('>ul>li>ul:visible')
				.slideUp(200)
				.parent('li')
				.removeClass('active')
				.find('>a')
				.css('fontWeight','');
			$(this)
				.next('ul:hidden')
				.slideDown(200)
				.parent('li')
				.addClass('active')
				.find('>a')
				.css('fontWeight','bold');
			return false;
		})
		.focus(function(){
			$(this).click();
		});
});
</script>

수평 네비게이션 만들기

수평 네비게이션의 요구 조건은 다음과 같습니다.

• 큰 메뉴를 마우스 오버 하면 
  • 열려있는 서브 메뉴가 모두 닫히고
  • 마우스 오버 메뉴의 하위 메뉴가 열리며
  • 마우스 오버 메뉴의 글꼴이 굵어진다
• 포커스가 맺히면 마우스 오버한 것처럼 동작한다
• 메뉴 영역에서 마우스가 떠나면
  • 서브 메뉴가 모두 닫히고
  • 굵은 글꼴을 제거한다

수평 네비게이션 예제

수평 네비게이션 HTML

<div class="gnbHr">
	<ul>
		<li><a href="#">#1</a>
			<ul>
				<li><a href="#">#1-1</a></li>
				<li><a href="#">#1-2</a></li>
			</ul>
		</li>
		<li><a href="#">#2</a>
			<ul>
				<li><a href="#">#2-1</a></li>
				<li><a href="#">#2-2</a></li>
			</ul>
		</li>
		<li><a href="#">#3</a>
			<ul>
				<li><a href="#">#3-1</a></li>
				<li><a href="#">#3-2</a></li>
			</ul>
		</li>
	</ul>
</div>

수평 네비게이션 JS

<script type="text/javascript">
$(function(){
	var gnbHr = $('.gnbHr');
	gnbHr.find('>ul>li>ul').hide();
	gnbHr.find('>ul>li>a')
		.mouseover(function(){
			gnbHr
				.find('>ul>li>ul:visible')
				.slideUp(200)
				.parent('li')
				.removeClass('active')
				.find('>a')
				.css('fontWeight','');
			$(this)
				.next('ul:hidden')
				.slideDown(200)
				.parent('li')
				.addClass('active')
				.find('>a')
				.css('fontWeight','bold');
		})
		.focus(function(){
			$(this).mouseover();
		})
		.end()
		.mouseleave(function(){
			gnbHr
				.find('>ul>li>ul')
				.slideUp(200)
				.prev('a')
				.css('fontWeight','');
		});
});
</script>

오늘은 자세한 설명을 생략하겠습니다. 코드가 너무 길죠? 이렇게 메소드 체이닝이 길어지면 메소드 기준으로 줄을 바꿈으로써 코드 가독성을 높일 수 있습니다.

• jQuery 최신 버전 라이브러리를 다운받아 서버에 올리거나 또는 CDN 서버에 있는 최신 버전 jQuery 라이브러리를 직접 링크할 수 있다.
• jQuery 라이브러리는 문서 body가 닫히기 직전에 삽입하는 것이 사용자의 체감 성능(속도)을 높이는데 도움이 된다.
• 웹 브라우저가 jQuery 라이브러리를 모두 해석한 후에 직접 작성한 jQuery 코드를 해석할 수 있도록 라이브러리 참조 코드 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 를 먼저 작성한다.
• 직접 작성할 jQuery 코드는 웹 브라우저가 HTML을 모두 해석한 이후에 실행하도록 준비 $(‘document’).ready(function(){ … }) 또는 $(function(){ … }) 한다.
• 달러($) 기호 사용 때문에 다른 라이브러리와 충돌할 우려가 있다면 jQuery.noConflict(); 를 선언해서 충돌을 방지할 수 있다.
• 코드를 작성하는 보통의 순서는 ‘HTML 요소를 선택하고, 이벤트를 설정하고, 동작을 실행하기’ 이다.
• $(‘…’) 괄호 안에 CSS 선택자를 넣어서 HTML 요소를 선택할 수 있다. HTML 요소, ID, CLASS를 포함할 수 있고 문자열(string)로 해석해야 하기 때문에 따옴표를 빼먹으면 안된다. JS 변수를 넣을 때는 따옴표를 사용하지 않는다.
• 점(.)을 찍어서 선택한 객체(요소)와 이벤트(클릭 등)를 연결할 수 있다. 이를 메소드 체이닝이라고 하는데 용어 설명은 생락할께요.(궁금하면 책을 ^^)

지난 포스팅에서 확실하게 기억하고 넘어가야 할 것은 jQuery의 일반적인 코드 작성 순서입니다. 아래와 같은 패턴이 자주 등장하므로 익혀 두는게 좋겠습니다.

// 한 줄로 작성하면…
$(‘선택한요소에‘).이벤트가발생하면(기능을(){실행한다});

// 코드 가독성을 위해 여러 줄로 작성하면…
$(‘선택한요소에‘).이벤트가발생하면(기능을(){ 
    실행한다
});

// 실제 코드는…
$(‘button.red‘).click(function(){ // 선택한 요소에 이벤트가 발생하면 기능을
    $(‘body’).css(‘background’,'red’); // 실행한다
});

오늘 학습 목표는 ‘콘텐츠 로테이션’ 기능입니다. 일단 다음과 같은 HTML을 작성해 봅니다.

<ul class="rotation">
    <li>#1</li>
    <li>#2</li>
    <li>#3</li>
    <li>#4</li>
</ul>
<button type="button" class="prev">PREV</button>
<button type="button" class="next">NEXT</button>

li 항목 4개를 모두 노출하지 않고 첫 번째 li 항목만 화면에 보이도록 설정할 예정입니다. 그리고 PREV/NEXT 가운데 어떤 버튼을 누르는지에 따라서 정방향 또는 역방향의 li 항목을 로테이션 형식으로 표시합니다. 저는 다음과 같은 순서로 코드를 작성할 계획을 세웁니다.

1. 첫 번째 li를 제외한 나머지 li를 감춘다.
2. .prev 버튼을 누르면; 마지막 li 항목의 위치를 첫 번째로 옮기고; 모든 li를 감춘 다음 첫 번째 li만 표시한다.
3. .next 버튼을 누르면; 첫 번째 li 항목의 위치를 마지막으로 옮기고; 모든 li를 감춘 다음 첫 번째 li만 표시한다.

얻고자 하는 표현은 다음과 같습니다.

생각을 코드로 옮기면 다음과 같습니다. 코드가 낮설더라도 두려워 할 필요는 없으니 일단 주석 위주로 봐주세요. 코드 해설은 아래에서 추가할께요.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){ // HTML 문서가 완전히 해석되면 포함한 코드를 실행한다.
$(‘.rotation>li:gt(0)’).hide(); // 첫 번째 li를 제외한 나머지 li를 감춘다.
$(‘.prev’).click(function(){ // .prev 버튼을 누르면
$(‘.rotation>li:last’).prependTo(‘.rotation’); // 마지막 li를 첫 번째로 옮기고
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감추고 첫 번째 li만 표시한다.
});
$(‘.next’).click(function(){ // .next 버튼을 누르면
$(‘.rotation>li:first’).appendTo(‘.rotation’); // 첫 번째 li를 마지막으로 옮기고
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감추고 첫 번째 li만 표시한다.
});
});
</script>

그런데 이 코드에는 반복이 존재합니다.  .prev .next 버튼을 눌렀을 때 ’모든 li를 감춘 다음 첫 번째 li만 표시한다’ $(‘.rotation>li’).hide().eq(0).show(); 부분을 똑같이 반복하죠. 개발자라면 본능적으로 이렇게 반복하는 코드가 나올 때 간결하게 만들어야 합니다. 반복되는 동작을 onlyFirst() 라는 함수에 담겠습니다. onlyFirst() 라는 함수에는 ‘모든 li를 감춘 다음 첫 번째 li만 표시한다’ 라는 명령이 포함되어 있고 이 함수를 어디선가 호출하기 전까지는 스스로 실행하지 않습니다. 함수는 한번 만들어 두면 어디서 몇 번이든 호출할 수 있습니다. 그래서 바꾼 코드는 다음과 같습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$(‘.rotation>li:gt(0)’).hide();
function onlyFirst(){ // onlyFirst라는 함수를 선언하고 호출하기 전까지 실행하지 않는다.
$(‘.rotation>li’).hide().eq(0).show(); // 모든 li를 감춘 다음 첫 번째 li만 표시한다.
}
$(‘.prev’).click(function(){
$(‘.rotation>li:last’).prependTo(‘.rotation’);
onlyFirst(); // onlyFirst 함수를 호출한다.
});
$(‘.next’).click(function(){
$(‘.rotation>li:first’).appendTo(‘.rotation’);
onlyFirst(); // onlyFirst 함수를 호출한다.
});
});
</script>

jQuery 초보인 분을 위해 낮설 수도 있는 코드를 해설해 드리겠습니다. HTML이나 CSS에서 다양한 요소, 속성, 값, 선택자 사용법을 기억해 두어야 많은 표현이 가능한데요. jQuery도 똑같습니다. 많은 메소드를 알아두면 표현 능력이 향상되겠죠.

• $(‘.rotation>li:gt(0)’).hide(); // .rotation 요소의 자식 li를 찾아 숨깁니다. 그런데 조건이 있습니다. 첫 번째 li를 제외한 모든 li를 찾습니다. :gt() 라는 선택자는 CSS에는 존재하지 않는 선택자입니다. jQuery에서 확장한 Greater Than 선택자 입니다. JS에서는 특별한 경우를 제외하고 순서(index)를 0부터 세기 때문에 li:gt(0)은 곧 ‘첫 번째 li보다 큰 li를 선택’하는 것입니다. 결과는 #2, #3, #4 항목을 선택해서 .hide() 숨깁니다. :gt() 선택자는 반대의 개념인 :lt() 선택자도 있습니다. Less Than 이겠죠.
• function onlyFirst() { … } // 반복하는 기능을 이 함수에 담아두면 필요할 때 호출(재 사용)할 수 있습니다. 모든 li를 숨긴 다음 첫 번째 li만 표시하는 기능을 담으려고 합니다.
• $(‘.rotation>li’).hide().eq(0).show(); // .rotation 요소의 자식 li를 모두 찾아내어 숨깁니다. .eq() 메소드를 이용하여 index가 (0)인 li를 선택해서 .show() 보여줍니다. .show() 메소드는 .hide()의 반대 동작입니다.
• $(‘.prev’).click(function(){ … }); // .prev 요소를 선택하고 선택한 요소에 .click() 이벤트가 발생하면 function(){ … } 함수를 실행합니다.
• $(‘.next’).click(function(){ … }); // .next 요소를 선택하고 선택한 요소에 .click() 이벤트가 발생하면 function(){ … } 함수를 실행합니다.
• $(‘.rotation>li:last’).prependTo(‘.rotation’); // .rotation 요소의 자식 li 중에서 마지막 li:last를 선택합니다. :last 가상 선택자는 CSS에는 존재하지 않는 jQuery에서 확장한 선택자입니다. :first는 :last와 반대 개념입니다. .prependTo() 메소드는 선택한 마지막 li를 잘라낸 다음 .rotation 요소의 첫 번째 자식 위치로 붙여 넣습니다. 반대의 개념으로 .appendTo() 메소드는 선택한 요소를 지정한 요소의 마지막 자식 위치로 옮깁니다.
• onlyFirst(); // onlyFirst() 함수를 호출합니다.

당장 뭔가 할 수 있다는 것을 보여주면서 jQuery 학습 동기를 유발하면 좋겠다고 생각했습니다. 구미가 좀 당기시는지 모르겠네요.

아직 자바스크립트에 익숙하지 않지만 jQuery 이야기를 해 보려고 합니다. 제가 jQuery를 잘 다루게 된다면 이미 잘 알고 있는 것에 흥미를 잃어버리는 습성 때문에 jQuery 글쓰기를 시도하지 않을것 같아요. 그래서 초심자인 지금이 가장 좋은 타이밍이라고 생각합니다. jQuery를 잘 다루려면 초급 수준의 HTML/CSS 지식이 필요합니다.

jQuery는 지구상에서 가장 인기있는 자바스크립트 라이브러리입니다. 2011년 6월 현재 w3techs.com 통계에 따르면 지구촌 1/3 웹 사이트가 jQuery를 사용하고 있고, 자바스크립트 라이브러리를 사용하는 사이트 중 4/5 웹 사이트가 jQuery를 사용하고 있습니다. 이 정도면 대세라 부를만 하지요.

책을 통해서 자바스크립트나 jQuery를 배우려고 할 때 가장 불만인것은 거의 모든 책들이 기초부터 가르치려고 한다는 점입니다. 물론 저도 책을 쓴다면 그럴것 같긴 해요. 하지만 제가 성질이 급한건지 "당장 써먹을 수 있는 것을 알려주면 참 좋을텐데" 라는 생각을 항상 합니다. 블로그는 당장 써먹을 수 있는 것을 알려주기 참 좋은 도구 입니다. 누군가 궁금해 하는 것을 콕 짚어서 짧게 쓸 수 있고 실행 코드와 예제를 눈앞에 보여줄 수 있으니까요.

오늘의 목표는 자바스크립트를 통해 가장 빈번하게 구현하는 레이어 토글(열고 닫기)을 구현해 볼까 합니다. 아무리 급해도 jQuery 라이브러리를 불러오는 방법 정도는 설명하고 넘어갈께요.

jQuery 라이브러리 참조하기

jQuery 라이브러리는 http://jquery.com/ 웹 사이트를 통해서 최신 버전을 내려받을 수 있습니다. 그러나 jQuery 라이브러리 파일을 다운받지 않고 CDN 서버가 제공하는 파일을 직접 링크해도 됩니다. 저는 jQuery 버전이 올라갈 때마다 업데이트 하는일이 귀찮아서 아예 항상 최신 버전으로 업데이트 되는 경로의 파일 http://code.jquery.com/jquery-latest.min.js 를 링크해서 사용합니다. 다음과 같이 jQuery 라이브러리를 참조할 수 있습니다.

<head>
    …
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
    …
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>

일부러 head와 body에 jQuery를 두 번 로드했는데요. 실제로는 이렇게 사용하면 안됩니다. head 또는 body 안쪽의 원하는 위치에 넣을 수 있다는 것을 보여준 것 뿐입니다. head 또는 body 안쪽에 포함할 수 있지만 head, body 밖에서 작성하면 HTML 문법 오류입니다. 자바스크립트를 head에 포함하면 웹 브라우저가 자바스크립트 파일을 해석하는 동안 아직 body 부분을 해석하기 못했기 때문에 사용자는 빈 페이지를 보고 있어야 합니다. 웹 브라우저는 HTML 코드를 작성 순서대로 해석한다는 사실을 잊지 마세요. 물론 순식간에 일어날 일이겠지만 웹 페이지 체감 속도가 느려진다는 뜻입니다. 따라서 body에 넣는 것을 권장하며 body 중에서도 body 가장 아래쪽 body가 끝나기 직전에 삽입하는 것이 좋습니다. body가 로드되기 전에 자바스크립트를 먼저 해석해야만 하는 경우도 간혹 있는데요. 그런 상황이 오면 그 때 head로 옮겨도 늦지 않습니다. 제 블로그도 body 끝나기 직전에 해석하도록 로드해 놨습니다.

jQuery 준비 함수 선언

로드된 jQuery 라이브러리를 이용하려면 jQuery() 또는 $()  함수 안쪽에 jQuery 문법의 스크립트를 작성하면 됩니다. jQuery()와 $()는 같은 표현입니다. 달러 ‘$’ 표시는 jQuery 객체를 의미합니다. jQeury 라이브러리가 로드되면 앞으로 무수히 많이 등장할 모든 달러 ‘$’ 기호를 웹 브라우저는 무조건 jQuery 객체라고 해석할 것입니다. 웹 브라우저는 jQuery 또는 달러 ‘$’ 기호를 만나면 "제이쿼리구만. 이제부터 jQuery 라이브러리에 있는 규칙을 참고해서 뭔가를 선택하거나 실행할께." 라고 말할 것입니다. 아래 코드는 항상 jQuery 라이브러리보다 나중에 선언합니다. jQuery 라이브러리가 먼저 해석이 되어야 jQuery 라이브러리를 이용할 수 있습니다. 

<script type="text/javascript">
$(document).ready(function(){
    // 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>

이 코드는 (document).ready 부분을 지워서 다음과 같이 축약할 수 있습니다.

<script type="text/javascript">
$(function(){ 
    // 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>

그러나 다른 자바스크립트 라이브러리와 jQuery를 함께 사용할 우려가 있는 경우 아래와 같이 작성합니다. 또 다른 자바스크립트 라이브러리에서도 달러 ‘$’ 기호를 객체로 사용하고 있어 충돌이 날 수 있기 때문입니다. 이렇게 jQuery.noConflict() 라고 시작 부분에 선언하고 jQuery(function(){ … }) 함수 괄호() 안에 ‘$’를 넣어 두면 jQuery(function($){ … }) 안쪽에서는 충돌 없이 안전하게 달러 ‘$’ 기호를 사용할 수 있습니다.

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){ 
    // 여기에 작성한 코드는 브라우저가 HTML을 해석을 마칠 때까지 기다렸다가 실행합니다.
});
</script>

웹 브라우저가 HTML 해석을 마칠 때까지 기다렸다가 스크립트를 실행하는 이유가 뭘까요? HTML을 해석하기 전에 스크립트가 실행되면 HTML 요소를 선택해서 뭔가를 실행해야 하는 스크립트는 제대로 실행이 되지 않습니다. 예를 들어 .help 요소를 감춤 상태로 두고 웹 페이지를 로드해야 하는 경우 브라우저가 아직 HTML을 해석하기 전이라면 스크립트는 .help 요소를 찾지 못해 오류를 내고 말 것입니다. 자바스크립트 코드를 어쩔 수 없이 문서 head에 넣어서 HTML보다 먼저 읽히도록 설정해야 하는 경우가 발생할 수 있으니 아예 항상 이렇게 작성하는것이 안전합니다.

요소를 선택하고, 이벤트를 설정하고, 동작을 실행하기

jQuery 사용법은 CSS와 유사합니다. 일단 HTML 객체를 선택하는 방법이 CSS 선택자 사용법과 유사해서 CSS를 잘 다루는 사람은 jQuery에 매우 빠르게 익숙해 질 수 있습니다. jQuery 문법은 대부분 ‘선택 – 실행’ 또는 ‘선택 – 이벤트 받으면 – 실행’ 순으로 작성합니다. button.red 요소를 클릭하면 웹 페이지의 배경색을 붉게 바꾸는 코드를 한번 작성해 보겠습니다. button.white 요소를 클릭하면 다시 흰색이 될 것입니다.

<button class="red">Red</button>
<button class="white">White</button> 

 <script type="text/javascript">
$(function(){ 
    $(‘button.red’).click(function(){ 
        $(‘body’).css(‘background’,'red’); 
    });
    $(‘button.white’).click(function(){
        $(‘body’).css(‘background’,'white’);
    });
});
</script>

HTML 요소를 선택할 때 $(‘…’) 안쪽에 CSS 선택자를 넣습니다. $(‘button.red’)를 선택했죠. 그리고 마침표(.)를 이용하여 .click() 이벤트를 연결했고 .click() 이벤트가 발생했을 때 어떤 함수 (function(){ … }) 를 실행할지 적어줍니다. 함수 안에서는 다시 $(‘body’)를 선택하고 마침표(.)를 이용하여 .css() 함수를 연결합니다. .css() 함수 안에는 이렇게 (‘property’,'value’) 속성과 값을 넣었구요. 아래 버튼을 이용해서 작성한 예제 코드가 웹 페이지를 어떻게 변화시키는지 확인해 보세요.

Red White

그러나 오늘의 학습 목표는 이게 아니었죠. 레이어를 토글하는게 목표입니다. 레이어를 토글하는 것은 이 예제보다 조금 더 복잡합니다. 사실 if 문이 필요해요. if (레이어가 닫혀있으면) {열기를 실행} else if (레이어가 열려있으면) {닫기를 실행} 그런데 첫날부터 이렇게 어려운걸 가르칠 리가 없잖아요. 다음을 보세요.

레이어 토글하기

일단 다음과 같은 HTML을 머리속에 그려 넣으세요.

<p><a href="#first">First Anchor</a></p>
<p id="first">First Layer</p>
<p><a href="#second">Second Anchor</a></p>
<p id="second">Second Layer</p>

제 머리속에는 아래와 같은 그림이 그려졌습니다. DOM 구조, HTML 요소, href 값, id 값 이름을 머리속에 넣었습니다.

• p > a[href=#first]
• p#first
• p > a[href=#second]
• p#second

스크립트를 작성하기 위한 시나리오를 떠올립니다. 일단 레이어 요소 #first, #second를 모두 찾아내어 숨깁니다. 그 다음 href 값이 #first, #second인 요소를 찾습니다. 클릭하는 경우 자신의 href 속성 값을 변수에 할당하고 변수에 할당된 값을 id 값으로 지니고 있는 요소를 선택한 다음 .toggle() 함수를 실행합니다. 마지막에 return false 를 추가하여 .click() 이벤트를 취소합니다. 웹 페이지가 자동으로 URL까지 스크롤 하는 것을 방지하는 목적입니다. 다음과 같은 코드를 작성 했습니다.

<script type="text/javascript">
$(function(){
    $(‘#first, #second‘).hide();
    $(‘a[href=#first], a[href=#second]‘).click(function(){
        var myHref = $(this).attr(‘href’);
        $(myHref).toggle();
        return false;
    });
});
</script>

사실 이 코드는 변수 var myHref = $(this).attr(‘href’); 를 사용하지 않음으로써 다음과 같이 더 단순하게 줄일 수 있습니다.

<script type="text/javascript">
$(function(){
    $(‘#first, #second‘).hide();
    $(‘a[href=#first], a[href=#second]‘).click(function(){
        $($(this).attr(‘href’)).toggle();
        return false;
    });
});
</script>

실행 결과는 다음과 같습니다. 링크를 클릭할 때 URL이 닫혀있으면 열리고 URL이 열려있으면 닫히는 동작입니다.

First Anchor

First Layer

Second Anchor

Second Layer

사용된 코드를 한 라인씩 설명하면 다음과 같습니다.

• $(‘#first, #second‘) – #first 요소와 #second 요소를 동시에 선택 합니다.
• .hide() – 선택한 요소를 display:none 처리합니다.
• $(‘a[href=#first], a[href=#second]‘) – href 속성 값이 #first, #second인 a 요소를 선택합니다.
• .click() – 사용자가 클릭 이벤트를 발생시켰을 때 함수를 실행합니다.
• var myHref = $(this).attr(‘href’) – myHref 라는 변수를 만들고 변수에 $(this).attr(‘href’) 값을 할당 했습니다. $(this)는 클릭된 a 요소입니다. 이어지는 .attr(‘href’) 함수는 href 속성의 값을 구해옵니다. 만약 어딘가에서 .attr(‘href’,'#five’) 이런 작성법을 본다면 이것은 href 속성에 #five라는 값을 셋팅하겠다는 뜻입니다. 그러나 값을 작성하지 않고 속성만 작성하는 경우에는 이미 셋팅되어 있는 값을 구해오라는 명령입니다. 다시한번 정리하면 이 코드는 클릭된 a 요소의 href 속성 값을 구해와서 myHref라는 변수에 담아라 입니다.
• $(myHref).toggle() – myHref 변수에 저장된 값은 a 요소의 href 속성 값으로써 #first 아니면 #second 일 것입니다. 즉, 숨은 레이어 중에서 클릭된 a 요소의 목적지를 선택했습니다. 이어지는 .toggle() 함수는 선택한 요소에 대하여 display:none과 display:block 상태를 반복합니다. 선택한 요소가 닫혀 있으면 열고, 열려 있으면 닫히도록 동작합니다.
• return false – .click() 함수가 실행되면 웹 브라우저는 URL까지 자동으로 스크롤을 하는데 이것을 원치 않는 경우 return false 를 반환하여 .click() 이벤트가 취소되었음을 브라우저에 알립니다. 단, 이미 실행된 동작은 취소가 되지 않기 때문에 레이어가 열리고 닫히는 동작은 실행이 취소되지 않습니다.

CSS 선택자를 이용하여 DOM으로부터 HTML 요소를 선택하고, 이벤트 함수를 설정하고, 이벤트가 발생했을 때 실행할 동작을 정의하는 순서로 코드를 작성하는 경우가 대부분입니다. $(‘…’)과 $(…)은 어떻게 다를까요? 괄호() 안에서는 홀따옴표 또는 쌍따옴표 모두 사용할 수 있는데요. 따옴표로 감싸는 경우 브라우저는 감싼 부분을 ‘string(문자열)’으로 해석합니다. 즉, HTML 요소 이름, 아이디 이름, 클래스 이름은 모두 따옴표를 사용해서 감싸줘야 합니다. 그러나 myHref와 같은 경우는 자바스크립트 변수이기 때문에 따옴표로 감싸면 안됩니다. 재미있는 것은 레이어를 토글할 때 .toggle() 함수만 사용할 수 있는게 아니라는 겁니다. 슬라이드 .slideToggle() 페이드 .fadeToggle() 함수를 사용하면 조금 더 미려한 동작이 가능합니다.

참고

• IBM에서 소개하는 ‘jQuery로 Ajax 개발을 단순화 하기’도 읽어보세요. - http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html
• TAEYO.NET에서 소개하는 ‘jQuery 프로그래밍’도 읽어보세요. - http://www.taeyo.net/Columns/List.aspx?SEQ=29&IDX=1
• 제가 만든 jQuery UI 예제들도 참고해 보세요. - http://naradesign.net/xeui/

제가 요즈음 싸부로 모시는 행복한고니의 jQuery 강의를 들을 기회가 있었는데 이런걸 알려 주더라구요. jQuery를 잘 쓰려면 먼저 세 가지 순서를 기억해야 하는데 그것은 바로 '선택하고-실행하고-조정하라'는 것이었습니다. 오늘 제 포스팅은 '선택'과 관련된 이야기 입니다. jQuery 코드는 아직 한 줄도 없지만 사실 저는 jQuery 강좌를 시작한 것과 다를 바 없습니다.

저 jQuery 잘하냐구요? 아니요. 저는 제가 이미 알고 있는 것들을 글로 옮기는 일에는 사실 흥미가 없습니다. 주로 모르는 것을 잘 알기 위해 글을 쓰는 편이죠. 얼마전 라디오를 듣는데 어떤 교수님께서 이런 고백을 하십니다. "교수들은 사실 학생들을 가르치는 척 하면서 배운다" 라구요. 이것은 교수님들만의 이야기는 아닌것 같아요.

참, 그리고 한 가지 더 추가 하자면 CSS는 낡은 브라우저(IE6)에서 선택자 사용을 지원하지 못하는 호환성 문제가 있지만 자바스크립트는 그렇지 않습니다. jQuery는 아래 표시된 모든 브라우저에서 똑같이 선택자 사용을 지원합니다. 이것 또한 jQuery의 장점 이라고 할 수 있겠네요. CSS를 이용해서 뭔가 선택하지 못하는 경우 jQuery를 이용하면 선택할 수 있으니까요.

가령 게시판을 제작할 때 짝수 행 <tr> 만을 선택하여 배경색을 지정하려는 경우 tr:nth-child(even) 이라는 CSS 선택자를 사용할 수 있지만 IE 6~8 브라우저는 아직 CSS 3 선택자를 지원하지 않기 때문에 표현이 불가능 합니다. 그러나 jQuery는 이렇게 '선택+실행' 할 수 있습니다.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
  $('tr:nth-child(even)').css('background','red');
});
</script>

odd는 홀수를 의미하고 even은 짝수를 의미하죠. 아직 자바스크립트 또는 jQuery를 배울만한 동기가 없으셨던 분들께는 새로운 동기부여가 되었으면 좋겠습니다. 아주 쉽다는 것을 깨닫고 한 번 사용하기 시작하면 걷잡을 수 없이 빠져드는 매력이 있답니다. 그러나 과유불급. 어느곳에 쓰고 어느곳에는 쓰지 말아야 할지 정확히 알고 쓰는것이 더 중요합니다. HTML/CSS 만으로도 충분히 가능한 일을 JS에게 완전히 의존하는 코드를 보면 저는 이렇게 이야기 한답니다. "건방지게 어딜 나서? 겸손할 줄 알아야지. 넌 항상 HTML/CSS 다음이야." 라구요.

• ul > li > (p+p)
• ul > li > (hx+p)
• ul > li > dl > (dt+dd)
• dl > (dt+dd) + (dt+dd) + (dt+dd) …
• dl(dt+dd) + dl(dt+dd) + dl(dt+dd) …

오늘 제가 선택한 방법은 첫 번째 방법 이었습니다. 이 방법이 정답이라고 단적으로 말하기는 어렵고 다른 방법이 틀렸다고 말하기도 어렵습니다. HTML 구조에 정답이 있는것은 아니니까요. 하지만 제가 첫 번째 마크업을 선택한 이유를 설명드려 보겠습니다. 솔직히 말씀 드리자면 이 선택에 대한 확신은 아직 없습니다.

• 질문과 답변 목록은 ‘목록’ 이기 때문에 일단 ‘ul, ol, dl’ 요소 가운데 하나를 사용하는 것이 적합하다고 판단 했습니다.
• ‘ol’ 목록은 항목의 배치 순서에 의미가 있는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서를 바꿔도 의미가 달라지지 않는 비 순차 목록이라고 판단해서 제외 했습니다.
• ‘ul’ 목록은 항목의 배치 순서에 의미가 없는 경우 사용하면 되는데 ‘질문/답변’ 목록은 배치 순서에 의미가 없다고 판단해서 사용 했습니다.
• ‘dl’ 목록은 정의 목록으로써 질문과 답변 형식에 사용해도 괜찮다고 판단 했지만 한 쌍의 ‘dt+dd’ 요소를 한 번 더 감싸주는 마크업이 필요한 경우 CSS 스타일을 적용하는데 제한이 발생하기 때문에 제외 했습니다.
• ‘dl+dl’ 형식은 ‘dl’ 요소를 ‘항목의 그룹핑’ 아닌 단 하나의 ‘항목’에만 적용했기 때문에 의미에 맞지 않다고 판단해서 제외 했습니다.
• ‘li > dl > (dt+dd)’ 형식은 목록 안에 또 다른 목록을 포함시키는 형태로써 하나의 항목을 두 번이나 목록 요소로 중첩 마크업 하는 것이 남용이라고 판단해서 제외 했습니다.
• ‘ul > li > (p+p)’ 형식으로 마크업 하는 것은 ‘질문/답변’을 모두 각각의 문단으로 볼 수 있기 때문에 적합하다고 판단 했습니다. 그러나 ‘질문’과 ‘답변’을 동일한 요소 ‘p’로 마크업 했다는 점에서 여전히 뒷맛이 개운치가 않네요.
• ‘li > (hx+p)’ 형식은 목록 안에 제목(hx) 요소가 들어가는 형태로써 의미상 가장 적합하다고 판단 했지만 목록 안에서 ‘hx’ 요소를 사용하는 것이 ‘hx’를 남용하는 것은 아닌지 구조의 적절함에 확신이 서지 않아서 제외 했습니다. 그러나 만약 ‘li>(p+p)’ 구조를 선택하지 않았다면 이것을 선택했을 것입니다.
• 만약 한 쌍의 ‘(dt+dd)’ 요소를 ‘dl’ 요소로 직접 감싸는 대신 ‘di’(definition item)와 같이 한번 더 묶어주는 마크업 요소가 존재 했다면 저는 ‘dl’ 요소를 선택했을 것입니다. 제가 이상적이라고 생각하는 마크업 구조는 ‘dl > di > (dt+dd)’ 이런 구조 인데 ‘di’ 요소는 실제로는 존재하지 않는 요소이므로 착오 없으시길 바랍니다.

a 요소에 유효한 URL 사용하기

질문은 ‘a’ 요소로 마크업 되어 있고 ‘href’ 값으로는 유효한 ‘URL’(#a1, #a2, #a3 …)이 포함되어 있습니다. 유효하다는 것은 링크의 목적지가 존재하고 링크 주소를 따라가면 기대했던 자원이 있다는 것을 의미 합니다. 만약 누군가에게 특정 ‘질문/답변’ 항목을 링크 주소를 통해 알려주어야 한다면 여러분은 마우스 우측 버튼을 눌러 ‘링크 주소 복사’ 기능을 이용할 수 있을 것입니다. URL이 유효하지 않다면 이런 편의는 불가능한 일입니다. ‘href’ 값으로 의미 없는 값 ‘#’을 넣는다면 클릭 또는 키보드 Enter를 내리 쳤을 때 키보드 포커스는 페이지 맨 처음으로 이동해 버리기 때문에 화면 낭독기 사용자(시각 장애인)는 처음부터 다시 탐색을 시도해야 합니다. 유효한 URL을 작성하는 것은 사용성과 접근성을 모두 높여주는 일로써 되도록 모든 링크에는 유효한 URL 값을 포함해야 합니다.

관련글

• FAQ의 의미 있는 마크업은? - 추지호
• 목록(ol ul dl)의 올바른 활용 문제 – 백남중

중첩 목록(ul>li>ul>li) 구조로 마크업 했고 현재 페이지 활성 상태를 표시 하려면 해당 li 요소에 .active 클래스를 추가(서버측 스크립트로)해 주면 됩니다. 계층 구조가 무한대로 깊어지는 상황도 처리가 가능 합니다. ‘+/-’ 토글 버튼에 키보드가 접근해서 하위 목록 토글 인터렉션을 조작할 수 있습니다.

예제를 새 창으로 보기

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

Lined Tab Navigation

Faced Tab Navigation

List Item Navigation

Tab Navigation 예제의 특징

• 중첩 목록(ul>li>ul>li)을 이용한 탭 네비게이션 예제.
• 목록의 계층 구조가 논리적으로 마크업 되어 있다.
• 키보드만으로도 접근이 가능하고 키보드 접근 순서가 논리적으로 처리되어 있다.
• jQuery 사용.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.

특징

• 중첩 목록(ul>li>ul>li) 구조로 마크업 했습니다.
• 키보드만으로도 조작이 가능하고 키보드의 접근 순서는 논리적으로 처리되어 있습니다.
• 서브메뉴 토글에 jQuery의 .slideDown() 및 .slideUp() 효과를 사용 했습니다.
• 이미지를 한 번 사용 했습니다.

유의사항

간혹 이런 수직 메뉴의 서브 메뉴 펼침 동작을 onmouseover 이벤트 헨들러로 처리하는 경우가 있는데요. 그런 경우 사용성이나 접근성이 정말 나빠집니다. 

사용성이 나빠지는 이유는 아래쪽에 있는 메뉴를 선택하기 위하여 링크 위를 onmouseover 하는 순간 해당 링크의 서브 메뉴가 펼쳐지는데 이는 보통 원치 않는 동작이기 때문입니다. 

접근성이 나빠지는 이유는 마우스와 동등하게 키보드가 접근할 수 있도록 onmouseover 헨들러와 onfocus 헨들러를 병행해서 작성하지 않는 경우 입니다. 이런 경우 키보드가 서브 메뉴를 펼칠 수 없기 때문에 키보드 사용자는 서브 메뉴에 접근할 수 없습니다. onmouseover 헨들러를 사용했다면 반드시 onfocus 헨들러를 병행 작성하여 동등한 기능을 처리할 수 있도록 해야 합니다.

따라서 수직 메뉴를 드롭다운 형태로 열고 닫는 오늘의 예제와 같은 경우 onmouseover 이벤트 헨들러 사용은 절대적으로 피하는 것이 좋고 onmouseover 이벤트 헨들러 사용은 보편적인 다른 모든 경우에도 최소화 하는 것이 좋습니다.

이 밖에 더 많은 예제들이 OUIF | XEUI 페이지에 링크되어 있습니다.