CSS3 Media Queries

여러분이 CSS3를 배울 기회가 있었다면 다음과 같은 코드 @media (조건문) {실행문} 으로 무엇을 할 수 있는지 알 수 있습니다. CSS3 미디어 쿼리를 이용하면 모바일 환경의 뷰와 데스크탑 환경의 뷰를 원하는 해상도에 따라 완벽하게 분기 처리할 수 있습니다. 단 하나의 HTML 문서만가지고 말입니다.

@media (max-width:799px) { ... CSS for Mobile ... }  /* 이 코드는 799px 이하의 해상도에서 해석 됩니다 */ 
@media (min-width:800px) { ... CSS for Desktop ... } /* 이 코드는 800px 이상의 해상도에서 해석 됩니다 */

현존하는 최신 버전의 브라우저들은 CSS3 미디어 쿼리를 잘 지원하기 때문에 문제가 없지만 이 코드는 두 가지 문제가 있습니다. 첫째, 미디어 쿼리를 지원하지 않는 모바일 브라우저에 적용되지 않습니다. 둘째, 미디어 쿼리를 지원하지 않는 데스크탑 브라우저에 적용되지 않습니다. 두 가지 문제를 하나씩 풀어 보도록 하지요.

Mobile First CSS

미디어 쿼리를 지원하지 않는 모바일 브라우저에 대응하기 위해 저는 다음과 같이 코드를 작성 했습니다. 모바일에 대응하기 위한 코드를 미디어 쿼리 밖에 작성한 것입니다.

... CSS for Mobile ...
@media (min-width:800px) { ... CSS for Desktop ... }

이것으로 첫 번째 문제를 해결 했습니다. 미디어 쿼리를 지원하지 않는 모바일 브라우저는 미디어 쿼리 조건문 밖에 있는 코드를 해석합니다. 미디어 쿼리 구문은 지원하지 않으므로 해석하지 않습니다. 미디어 쿼리를 지원하는 모바일 브라우저는 해상도가 800px이 넘지 않는 이상 미디어 쿼리 구문을 해석하지 않습니다. 조건에 맞지 않으니까요. 미디어 쿼리 지원 여부에 관계 없이 799px 이하의 해상도를 지닌 모든 브라우저는 모바일용 CSS 코드만 해석합니다. 간단 명료하죠? 한편 미디어 쿼리를 지원하지 않는 IE 6~8 브라우저에서는 어떻게 보일까요?

IE 6, 7, 8 Compatibility

미디어 쿼리를 지원하지 않는 데스크탑 브라우저(IE 6~8)는 모바일 퍼스트 CSS 코드만 해석하기 때문에 모바일 뷰로 보일 것입니다. 낡은 데스크탑 브라우저가 미디어 쿼리문을 바르게 해석하도록 하기 위해 저는 다음과 같이 CSS3 미디어 쿼리 활성 스크립트를 HTML 문서에 추가 했습니다. 

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

IE 조건부 주석 'if lt IE 9 = if less than IE 9 = IE 9 미만이면 해석'을 사용하여 IE 9 보다 버전이 낮은 브라우저에서만 이 스크립트를 해석하게 됩니다. 표준계열 브라우저는 이 부분을 주석으로 처리하죠. 이제 IE 6~8 브라우저는 미디어 쿼리 구문을 올바르게 해석할 수 있게 됐습니다. 간단 명료하죠?

Tip 1: Performance Improvement

미디어 쿼리를 이용하여 데스크탑용 배경 이미지(background-image)와 모바일용 배경 이미지를 다르게 설정해 보세요. 미디어 쿼리를 이용하여 해상도별로 배경 이미지를 다르게 설정하면 다른 해상도에 필요한 배경 이미지는 서버로 전송 요청하지 않습니다. 즉, 특정 해상도에서 필요로하는 이미지만 요청(http request)하므로 미디어 쿼리를 통해 네트워크 자원을 아낄 수 있습니다. 웹 브라우저 개발자 도구의 네트워크(Network) 탭을 통해서 직접 확인해 보세요.

Tip 2: Override Mobile by Desktop CSS

모바일 퍼스트 CSS 코드는 낮은 해상도의 모바일용 브라우저에서만 해석하는 것이 아니라 높은 해상도의 데스크탑 브라우저에서도 동시에 해석하게 됩니다. 따라서 미디어 쿼리 조건문 안에서는 데스크탑용 CSS 코드가 모바일용 CSS 코드보다 더 높은 우선순위를 가질 수 있도록 덮어쓰기 하는 작업이 필요합니다. 손이 많이 갈것 같지만 모바일용 코드는 비교적 단순하기 때문에 그리 어렵지는 않을 것입니다.

