UI Laboratory

UI 개발을 위한 레퍼런스

INDEX

새로운 구조적 태그와 속성


올바른 DOC 타입

HTML5의 DOC 타입은 다음과 같다.

			<!DOCTYPE html>
		

DOC 타입의 요점은 두가지이다.

  1. 첫째 - 유효성 검사기가 문서에 어떤 규칙을 적용할지 알려준다. 즉, 유효성 검사기에게 HTML5의 새로운 규칙을 쓰겠다고 알려주는 것이다.
  2. 둘째 - IE 6,7,8 버전에서 문서를 '표준 모드'로 렌더링하도록 강제한다.

새로운 구조적 태그

| <header>

페이지나 절의 헤더 영역을 정의한다. 페이지 하나에 하나의 헤더만 있을 수 있다거나 하는 제한은 전혀없다.

| <footer>

페이지나 절의 푸터 영역을 정의한다. 보통 저작권이나 사이트 소유자에 대한 정보를 담고 있다. 명세에는 하나의 페이지가 포함할 수 있는 푸터의 숫자 역시 제한이 없다.

| <nav>

페이지나 절의 내비게이션 영역을 정의한다.

| <section>

페이지의 논리적인 영역이며, 기존의 남용하던 div 요소 중 이런 목적으로 사용했던 것들을 section 요소로 대체할 수 있다. 하지만 섹션을 남용하는 것 역시 경계해야 한다.

| <article>

웹 페이지의 실제 내용을 설명하는데 사용된다. 각 글은 헤더, 내용, 푸터로 구성된다.

| <aside>

부차적인 또는 관련 있는 내용을 정의한다. 인용구, 다이어그램, 덧붙이고 싶은 생각, 관련된 링크등에 사용할 수 있다. 사이드바를 aside 요소로 마크업하는 건 잘못된 생각이며 aside 요소는 글과 관련이 있는 내용을 보여주려는 목적으로 만든 것이다. 즉, 관련 링크, 용어설명, 인용구 등이다.

| 커스텀 데이터 속성

data-* 형태로, 데이터를 첨부할 수 있다.

| <meter>

meter 요소는 최소값과 최대값이 정해져 있는 범위 안의 값을 시맨틱하게 설명하려 할 때 사용한다.
예를 들어, 모금 웹사이트를 만들어 목표액인 5,000달러까지 얼마나 남았는지 나타내고 싶다면 다음과 같이 한다.

			

모금 목표액

$2,500

목표액인 5000 달러에 도달할 수 있게 도와주세요!

| <progress>

meter 요소와 흡사하지만, 파일을 올릴 때 볼 수 있는 진척도를 실시간으로 보여주는 용도로 쓴다는 점에서 다르다.

			0%
		

| 지원되지 않을 때는...

IE9 미만의 버전에서는 HTML5의 새로운 요소들을 인식하지 못한다. 자바스크립트를 사용하여, 이 요소들을 문서의 일부로 정의하여 해결할 수 있다.

			
		

이 주석안의 스크립트는 오직 IE9 미만의 버전에서만 실행된다.

커스텀 데이터 속성을 사용한 팝업

커스텀 데이터 속성은 모두 data- 라는 접두어로 시작하며, 유효성 검사기는 이 문자열로 시작하는 속성은 전부 무시한다. 어떤 요소에든 이 속성을 쓸 수 있다. 무엇보다 좋은 것은, 커스텀 데이터 속성의 값을 자바스크립트로 쉽게 가져올수 있으며, 당장 거의 모든 브라우저에 적용할 수 있다.

다음은 링크를 팝업으로 여는 아주 흔한 방법이다.

			
				공휴일 급여정책
			
		

| 접근성 개선

위 코드는 몇가지 문제점이 있다. 첫째, 링크에 목적지가 없다. 자바스크립트가 꺼져 있다면, 링크는 아무 일도 하지 않는다. 어떤 상황이라도 링크의 href 속성을 생략하거나 # 같은 값을 넣어서는 절대 안된다. 아래와 같이 수정한다.

			
				공휴일 급여정책
			
		

| onclick을 없앤다.

동작을 내용에서 분리한다. 만약 이런 팝업 링크가 50개나 된다면 onclick을 계속해서 써야 하고 자바스크립트 이벤트 의 숫자는 계속 늘어나며 HTML은 필요이상으로 커지게 된다.

아래와 같이 각 링크를 설명할 수 있는 클래스를 주는 편이 좋다.

			
				공휴일 급여정책
			
		
			var links = $('a.popup');

			links.click(function(event){
				event.preventDefault();
				window.open($(this).attr('href'));
			});
		

preventDefault 메서드는 이벤트의 기본 동작을 막는 역할을 한다. 여기서는 브라우저가 링크를 따라가서 해당 페이지를 열지 못하게 한다.

| 커스텀 데이터 속성으로 자바스크립트에 데이터 전달하기

