/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/


html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

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

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

CSS 글꼴 예제  (0) 2015.01.15
HTML5 form, input, fieldset, legend 예제  (0) 2015.01.14
HTML5 블로그 만들기 예제  (0) 2015.01.14

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>3일차</title>

<style>

body{background-color:grey;}

*{color:blue;}

p{text-shadow: 2px 2px 2px; color: green}

.h1class{color: yellow;}

#h1id{color: green;}

h2{color: red;}

ul li{list-style-type: square; color: violet}

.lired{color:red;}

h1{

background:-webkit-linear-gradient(bottom, blue, white);

}

span{background-color:yellow;}

</style>

</head>


<body>

<p>test p tag</p>

<h1>test h1 tag</h1>

<span>span</span>

<span>예제</span>

<ul>

<li class="lired">1인</li>

<li>2인</li>

<li>3인</li>

</ul>

<h1 class="h1class">test h1calss tag</h1>

<h1 id="h1id">test h1id tag</h1>

<h2>other test h2 tag</h2>

</body>

</html>

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

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

CSS 초기화 reset.css  (0) 2015.01.16
HTML5 form, input, fieldset, legend 예제  (0) 2015.01.14
HTML5 블로그 만들기 예제  (0) 2015.01.14

<!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

+ Recent posts

티스토리툴바