References

• Responsive Design with CSS3 Media Queries
  
• Flexible, Mobile-First Layouts with CSS3
• HTML5 & Responsive Web Design
• Mary Meeker: Mobile Internet Will Soon Overtake Fixed Internet

그래서 웹 개발자는 언제부터인가 이런 불편을 개선할 목적으로 데이터 유효성 확인과 같은 핵심 기능을 자바스크립트에 의존하기 시작했습니다. 데이터 유효성 검사를 자바스크립트로 처리하면 서버에 한번 다녀오지 않아도 데이터 유효성 확인이 가능하기 때문에 잘못된 데이터를 페이지 갱신 없이 즉석에서 정정할 수 있습니다. 자바스크립트에 의존한 것은 창의적으로 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/

저는 오늘 스타 개발자가 가진 어떤 능력에 대해서 말하고 싶습니다. 일단 스타 개발자는 회사에서 밀어줘서 되는 것이 절대 아니라고 생각합니다. 회사에서 밀어줘서 스타가 된 개발자 있으면 알려주세요. 저는 없다고 생각합니다. 100% 본인의 ‘커뮤니케이션 + 브랜딩’ 능력이라고 생각합니다. 커뮤니케이션 능력이란 글을 쓰고 대화를 하는 능력을 말하구요. 브랜딩 능력이란 본인 스스로 자신의 가치를 높이는 마케팅 능력이라고 생각합니다.

여러분은 스타 개발자를 알게 된 경위가 무엇인가요? 제가 생각하는 스타 개발자는 100% 자기 블로그에 글을 씁니다. ‘글’이요. 이것이 오늘 제 포스팅의 주제입니다. 스타 개발자가 강의를 나가고 책을 쓰고 많은 사람들이 그를 알아보고 롤 모델로 삼는것은 모두 그의 블로그 때문이라고 생각합니다. 블로그가 유명해야 강의도 들어오고 출판사에서 연락도 옵니다. 블로그가 있어야 사람들이 SNS로 글도 전파해 줍니다. 간혹 블로그 없이 SNS 위주의 활동으로만 유명세를 타는 사람도 있지만 저는 그런 분들이 그 분야에 정통한 사람인지 확신을 갖지 못합니다. 저는 그 사람의 블로그 글을 읽고 그의 팬이 됩니다. 이렇게 스스로 대중과 커뮤니케이션 하고 브랜딩 하는 능력이 없는데 회사에서 멍석 깔아주면 잘 할까요? 아니라고 생각합니다.

굳이 스타 개발자 아니라도 범위를 좁혀서 적어도 그 분야에서 인정받는 개발자가 되려면 커뮤니케이션 기술이 있어야 한다고 생각합니다. 혹시라도 "엔지니어가 개발만 잘 하면 그만 아닌가? 나는 개발 능력으로만 인정받고 싶은데. 스타 개발자까지는 되고 싶지 않아." 이런 생각을 가진 분이 있을 수 있습니다. 스타 개발자는 피곤할 수도 있습니다. 그러나 엔지니어가 개발만 잘 하면 될꺼라는 생각은 위험하다고 생각합니다. 혼자 일할 때 천재적인 기질을 보일지는 모르겠지만 커뮤니케이션 기술이 부족하면 협업하기 어려운 사람으로 보이게 됩니다.

저는 커뮤니케이션 기술이 글쓰기에서 나온다고 생각합니다. 글을 잘 쓰는 사람이 말도 잘한다고 생각하구요. 글은 잘 쓰지 않으면서 말을 잘 하는 사람을 신뢰하지 못합니다. 같은 분량의 책을 읽더라도 평소에 글을 쓰는 사람은 그렇지 않는 사람과 비교할 때 생각이나 지식의 깊이가 다르다고 생각합니다. 저는 효과적으로 커뮤니케이션하기 위한 도구로써 글을 잘 써야겠다는 생각을 해오며 틈틈이 오직 글을 잘 쓰기 위한 글을 읽기도 했습니다. 제가 배운 글쓰기 기술은 학문적이지 않고 실용적이며 커뮤니케이션 도구로써의 글쓰기 였습니다. 꼭 전달하고 싶은 내용만 간략하게 추려 봤습니다.