onclick을 사용할 수 없다면 팝업창의 크기를 전달할 방법이 없다. 이때 대안으로, 커스텀 데이터 속성을 이용하여 크기 정보를 요소의 속성으로 포함시킬 수 있다.

			
				공휴일 급여정책
			
		

이제 click 이벤트 핸들러를 수정해서, 커스텀 데이터 속성에 넣어둔 정보를 꺼내어 window.open() 메서드에 전달할 수 있다.

			$(function(){
				var links = $('a.popup');

				links.click(function(event){
					
					event.preventDefault();
					var href = $(this).attr('href'),
						width = $(this).attr('data-width'),
						height = $(this).attr('data-height'),
						scroll = $(this).attr('data-scroll'),
						popup = window.open(href, "popup", "width=" + width + ", height=" + height + ", scrollbars=" + scroll + "");
				});
			});
		

| 지원되지 않을 때는...

커스텀 데이터 속성은 구형 브라우저에서도 지금 당장 사용할 수 있다. 커스텀 데이터 속성은 브라우저에 어떠한 영향도 미치지 않으며, HTML5 DOC타입을 사용하고 있다면 data- 접두어로 시작하는 속성은 전부 무시하므로 유효성 문제도 없다.

사용자 중심의 웹폼


새로운 입력 필드와 데이터 설명

| 기본적인 폼

			
프로젝트 정보

ol요소는 복잡한 테이블이나 div 구조에 기대지 않고 필드를 나열하기 좋은 방법이다.

| range로 슬라이더 만들기

			
			
		

크롬과 오페라 모두 슬라이더 컨트롤을 지원한다.

| 숫자와 스핀박스

			
			
		

스핀박스에 값을 직접 입력할 수도 있고 입력 범위를 제한할 수도 있다. 또한, step 속성을 사용해서 값을 올리고 내리는 단위를 지정할 수도 있다. 기본값은 1이다. 오페라에서 스핀박스를 지원한다.

| 날짜

			
			
		

오페라만 지원한다.

| 이메일

			
			
		

| URL

			
			
		

| 색상

			
			
		

어떤 브라우저도 색상 컨트롤을 지원하지 않고 있다.

			
프로젝트 정보

autofocus : 자동 포커스 이동

페이지를 로드했을 때 맨 처음 필드에 포커스를 주어 데이터 입력을 빠르게 하도록 돕는다. 페이지 하나에는 autofocus 속성을 하나만 쓸 수 있다.

			
			
		

| 지원되지 않을 때는...

지원되지 않을 때는 다음의 자바스크립트 코드로 autofocus 속성을 지원하는지 확인 한 후 지원하지 않으면 focus() 함수를 호출하도록 한다.

			function hasAutofocus(){
				var element = document.createElement('input');
				return "autofocus" in element;
			}

			$(function(){
				if(!hasAutofocus()){
					$("input[autofocus=true]").focus();
				}
			});
		

placeholder : 입력 힌트 제공

placeholder 텍스트는 사용자에게 데이터를 어떤 식으로 넣으면 되는지 알려준다. 다음은 placeholder 텍스트를 이용한 예이다.

			
새 계정을 만듭니다

autocomplete 속성은 브라우저에게 해당 필드의 값을 자동으로 입력해도 되는지 자세하게 정해주는 역할을 한다.

| 지원되지 않을 때는...

자바스크립트를 이용해서 각 필드의 값을 검사한 후, 비어 있다면 placeholder 속성의 값을 넣으면 된다. 필드가 포커스를 받으면 placeholder 값을 지우고, 포커스를 잃으면 값을 다시 검사한다. 값이 바뀌면 사용자가 뭔가 입력한 것이니 그대로 둔다.

