<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

$(document).ready(function () {

$('.outer-menu-item').hover(function () {

$(this).find('.inner-menu').show();

}, function () {

$(this).find('.inner-menu').hide();

});

});

</script>

저작자표시 비영리 변경금지

'Computer > JSP Servlet JavaScript' 카테고리의 다른 글

Tomcat 404에러(포트충돌)  (0) 2015.01.16
JavaScript 예제  (0) 2015.01.15
JSP SQL Injection 방어 기법  (0) 2014.08.21
JSP 버튼이벤트  (0) 2014.08.19
JQUERY 화면전환 없이 비동기 업로드  (0) 2014.08.18

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>


<body>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<mark> 내용</mark>

<p>My mother has 

<span style="color:blue;font-weight:bold">blue</span>

eyes and my father has

<span style="color:darkolivegreen;font-weight:bold">dark green</span>

eyes.</p>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

<a href="http://www.w3schools.com" target=“_blank”>Visit W3Schools.com!</a>

<br>

<form>

<fieldset>

<legend>로그인정보</legend>

<ul>

<li>아이디: <input type="text" id="user_id"></li>

<li>비밀번호: <input type="password" id="pw"></li>

</ul>

</fieldset>

<fieldset>

<legend> 가입자정보</legend>

<ul>

<li>이름: <input type="text" id="user_name"></li>

<li>메일주소: <input type="text" id="user_mail"></li>

<li>생년월일: <input type="text" id="birth"></li>

</ul>

</fieldset>

<fieldset>

<input type="submit" value="가입하기"></input>

</fieldset>

</form>

<br>

<form action="demo_form.asp">

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

<label for="female">Female</label>

<input type="radio" name="sex" id="female" value="female"><br><br>

<input type="submit" value="Submit">

</form>

<br>

<label>주문개수: <input type="number" min="1" max="5" value="1"> 박스(1인당최대5박스)</label><br>

<label>익은정도(3단계) : <input type="range" min ="1" max="3" value="3"></label>

<br>

<label>원하는색상: <input type="color" value=""></label>

<br>

<input type=“month”>

<li>

<label for="pf">사진</label>

<input type="file" name="pf" id="pf">

</li>

</body>

</html>

저작자표시 비영리 변경금지

'Computer > HTML5 CSS3' 카테고리의 다른 글

CSS 초기화 reset.css  (0) 2015.01.16
CSS 글꼴 예제  (0) 2015.01.15
HTML5 블로그 만들기 예제  (0) 2015.01.14

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>MY BLOG</title>

<style>

*{

margin: 0; padding: 0;

font-family: '맑은 고딕', 'Malgun Gothic', Gothic, sans-serif;

}

a {text-decoration: none;}

li {list-style: none;}

body {

width: 960px; margin: 0 auto;

background: #E6E6E6;

}

#page-wrapper{

background: white;

margin: 40px 0; padding: 10px 20px;

border-radius: 5px;

box-shadow: 0 4px 10px rgba(100, 100, 100, 0.3);

}

#main-header{padding: 40px 50px;}

.master-title{

font-size: 23px;

color: #181818;

}

.master-description{

font-size: 15px; font-weight: 500;

color: #383838;

}

#main-navigation{

border-top: 1px solid #C8C8C8;

border-bottom: 1px solid #C8C8C8;

margin-bottom: 20px;

height: 40px;

}

.pull-left{float: left;}

.outer-menu-item{

float: left;

position: relative;

}

.menu-title{

display: block;

height: 30px; line-height: 30px;

text-align: center;

padding: 5px 20px;

}

.outer-menu-item:hover{

background:black;

color: white;

}

.pull-right{float:right;}

.search-bar{

height: 26px;

padding: 7px;

}

.input-search{

display: block;

float: left;

background-color: #FFFFFF;

border: 1px solid #CCCCCC;

border-radius: 15px 0 0 15px;

box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);

width: 120px; height: 24px;

padding: 0 0 0 10px;

font-size: 12px;

color: #555555;

}

.input-search-submit{

display: block;

float: left;

width: 50px; height: 26px;

border-radius: 0 15px 15px 0;

border: 1px solid #CCCCCC;

margin-left: -1px;

vertical-align: top;

display: inline-block;

}

.input-search:focus{

border-color: rgba(82,168,236, 0.8);

outline: 0;

box-shadow: inset 0 1px 1px rgba(0,0,0, 0.05);

}

.inner-menu{

display: none;

position: absolute;

top: 40px; left: 0;

width: 100%;

background: white;

box-shadow: 0 2px 6px rgba(5,5,5, 0.9);

z-index: 1000;

text-align: center;

}

.inner-menu-item > a {

display: block;

padding: 5px 10px;

color: black;

}

.inner-menu-item > a:hover{

background: black;

color: white;

}


#content{

overflow: hidden;

padding: 0 50px;

}

#main-section{

float: left;

width: 510px;

}

#main-aside{

float: right;