한국어 문법을 익히는 것은 커뮤니케이션 도구로써의 글쓰기 관점에서 볼 때 우선순위가 낮다고 판단해서 아예 언급조차 하지 않았습니다. 제 나름대로 정리한 글쓰기 기술은 다음과 같습니다. 주로 임재춘 교수의 ‘기술 글쓰기’에 관한 내용들을 찾아 읽어 봤는데 저는 ‘글쓰기 기술’이라고 제목을 뒤집어 달았습니다. 기술 글쓰기란 과학 또는 사실을 전달하는 글쓰기이고 제가 말하는 글쓰기 기술이란 일상에서 메일을 주고 받거나 블로그에 글을 작성하기 위한 비교적 가벼운 커뮤니케이션 기술입니다. 누구나 공감할 수 있을 정도의 내용으로만 쉽게 적으려고 노력했습니다. 일상에서 제가 요약한 정도만 유념하며 글을 써도 글을 잘 쓰는 사람이라고 생각합니다.

 PDF 버전 | TEXT 버전

HTML5

HTML5로 변경하는데는 약 2~3시간 정도 밖에 걸리지 않았습니다. 하지만 고민했던 시간은 꽤 길었습니다. div, section, article 요소를 혼동하지 않기 위해서 의미를 정확하게 이해해야 했습니다. DTD를 변경하고 header, footer 같은 새 요소들을 사용하면 IE6와 같은 낡은 브라우저에서 저 낮선 요소들을 어떻게 처리하는지 걱정도 했습니다.

HTML5 DTD declaration

HTML5 DTD는 매우 간단합니다. 예전에는 DTD를 외워보려고 갖은 애를 써도 그러지 못했는데 이제는 잊으려 애를 써도 잊지를 못합니다. <!doctype html> 이라고 적으면 끝입니다. case-insensitive. 대소문자를 구별하지 않으니 대문자로 쓰거나 소문자로 쓰거나 섞어 쓰거나 상관 없습니다. HTML5는 DTD 뿐만 아니라 요소와 속성 모두 case-insensitive 입니다. 대소문자를 구별하지 않습니다. 그러나 요소 이름과 속성을 대문자로 쓴다고 하면 말리고 싶습니다. 다른 이유는 없구요. 보기 불편하니까요.

Human language declaration

WCAG 2.0 지침의 3.1.1 항목을 보면 다음과 같은 구문이 있습니다.

"페이지 언어: 모든 웹 페이지의 기본 휴먼 랭귀지는 기계적으로 판단할 수 있어야 한다. (수준 A)"

휴먼 랭귀지란 사람이 쓰는 자연어를 말합니다. 수준 A란 최소한의 요구 조건 입니다.

<html lang="ko">

이렇게 html 요소에 한국어 휴먼 랭귀지 선언을 할 수 있습니다. 웹 문서에 휴먼 랭귀지를 선언하면 텍스트를 음성으로 변환해주는 시각장애인용 화면낭독기는 적합한 음성 엔진을 이용해서 웹 문서를 읽어줍니다. 예를 들어 로마자는 영어에만 쓰이는 것이 아니라 유럽에서 두루 쓰이는데요. 휴먼 랭귀지 속성을 선언하면 시각장애인용 화면 낭독기가 로마자를 어떻게 발음을 해야 하는지 정확히 알 수 있습니다. 한국형 웹 콘텐츠 접근성 지침인 KWCAG 2.0 지침에도 동일한 내용이 포함되어 있습니다. KWCAG 2.0에 포함되어 있다는 것은 향후 웹 접근성 품질마크 심사 지표에도 반영이 된다는 의미 입니다. 다음 회차의 웹 접근성 품질마크에는 이 기준이 적용되므로 웹 접근성 품질마크 심사에 도전하는 제작자는 반드시 휴먼 랭귀지를 작성해야 합니다. 이것은 HTML5 뿐만 아니라 다른 버전의 마크업 언어(HTML, XHTML)에도 동일하게 적용됩니다.

HTML5 enabling script

HTML5에는 여러가지 새로운 요소들이 등장 했습니다. 그러나 낡은 브라우저들은 이것을 알아차리지 못하는 문제가 있기 때문에 새로운 HTML5 요소들을 해석하거나 렌더링하지 않습니다. 도통 사람들이 업데이트를 하려고 하지도 않고 자동으로 업그레이드를 해주지도 않는 IE 6~8 브라우저가 그렇습니다. 우리는 낡은 브라우저가 새 요소들을 인식할 수 있도록 스크립트로 처리할 수 있습니다. 이 스크립트는 문서 head에 포함해서 브라우저가 낮선 태그를 만나 허둥대는 일이 없도록 처리하는 것이 좋습니다.

