riix

html
img/common
img/custom
img/popup
css
js
libs

riix

$('#area').load('ajax_child.html?rand='+Math.random()+' div.popup', function(){
	 
	// local usage
	$('button').on('click',function(e){
		e.preventDefault();
		alert('클릭');
	});
	 
	// 또는 해당 영역에 Script Element 생성
	var s = document.createElement("script");

riix

div.preloader { position: absolute; z-index: 1100; top: 50%; left: 50%; }
div.preloader span { display: block; width: 100px; border: solid 1px #ccc; text-align: center; }
div.preloaderbg { position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #000; }

riix

// preloader('make');
// preloader('remove');

function preloader(todo){

	var $layer = $('<div>',{
		class: 'preloader'
	}).append('<span>로딩중 입니다.</span>');

	var $layerbg = $('<div>',{ class: 'preloaderbg' });

riix

<form action="#" method="post" class="form">
	<fieldset>
		<legend class="semantic">회원 가입 폼</legend>
		<ul>
			<li>
				<p class="q"><label for="userId">ID <em>*</em></label></p>
				<p class="a">
					<span class="desc">ID must have to <em>3-20</em> alphabetic or numeric characters and the first letter should be alphabetic character.</span>
					<input name="" type="text" id="userId" />
					<button type="button">중복확인</button>

riix

<div class="collapse-a js-collapse">
	<div class="group">
		<div class="header">
			<a href="#contents1"><span class="subject">제목 1</span></a>
		</div>
		<div id="contents1" class="contents">
			내용 1
		</div>
	</div>
	<div class="group">

riix

<ul class="tab-a js-tab">
	<li class="active"><!-- 활성탭 -->
		<a href="#" class="tab"><span>탭1</span></a>
		<div class="content">
			내용
		</div>
	</li>
	<li>
		<a href="#" class="tab"><span>탭2</span></a>
		<div class="content">

riix

<div class="section-news">
	<ul class="bbs-preview">
		<li>
			<a href="#" class="subject">제목1</a>
			<span class="date">2012-11-11</span>
		</li>
		<li>
			<a href="#" class="subject">제목2</a>
			<span class="date">2012-11-11</span>
		</li>

riix

<ul class="list-a">
	<li>목록 내용 1</li>
	<li>목록 내용 2</li>
	<li>목록 내용 3</li>
</ul>
 
<ol class="list-b">
	<li>목록 내용 1</li>
	<li>목록 내용 2</li>
	<li>목록 내용 3</li>

riix

<table class="table-a" summary="자유게시판 테이블">
<caption>번호, 유형, 제목을 포함한 자유게시판 테이블입니다.</caption>
<thead>
	<tr>
		<th scope="col" class="number"><span>번호</span></th>
		<th scope="col" class="type"><span>유형</span></th>
		<th scope="col" class="subject"><span><a href="#">제목</a></span></th>
	</tr>
</thead>
<tbody>