width: 200px;

}

article{

padding: 0 10px 20px 10px;

border-bottom: 1px solid #C8C8C8;

}

.article-header{padding: 20px 0;}

.article-title{

font-size: 25px;

font-weight: 500;

padding-bottom: 10px;

}

.article-date{font-size: 13px;}

.article-body{font-size: 14px;}

.aside-list{padding: 10px 0 30px 0;}

.aside-list > h3{

font-size: 15px;

font-weight: 600;

}

.aside-list li a{

margin-left: 8px;

font-size: 13px;

color: #6C6C6C;

}

#main-footer{

padding: 10px 50px;

}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

$(document).ready(function () {

$('.outer-menu-item').hover(function () {

$(this).find('.inner-menu').show();

}, function () {

$(this).find('.inner-menu').hide();

});

});

</script>

</head>

<body>

<div id="page-wrapper">

<header id="main-header">

<hgroup>

<h1 class="master-title">김민철 BLOG</h1>

<h2 class="master-description">SW A&D</h2>

</hgroup>

<nav id="main-navigation">

<div class="pull-left">

<ul class="outer-menu">

<li class="outer-menu-item">

<span class="menu-title">Introduce</span>

<ul class="inner-menu">

<li class="inner-menu-item"><a href="#">데이터</a></li>

<li class="inner-menu-item"><a href="#">데이터</a></li>

</ul>

</li>

<li class="outer-menu-item">

<span class="menu-title">Interest</span>

</li>

<li class="outer-menu-item">

<span class="menu-title">Best</span>

</li>

</ul>

</div>

<div class="pull-right">

<div class="search-bar">

<form>

<input type="text" class="input-search" />

<input type="submit" class="input-search-submit" value="Search" />

</form>

</div>

</div>

</nav>

</header>

<div id="content">

<section id="main-section">

<article>

<div class="article-header">

<h1 class="article-title">HTML5 개요와활용</h1>

<p class="article-date">2015년01월13일</p>

</div>

<div class="article-body">

<img src="http://placehold.it/430x280" />

<br />

<p>Lorem </p>

<br />

<p>Praesent</p>

</div>

</article>

</section>

<aside id = "main-aside">

<div class="aside-list">

<h3>카테고리</h3>

<ul>

<li><a href="#">데이터</a></li>

<li><a href="#">데이터</a></li>

<li><a href="#">데이터</a></li>

</ul>

</div>

<div class="aside-list">

<h3>최신글</h3>

<ul>

<li><a href="#">데이터</a></li>

<li><a href="#">데이터</a></li>

<li><a href="#">데이터</a></li>

</ul>

</div>

</aside>

</div>

<footer id="main-footer">

<a href="#">Created By MinC</a>

</footer>

</div>

</body>

</html>


저작자표시 비영리 변경금지

'Computer > HTML5 CSS3' 카테고리의 다른 글

CSS 초기화 reset.css  (0) 2015.01.16
CSS 글꼴 예제  (0) 2015.01.15
HTML5 form, input, fieldset, legend 예제  (0) 2015.01.14




































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

20150121 폭스  (0) 2015.01.26
20150117 칸즈  (0) 2015.01.20
141223 페라리  (0) 2014.12.23
141222 페라리_3  (0) 2014.12.23
141222 페라리_2  (0) 2014.12.23




















































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

20150117 칸즈  (0) 2015.01.20
141224 카오+페라리  (0) 2014.12.25
141222 페라리_3  (0) 2014.12.23
141222 페라리_2  (0) 2014.12.23
141222 페라리_1  (0) 2014.12.23
















































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

141224 카오+페라리  (0) 2014.12.25
141223 페라리  (0) 2014.12.23
141222 페라리_2  (0) 2014.12.23
141222 페라리_1  (0) 2014.12.23
141221 카오_2  (0) 2014.12.22




















































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

141223 페라리  (0) 2014.12.23
141222 페라리_3  (0) 2014.12.23
141222 페라리_1  (0) 2014.12.23
141221 카오_2  (0) 2014.12.22
141221 카오_1  (0) 2014.12.22




















































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

141222 페라리_3  (0) 2014.12.23
141222 페라리_2  (0) 2014.12.23
141221 카오_2  (0) 2014.12.22
141221 카오_1  (0) 2014.12.22
141220 카오_2  (0) 2014.12.21

















저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

141222 페라리_2  (0) 2014.12.23
141222 페라리_1  (0) 2014.12.23
141221 카오_1  (0) 2014.12.22
141220 카오_2  (0) 2014.12.21
141220 카오_1  (0) 2014.12.21




















































저작자표시 비영리 변경금지

'Game > Lineage' 카테고리의 다른 글

141222 페라리_1  (0) 2014.12.23
141221 카오_2  (0) 2014.12.22
141220 카오_2  (0) 2014.12.21
141220 카오_1  (0) 2014.12.21
141219 카오  (0) 2014.12.21

+ Recent posts

티스토리툴바