<!–[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>

"if lt IE 9 = if less-than IE 9" IE 조건부 주석을 사용해서 IE9 보다 버전이 낮은 브라우저에서만 이 스크립트를 해석하도록 한 것입니다. 스크립트는 새로나온 HTML5 요소들을 브라우저가 인식할 수 있도록 추가해서 낡은 브라우저들이 HTML5 요소들을 해석하고 렌더링 할 수 있도록 해줍니다.

CSS Reset

새로 추가된 요소들이 inline 요소인지 block 요소인지 브라우저들은 모를 수 있습니다. 따라서 다음과 같이 CSS display 상태를 정의해 줍니다. HTML5에서 새롭게 추가된 요소들을 모두 block으로 선언 했습니다.

header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
    display: block
}

HTML5 Markup – Document Structure

의미론적 마크업을 글로만 배우면 막상 실무에 적용할 때 생각하지 못했던 고려사항들이 발생해서 고민도 되고 마크업을 하더라도 확신이 서지 않게 됩니다. 그런 의미에서 개인 블로그는 좋은 실험 재료인 것이죠. 제 블로그의 마크업 구조는 다음과 같습니다. 

• div
  • header
    • h1
  • section
    • article
      • h1
    • section
      • h2
    • section
      • h2
      • form
    • nav
  • nav
    • ul
      • li
  • footer

조금 더 자세히 풀어 볼까요?

• div – 본문의 폭을 제한하거나 중앙으로 배치하는 역할만 합니다. 별 의미는 없기에 div 요소를 사용 했습니다.
  • header – 사이트 제목과 설명이 등장하는 헤더 섹션입니다.
    • h1 – 사이트 최상위 제목.
  • section – 헤더, 풋터, 네비게이션 섹션이 아닌 일반적인 섹션입니다. section 요소는 웹 문서의 구조를 결정하는 핵심 요소 입니다. 섹션은 통상 하나의 헤딩과 명시적인 관계를 갖는것이 좋습니다. section & hx의 관계는 마치 fieldset & legend 요소와 구조적으로 흡사합니다. section 안에 포함된 hx는 section 내부에 포함된 콘텐츠의 제목이 됨과 동시에 현재 웹 문서의 개요 역할을 합니다. 제 블로그의 경우 section 요소와 hx 요소 사이에 article이 끼어들어 section이 제목 없이 글 본문, 댓글, 댓글 쓰기 폼을 감싸는 역할을 하고 있습니다. section은 바로 아래 첫 번째 자식으로 hx를 갖추는 것을 구조적으로 권장하지만 제 경우는 그러지 못했네요. 하지만 꼭 그런 구조를 갖추지 못해도 괜찮습니다. hx가 없어도 section은 section 이니까요.
    • article – 포스트 본문 섹션으로써 처음에는 section 요소와 어떤 의미적 차이를 지니는지 구분하기 어려웠습니다. 그러나 article 요소는 이 영역을 독립적으로 다른곳에 옮겨놔도 하나의 완전한 문서 또는 섹션이 될 수 있는 '재 사용' 가능한 또는 '배포 가능한' 본문 영역이라고 설명할 수 있겠습니다. section 요소와 마찬가지로 hx 요소를 갖는것을 강력하게 권장합니다. section과 article 요소 가운데 무엇을 써야 할지 망설여질 때에는 주변의 맥락과 분리하여 독립해도 하나의 완전한 콘텐츠가 되는지 아닌지를 판단해 보세요. 독립적이라면 article에 가깝고 현재 문서의 개요와 구조를 결정하는 역할이라면 section에 가깝습니다.
      • h1 – 포스트 본문 제목. h1이 두 번째 등장하죠. h1은 하나의 웹 페이지에 2번 이상 등장할 수 있습니다. W3C 웹 사이트도 이런 구조를 가지고 있으며 검색엔진 최적화에 좋습니다. 게시판에서 게시물 제목도 h1으로 마크업 하면 검색엔진으로부터 좋은 점수를 받을 수 있습니다. h1에 포함된 텍스트가 문서 헤드의 title 요소에도 들어가 있으면 금상 첨화죠. 제 블로그는 그렇게 처리되어 있습니다. 검색엔진이 좋아합니다.
    • section – 댓글 목록 섹션.
      • h2 – 댓글 목록 제목.
    • section – 댓글 쓰기 섹션.
      • h2 – 댓글 쓰기 제목.
      • form – 댓글 쓰기 폼.
    • nav – 이전 포스트 / 다음 포스트 네비게이션.
  • nav – 사이트 글로벌 네비게이션.
    • ul – 비순차 목록 컨테이너.
      • li – 네비게이션 항목.
  • footer – 저작물 이용 안내 및 RSS 주소를 담은 풋터 섹션.