다음은 placeholder 속성을 가능하게 하는 jQuery 플러그인이다. 모든 필드를 순회하면서 placeholder 속성의 텍스트를 채워 넣는다.

			(function($){  
			  
			  $.fn.placeholder = function(){   
				
				function valueIsPlaceholder(input){
				  return ($(input).val() == $(input).attr("placeholder"));
				}
				return this.each(function() {  
			  
				  $(this).find(":input").each(function(){
				  
					if($(this).attr("type") == "password"){ 
					  
					  var new_field = $("<input type='text'>");
					  new_field.attr("rel", $(this).attr("id"));
					  new_field.attr("value", $(this).attr("placeholder"));
					  $(this).parent().append(new_field);
					  new_field.hide();
					  
					  function showPasswordPlaceHolder(input){
						if( $(input).val() == "" || valueIsPlaceholder(input) ){ 
						  $(input).hide();
						  $('input[rel=' + $(input).attr("id") + ']').show();
						};
					  };
					  
					  new_field.focus(function(){
						$(this).hide();
						$('input#' + $(this).attr("rel")).show().focus();
					  });

					  $(this).blur(function(){
						 showPasswordPlaceHolder(this, false);
					  });

					  showPasswordPlaceHolder(this); 
					
					}else{
					  
					  // 필드의 값을 플레이스홀더 텍스트로 바꾼다. 
					  // 옵션인 reload 매개변수로 파이어폭스와 IE가
					  // 필드 값을 캐시해서 생기는 문제를 해결한다.
					  function showPlaceholder(input, reload){
						if( $(input).val() == "" || 
						  ( reload && valueIsPlaceholder(input) ) ){ 
							$(input).val($(input).attr("placeholder"));
						  }
					  };
					  
					  $(this).focus(function(){
						if($(this).val() == $(this).attr("placeholder")){
						  $(this).val("");
						};
					  });

					  $(this).blur(function(){
						 showPlaceholder($(this), false)
					  });
					  
					  
					  showPlaceholder(this, true); 
					};
				  });
				  
				  // 폼이 플레이홀드 텍스트를 전송하지 않도록 막는다.
				  $(this).submit(function(){  
					$(this).find(":input").each(function(){
					  if($(this).val() == $(this).attr("placeholder")){
						$(this).val("");
					  }          
					});
				  });
				  
				});  
			  };
			  
			})(jQuery); 
		

다음은 placeholder 속성을 지원하는지 확인한 후 페이지에 삽입하고 폼과 연결한다.

			$(function(){
				function hasPlaceholderSupport(){
					var element = document.createElement('input');
					return "placeholder" in element;
				}
				if(!hasPlaceholderSupport()){
					$("#create_account").placeholder();
				}
			});
		

contenteditable을 이용한 즉석 편집

HTML5의 contenteditable 속성은 데이터 입력 부분을 자동으로 처리해준다. 단순히 이 속성을 추가하는 것만으로 요소가 편집 가능한 필드가 된다.

| 프로필 폼

			

User information

  • Name Hugh Mann
  • City Anytown
  • State OH
  • Postal Code 92110
  • Email boss@awesomecompany.com

CSS3 선택자를 이용해서 편집 가능한 필드를 찾고, 사용자가 마우스를 올리거나 선택했을 때 색을 변화시킨다.

			<style type="text/css" media="screen">
			/* START:css */
			  ul{list-style:none;}

			  li{clear:both;}

			  li>b, li>span{ 
				display: block;
				float: left;
				width: 100px;
			  }

			  li>span{
				width:500px;
				margin-left: 20px;
			  }

			  li>span[contenteditable=true]:hover{ 
				background-color: #ffc;
			  }

			  li>span[contenteditable=true]:focus{ 
				background-color: #ffa;
				border: 1px shaded #000;
			  }
			  /* END:css */
			</style>
		

contenteditable 속성이 true로 설정된 모든 span 요소에 이벤트 핸들러를 연결해서 데이터가 서버로 전송되게 한다.

		  $(function(){
			  var status = $("#status");
			  $("span[contenteditable=true]").blur(function(){
				var field = $(this).attr("id");
				var value = $(this).text();
				$.post("http://localhost:4567/users/1",
				   field + "=" + value,
				   function(data){
					 status.text(data);
				   }
				);
			  });
		  });
		

| 지원되지 않을 때는...

이 방법은 항상 동작하지 않으며 포커스를 받은 요소를 강조하기 위해 focus 가상 클래스를 썼는데, IE의 일부 버전은 지원하지 않는다.

사용자가 자바스크립트를 차단하거나 HTML5를 지원하지 않는 브라우저를 사용한다면 별도의 편집 페이지를 만들어 이동하게 끔 하는 편이 좋다.

			
Your Information

그리고 이 파일로 가는 링크를 만든다.

			

User information

//일반적인 편집페이지로 이동하도록 링크를 연결한다.
  • Name Hugh Mann
  • City Anytown
  • State OH
  • Postal Code 92110
  • Email boss@awesomecompany.com

contenteditable 속성과 자바스크립트를 지원할 때만 링크를 숨기고 Ajax 지원을 활성화하도록 다음과 같이 스크립트를 수정한다.

		  $(function(){
			// 감지 기능을 추가한 스크립트
			if(document.getElementById("edit_profile_link").contentEditable != null){
			  //브라우저가 contenteditable 속성을 지원한다면 링크를 숨김
			  $("#edit_profile_link").hide();
			  var status = $("#status");
			  $("span[contenteditable=true]").blur(function(){
				var field = $(this).attr("id");
				var value = $(this).text();
				$.post("http://localhost:4567/users/1",
				   field + "=" + value,
				   function(data){
					 status.text(data);
				   }
				);
			  });
			}
		  });
		

이제 사용자들은 지원되는 브라우저에서는 '즉석' 편집을, 지원되지 않는 브라우저에서는 표준 POST 인터페이스를 통해 자신의 정보를 수정할 수 있다.