HTML5 Markup – Form Controls

HTML5 Form의 위력은 아이폰을 사용하는 분들이면 쉽게 체감할 수 있습니다. 제 블로그에서는 다음과 같은 타입의 Form Control을 사용 했습니다. 제 블로그의 End-user 페이지에서 Form Control 이라고 해 봐야 검색창과 글쓰기창 뿐인데요. 적용 결과는 다음과 같습니다.

<input type="search" autocomplete="on" />
검색창의 인풋 타입이 search 입니다.

<input type="url" autocomplete="on"  />
댓글 쓰기 창에서 웹 사이트 주소 입력 인풋 타입이 url 입니다.

이 밖에도 HTML5에는 새롭게 추가된 다양한 input type이 있습니다. 아래 항목들은 HTML5에 새롭게 추가된 input type 입니다. 링크를 클릭하면 실제로 코딩된 페이지를 만날 수 있습니다. 현재는 오페라 브라우저만 input type을 거의 완벽하게 지원하고 있습니다. 오페라 브라우저를 통해 예제를 확인해 보세요. 다른 브라우저와는 다르게 인풋을 좀 더 편리하게 작성할 수 있도록 도울 것입니다.

• input type="search"
• input type="tel"
• input type="url"
• input type="email"
• input type="number"
• input type="datetime"
• input type="datetime-local"
• input type="date"
• input type="time"
• input type="month"
• input type="week"
• input type="range"
• input type="color"

HTML5의 인풋 타입을 적절하게 사용하면 아이폰 사용자에게 다음과 같이 문맥에 알맞는 자판을 보여줄 수 있습니다. 입력 커서가 인풋에 들어갔을 때 인풋 타입을 인식해서 최적화된 자판 배열을 표시합니다.

input type="search" 일 때 아이폰은 자판에 Search 키를 보여줍니다. 아이폰으로 input type="search" 테스트 해보기.

input type="tel" 일 때 아이폰은 자판에 숫자와 + * # 키를 보여줍니다. 아이폰으로 input type="tel" 테스트 해보기.

input type="url" 일 때 아이폰은 자판에 .com과 Go 키를 보여줍니다. 아이폰으로 input type="url" 테스트 해보기.

input type="email" 일 때 아이폰은 자판에 @와 . 키를 보여줍니다. 아이폰으로 input type="email" 테스트 해보기.

input type="number" 일 때 아이폰은 자판에 숫자와 특수문자 키를 보여줍니다. 아이폰으로 input type="number" 테스트 해보기.

Responsive Web Design

사용자가 어떤 해상도의 단말을 사용하든 그에 알맞는 뷰를 보여줄 수 있는 유연한 레이아웃 설계 기법입니다. 이름은 정말 근사하지만 막상 내용 뜯어보면 참 볼것 없습니다.

Mobile Viewport Declaration

모바일 단말기는 기본적으로 PC용 화면 전체를 작은 화면 안에서 모두 보여줍니다. 작은 화면에 전체를 담으려니 다음과 같이 글씨가 깨알만해져서 확대하지 않고는 보기가 어렵겠지요.(물론 아이폰4는 그냥 봐도 보입니다. 326dpi & 640*960px을 자랑하는 레티나 디스플레이잖아요.) 적당히 확대한 다음 수직 수평 스크롤을 해 가면서 어렵게 읽을 수 밖에 없습니다.

모바일 뷰포트를 선언하면 모바일 단말에 탑재된 웹 브라우저(Safari Mobile for the iPhone, Android browser, webOS browser in Palm Pre and Pixi devices, Opera Mini, Opera Mobile and BlackBerry browsers)는 웹 페이지를 적절히 크게 확대해서 보여줍니다.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes" />
meta 태그의 각 속성에 대한 자세한 설명

그러나 콘텐츠의 너비가 크기 때문에 당연히 수평 스크롤이 필요합니다. 아래 이미지를 보면 아시겠지만 오른쪽에 내용이 더 있는데 잘려서 보이지 않습니다. 사용자는 여전히 수직 수평 스크롤을 모두 해야만 하는데 이것은 여간 짜증스러운 일이 아닙니다.

그래서 필요한 것이 바로 Responsive Web Design 입니다. 사용자가 어떤 해상도의 단말기를 가지고 있더라도 알아서 유연하게 콘텐츠를 정돈해서 보여주는 기술이 필요합니다. 한때는 320px의 화면 너비가 모바일 화면 크기의 대세가 될 줄 알았지만 지금은 그렇지 않습니다. 매우 다양한 해상도를 지닌 디바이스들이 쏟아져 나오고 있지요. 그렇게 새로운 단말기가 등장할 때마다 그 해상도에 맞는 웹 페이지 화면을 추가로 개발하시겠습니까? 세상에 그런 삽질을.

CSS3 Media Queries

CSS3에는 Media Query 라는 명세가 있고 최신 브라우저들(IE9, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있습니다. 다음은 모바일 뷰포트를 설정해서 적당히 확대한 다음 Media Query를 이용해서 레이아웃을 알맞게 정돈한 제 블로그의 모바일 화면 입니다. 아름답지요.

미디어 쿼리 문법을 간단하게 살펴보죠. 제 블로그는 모바일 환경이든 아니든 불문하고 브라우저의 너비가 980px 이하로 작아지면 화면 우측에 있는 글로벌 네비게이션이 화면 아래쪽으로 뚝 떨어집니다. 지금 브라우저의 폭을 조절해서 한번 확인해 보세요. IE 6~8 브라우저는 미디어 쿼리를 지원하지 않기 때문에 재현이 되지 않습니다. (그 낡아 빠진 브라우저 좀 그만 쓰면 안될까요?)

@media only all and (max-width:980px) {    /* 화면 너비가 980px 이하일 때에만 아래 코드를 실행 */
    .content{ float:none; width:auto }    /* 콘텐츠 플롯을 해제하고 너비를 자동으로 */
    .nav{ float:none; width:auto }    /* 네비게이션 플롯을 해제하고 너비를 자동으로 */
}

딱 이정도의 사용법만 알아도 반응형 웹 디자인은 게임 끝입니다. CSS3의 Media Query에 대해 더 자세히 알고 싶다면 아래 링크된 문서들을 참고해 보세요.

• W3C Media Queries - http://www.w3.org/TR/css3-mediaqueries/
• CSS3 Media Queries Vol.1 - http://mydeute.com/txp/article/631

 게임 끝.

모든 웹 기반의 위지윅 에디터를 조사한 것은 아니지만 제가 간단하게 벤치마킹한 결과에 따르면 국내외를 막론하고 대부분의 제품들은 웹 브라우저가 기본으로 제공하는 처리 방식에 따라 p 요소에 Enter키를 맵핑해 두었고 br 요소에 Shift+Enter키를 맵핑해 두었습니다.

한편 글로벌 제품들은 p 요소에 브라우저가 제공하는 기본적인 상하 여백 {margin:1em 0} 스타일을 그대로 살려두는 방식을 채택했는데 국내 제품들은 p 요소에 브라우저가 제공하는 기본적인 상하 여백을 {margin:0} 으로 덮어쓰기 하는 방식으로 리셋 했습니다.

이를 통해서 우리는 다음과 같은 세 가지 사실을 알 수 있습니다.

• 해외에서는 Enter키를 치면 단락을 변경하는 것으로써 단락 사이의 여백이 학습되어 있다. 행간 여백 없이 줄 바꿈을 하려면 Shift+Enter를 치면 된다.
• 한국에서는 Enter키를 치면 단락을 변경하는 것이 아니라 단순히 줄 바꿈을 하는것으로 학습되어 있다. 단락을 구분하려면 Enter키를 두번 치면 된다. 문단 요소 p의 여백이 제거되어 있으므로 Shift+Enter를 알 필요도 없다.
• 외국 사람과 한국 사람은 웹에서 선호하는 글쓰기 모양도 다르고 경험도 다르다. 외국 사람은 하나의 문장에 마침표를 찍더라도 다음 문장을 줄 바꿈 없이 이어쓰며 단락을 바꿀 때에만 Enter를 치는 경향이 있고 한국 사람들은 마침표를 찍으면 다음 문장을 쓰기 위해 줄을 바꾼다. 외국인이 생성하는 태그는 의미론적 관점에서 옳은 방향이나 한국인이 사용하는 방식은 편리하다.

외국인과 한국인의 습성이 다를 뿐만 아니라 글쓰기 교육 시간에 문단을 바꿀 때에만 개행하라고 배웠다 하더라도 한국 사람들의 글쓰기가 틀렸다고 보기는 어렵다고 생각합니다. 국민 모두가 한 방향으로 틀렸다면 그 방향이 우리 나라에서는 사실상 통용되는 표준이라고 인정해야 한다는 생각입니다. 따라서 우리의 고민은 다음과 같이 전개됩니다.

• 한국에서 제품을 만들기 시작했지만 글로벌 시장에 진출하려면 사실상 국제 표준에 따라야 한다.
• 글로벌 시장에 진출하더라도 한국 시장은 포기할 수 없다.
• 우리 제품은 내수용과 수출용 구분이 따로 없다.

‘A’도 만족해야 하고 ‘B’도 만족해야 한다면 둘 다 만족 시켜주자라는 것이 중론인데요. 다음과 같은 제안들이 검토 대상에 올랐습니다.

• p 요소는 Enter키로 생성하며 br 요소는 Shift+Enter키로 생성한다.
• p 요소의 여백을 관리자 화면에서 원하는 방식으로 선택할 수 있도록 옵션을 제공한다. "[v] p 요소에 여백 제거"
• p 요소의 여백을 글 쓰는 사람이 에디터에서 직접 선택할 수 있도록 옵션을 제공한다. "[v] p 요소에 여백 제거"
• p 요소에 브라우저가 제공하는 기본 마진을 보존한 다음 Enter 한번은 br 요소를 생성하고 Enter 두번은 p 요소를 생성한다. (이 방법은 작년부터 제안되었으나 구현에 대한 난제가 있었던 것으로 지금은 정확히 기억이 나지 않네요)

글 쓰는 사람이 에디터에서 직접 선택할 수 있도록 옵션을 제공하는 방법은 개인적으로 반대하는 방법입니다. 개발자 또는 관리자가 해야 할 선택을 사용자에게 떠넘겨 UI를 복잡하게 만든다는 느낌을 지울 수가 없고 의미를 정확하게 간파하는 사용자도 드물꺼라 생각합니다. XE개발팀에서 XEED라는 새로운 에디터를 개발하며 이 문제를 어떻게 해결하는지 지켜봐주세요. 그리고 좋은 의견이나 경험담이 있으면 댓글로 함께 의견 나누시죠.

몸이 불편한 학생은 참여를 삼가해 주시기 바랍니다.

처음에는 제 눈을 의심했고 뭔가 잘못 해석한 것이기를 바랬습니다. 하지만 상식적인 수준에서 생각해 볼 때 저 문장은 다음과 같이 해석할 수 밖에 없었습니다.

장애인 학생은 참여할 수 없습니다.

신봉동 주민센터 역사문화탐방 공지문. 몸이 불편한 학생은 참여를 삼가해 달라는 문구가 포함되어 있다.

저희 아들이 장애인이거나 몸이 불편하지는 않습니다. 하지만 언제라도 그런 사람이 될 수는 있겠죠. 저는 지금 장애를 갖게 된 아버지의 마음으로 글을 쓰고 있습니다. 만약 저희 아들이 나중에 장애아가 된다면 제가 저런 공지문을 보고 그냥 지나칠 수 있겠습니까? 자식을 가진 부모라면 모두 똑같은 마음일 것입니다.

제가 신봉동 주민센터의 공지를 완전히 오해 해버렸거나 또는 공지문을 작성하신 분께서 작문 실력이 형편 없어서 본래의 의도를 제대로 전달하지 못한 것이라면 정말 좋겠습니다.

우리나라 역사를 배우는 것은 중요하고 몸이 불편한 사람과 함께 어울려 살아가는 것은 중요하지 않습니까?

굳이 장애인 차별 금지법이 어쩌구 저쩌구 떠들고 싶지 않습니다. 법보다 사람의 몸과 마음이 다치는 것을 생각하지 못하고 그런 사람들과 함께 어울려 살아가야 한다는 사실을 후손들에게 가르치지 못한 어른들의 어른스럽지 못한 행동을 더 두려워 해야 할 것 같습니다. 사실 이런식의 공지는 장애인 차별 금지법에 의하여 충분히 소송 대상이 되고도 남을 것입니다.

누군가의 잘못을 들추어 내는 일이 이제는 썩 기분이 좋지 않지만 더 이상 같은 실수가 발생하지 않기를 바라는 마음에서 굳이 적습니다. 공산성은 지형이 산이기 때문에 몸이 불편한 학생이 오를 수 없다는 것쯤은 이미 알고 있습니다.

신봉동 주민자치센터에 요청합니다. 앞으로는 몸이 불편한 학생도 함께 데려가 주십시오. 휠체어를 타고 있으면 서로 밀어주고 눈이 안보이면 옆에서 팔짱을 건내주기만 하면 됩니다. 몸이 불편한 아이 그리고 함께 여행을 다녀온 아이들은 우리나라 역사보다 더 값진 체험을 하고 돌아올 것이라 확신합니다.

심사는 크게 ‘사전심사 > 전문가 심사 > 사용자 심사’ 과정을 거칩니다. 사전 심사는 품질마크 일부 지표와 접근성 검사 도구를 활용한 약식 검사로 진행됩니다. 전문가 심사는 웹 접근성 전문가에 의하여 전수조사 형식으로 진행 됩니다. 그러나 모든 페이지를 검사하지는 않으며 웹 접근성 저해요소가 많은 페이지를 표본으로 추출한 뒤 이를 기반으로 심사합니다. 사용자 심사는 실제 장애인에 의하여 진행되고 장애인은 주어진 과업(예를 들면 회원가입 및 게시판 글쓰기)을 완수해야 합니다.

웹 접근성 품질마크는 KWCAG 1.0 국가 표준을 참고하여 이 지침을 준수하는지의 여부를 측정하는 ’18개’의 지표로 구성되어 있는데 품질마크 인증을 획득하려면 각각의 지표에 대하여 전문가 심사에서 모두 ’95점’ 이상을 획득해야 합니다. 전문가 심사를 통과했다 하더라도 사용자 심사에서 장애인 사용자가 주어진 과업을 95% 이상 완수할 수 없는 경우 품질마크를 획득할 수 없습니다.

KWCAG 1.0 버전은 국제 웹 접근성 지침인 WCAG 2.0 지침의 수준 A 항목을 참고(부분적으로 수준 AA 참고)하여 제작 되었습니다. 즉, 웹 접근성 품질마크 인증을 획득하는 경우 KWCAG 1.0 국가 표준 지침을 준수하는 동시에 WCAG 2.0 지침의 수준 A에 이르기 쉽도록 되어 있습니다. 여기서 ‘수준 A’란 웹 접근성이 요구하는 최소한의 수준으로써 웹 사이트가 접근성이 있다고 말할 수 있는 국제적 기본 수준을 의미합니다.

한국정보화진흥원은 2009년 KWCAG 2.0을 개발하여 한국정보통신기술협회(TTA)에 표준으로 등록 했으며 2011년에는 현재의 국가 표준인 KWCAG 1.0을 대체할 것입니다. KWCAG 2.0 지침은 KWCAG 1.0 지침을 보완하기 위하여 2개의 지침을 삭제하고 9개의 지침을 새롭게 추가했으며 그 밖에 기존의 지침을 다듬어 계승했습니다.

다음 표는 ‘웹 접근성 품질마크, KWCAG 1.0, KWCAG 2.0, WCAG 2.0(수준 A, 수준 AA)’ 지침을 관련된 항목끼리 분류한 것입니다. 웹 접근성 품질마크 인증을 획득하기 위한 18개 지표를 이해하는데 활용하시기 바랍니다.

Perceivable (인식의 용이성)

정보와 인터페이스 구성요소는 사용자가 인지할 수 있는 방법으로 표시해야 한다는 지침 입니다.

Operable (운용의 용이성)

사용자 인터페이스 구성요소와 탐색 기능은 조작이 가능해야 한다는 지침 입니다.

Understandable (이해의 용이성)

정보와 사용자 인터페이스 조작은 이해할 수 있어야 한다는 지침 입니다.

Robust (견고성)

콘텐츠는 보조 기술을 포함한 다양한 사용자 응용 프로그램에 의하여 해석이 가능하도록 충분히 견고해야 한다는 지침 입니다.

Etc (기타)

그 밖에 웹 접근성 품질마크 지표에는 존재하지 않지만 KWCAG 1.0/2.0 지침에 포함된 항목과 WCAG 2.0 에서 수준 A 또는 AA로 중요하게 취급하는 추가 지표는 다음과 같습니다.