vue.js를 시작해본다.

요즘 각종 js가 많이 나온다. 물론 대세는 react virtual dom이겠지만, vue.js도 인기가 있는 것 같다.


유트브 동영상 보고 따라해본다.


jsfiddle로 만들어본다.


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>


<div id="app">

  <p>{{ title }}</p>

</div>


new Vue({

el: '#app',

data: {

title: 'Hello World'

}

})


결과 Hello World


event와 method

<div id="app">

  <button v-on:click="changeTitle">

    Change Title

  </button>

  <p>{{ title }}</p>

</div>


new Vue({

el: '#app',

data: {

title: 'Hello World'

},

methods: {

changeTitle() {

  this.title = 'New title';

  }

}

})


javascript공부해보신 분은 잘 아실 겁니다. vue.js에서 쓰이는 자바스크립트는 es6라고 하네요

'html5' 카테고리의 다른 글

html form 샘플  (0) 2016.11.10
popup  (0) 2016.11.09
완성!  (0) 2014.09.16
프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16

전체...

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

<fieldset>

<legend>개인정보:</legend>

<label for="first_name">이름:</label><input type="text"  name="first_name" id="first_name"><br/>

<label for="last_name">성:</label><input type="text"  name="last_name" id="last_name"><br/>

</fieldset>

<br/>

<fieldset>

<legend>취미:</legend>

<label for="sport">스포츠</label><input type="checkbox" value="sport" name="hobby" id="sport"/>

<label for="gaming">게임</label><input type="checkbox" value="gaming" name="hobby" id="gaming"/>

<label for="art">영화/음악감상</label><input type="checkbox" value="art" name="hobby" id="art"/>

<label for="acting">연극</label><input type="checkbox" value="acting" name="hobby" id="acting"/>

</fieldset>

<br/>

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

</form>

</body>

</html>


1.text and password fields

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

username: <input type="text" name="username" maxlength="10" size="10" />

password: <input type="password" name="password" maxlength="10" size="10" />

</form>

</body>

</html>


2.select lists

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

음식 선택:

<select name="food" multiple size="3">

<optgroup label="버거">

<option value="big_mac">Big Mac</option>

<option value="shrimp_burger">새우버거</option>

<option value="cheeze_burger" selected="selected">치즈버거</option>

</optgroup>

<optgroup label="음료">

<option value="americano">아메리카노</option>

<option value="coke">콜라</option>

</optgroup>

</select>

</form>

</body>

</html>

///

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

여가시간에 하시는 일? <br/>

스포츠활동<input type="checkbox" name="spare_time[]" value="sport" />

컴퓨터 게임<input type="checkbox" name="spare_time[]" value="games" />

쇼핑<input type="checkbox" name="spare_time[]" value="shopping" />

</form>

</body>

</html>


////

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

하실 말씀 있으신가요?<br/>

<textarea name="story" rows="15" cols="60"></textarea>

</form>

</body>

</html>


///////

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

name:<input type="text" name="name"/><br/>

password:<input type="password" name="password"/><br/>

Checkboxes:<br/>

1<input type="checkbox" value="1" name="checker"/>

2<input type="checkbox" value="2" name="checker"/>

3<input type="checkbox" value="3" name="checker"/>

<input type="button" value="버튼"/><br/>

<input type="file"/> <br/>

<input type="submit" value="송신"/>

<input type="reset" value="reset"/>

</form>

</body>

</html>

///////////////////////////////////////


기본 정보

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

개인정보:<br/>

이름:<input type="text"  name="first_name"><br/>

성:<input type="text"  name="last_name"><br/>

<br/>

취미:<br/>

스포츠<input type="checkbox" value="sport"/>

게임<input type="checkbox" value="gaming"/>

영화/음악감상<input type="checkbox" value="art"/>

연극<input type="checkbox" value="acting"/>

<br/>

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

</form>

</body>

</html>

/////////////////////////

fieldset 적용

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

<fieldset>

<legend>개인정보:</legend>

이름:<input type="text"  name="first_name"><br/>

성:<input type="text"  name="last_name"><br/>

</fieldset>

<br/>

<fieldset>

<legend>취미:</legend>

스포츠<input type="checkbox" value="sport"/>

게임<input type="checkbox" value="gaming"/>

영화/음악감상<input type="checkbox" value="art"/>

연극<input type="checkbox" value="acting"/>

</fieldset>

<br/>

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

</form>

</body>

</html>

///////////////////////////////////////////////////////////////////////////////////

레이블 적용

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>form</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<form action="" method="post">

<fieldset>

<legend>개인정보:</legend>

<label for="first_name">이름:</label><input type="text"  name="first_name" id="first_name"><br/>

<label for="last_name">성:</label><input type="text"  name="last_name" id="last_name"><br/>

</fieldset>

<br/>

<fieldset>

<legend>취미:</legend>

<label for="sport">스포츠</label><input type="checkbox" value="sport" name="hobby" id="sport"/>

<label for="gaming">게임</label><input type="checkbox" value="gaming" name="hobby" id="gaming"/>

<label for="art">영화/음악감상</label><input type="checkbox" value="art" name="hobby" id="art"/>

<label for="acting">연극</label><input type="checkbox" value="acting" name="hobby" id="acting"/>

</fieldset>

<br/>

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

</form>

</body>

</html>


'html5' 카테고리의 다른 글

vue.js 시작  (0) 2018.10.21
popup  (0) 2016.11.09
완성!  (0) 2014.09.16
프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

<title>팝업</title>

<link rel="stylesheet" href="style.css">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script src="popup.js"></script>

</head>

<body>

<p>

<a href="#popup1" class="popup_btn">버튼</a>

</p>

<div id="popup1" class="popup">

<div class="popup_inner">

<h4>제목</h4>

<p>내용내용내용</p>

<p>내용내용내용</p>

<p>내용내용내용</p>

<p>내용내용내용</p>

<div>

<a href="#close_btn" class="close_btn">닫기</a>

</div>

</div>

</div>

<div id="overlay"></div>


</body>

</html>


/* common setting */

.popup {

display: none;

position;

top: 50%;

left: 50%;

background-color: #fff;

overflow: hidden;

z-index: 101;

}


.popup_inner {

padding: 20px;

}


#overlay {

display: none;

position;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #000;

opacity: 0.7;

z-index: 100;

}


/* individual setting */

#popup1 {

width: 600px;

}


$(function() {

$(document)

.on('click', '.popup_btn', function() {

var popup = $(this).attr('href');

var mT = ($(popup).outerHeight() / 2) * (-1) + 'px';

var mL = ($(popup).outerWidth() / 2) * (-1) + 'px';

$('.popup').hide();

$(popup).css({

'margin-top': mT,

'margin-left': mL

}).show();

$('#overlay').show();

return false;

})

.on('click', '.close_btn, #overlay', function() {

$('.popup, #overlay').hide();

return false;

});

});


'html5' 카테고리의 다른 글

vue.js 시작  (0) 2018.10.21
html form 샘플  (0) 2016.11.10
완성!  (0) 2014.09.16
프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16

function doFirst() {
    barSize = 600;
    myMovie = document.getElementById("myMovie");
    playButton = document.getElementById("playButton");
    bar = document.getElementById("defaultBar");
    progressBar = document.getElementById("progressBar");
   
    playButton.addEventListener("click", playOrPause, false);
    bar.addEventListener("click", clickedBar, false);
}

function playOrPause(){
    if (!myMovie.paused && !myMovie.ended) {
        myMovie.pause();
        playButton.innerHTML= "Play";
        window.clearInterval(updateBar);
    } else {
        myMovie.play();
        playButton.innerHTML = "Pause";
        updateBar = setInterval(update, 500);
    }
}

function update() {
    if (!myMovie.ended) {
        var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width = size+"px";
    } else {
        progressBar.style.width = "0px";
        playButton.innerHTML= "Play";
        window.clearInterval(updateBar);
    }
}

function clickedBar(e) {
    if (!myMovie.paused && !myMovie.ended) {
        var mouseX = e.pageX - bar.offsetLeft;
        var newtime = mouseX*myMovie.duration/barSize;
        myMovie.currentTime = newtime;
        progressBar.style.width = mouseX+"px";
    }
}

window.addEventListener("load", doFirst, false);











'html5' 카테고리의 다른 글

html form 샘플  (0) 2016.11.10
popup  (0) 2016.11.09
프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16
video player skin  (0) 2014.09.16

function doFirst() {
    barSize = 600;
    myMovie = document.getElementById("myMovie");
    playButton = document.getElementById("playButton");
    bar = document.getElementById("defaultBar");
    progressBar = document.getElementById("progressBar");
   
    playButton.addEventListener("click", playOrPause, false);
}

function playOrPause(){
    if (!myMovie.paused && !myMovie.ended) {
        myMovie.pause();
        playButton.innerHTML= "Play";
        window.clearInterval(updateBar);
    } else {
        myMovie.play();
        playButton.innerHTML = "Pause";
        updateBar = setInterval(update, 500);
    }
}

function update() {
    if (!myMovie.ended) {
        var size = parseInt(myMovie.currentTime*barSize/myMovie.duration);
        progressBar.style.width = size+"px";
    } else {
        progressBar.style.width = "0px";
        playButton.innerHTML= "Play";
    }
}

window.addEventListener("load", doFirst, false);











'html5' 카테고리의 다른 글

popup  (0) 2016.11.09
완성!  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16
video player skin  (0) 2014.09.16
html5 herald register  (0) 2014.09.15

function doFirst() {
    barSize = 600;
    myMovie = document.getElementById("myMovie");
    playButton = document.getElementById("playButton");
    bar = document.getElementById("defaultBar");
    progressBar = document.getElementById("progressBar");
   
    playButton.addEventListener("click", playOrPause, false);
}

function playOrPause(){
    if (!myMovie.paused && !myMovie.ended) {
        myMovie.pause();
        playButton.innerHTML= "Play";
        //window.clearInterval(updateBar);
    } else {
        myMovie.play();
        playButton.innerHTML = "Pause";
        //updateBar = setInterval(update, 500);
    }
}

window.addEventListener("load", doFirst, false);

'html5' 카테고리의 다른 글

완성!  (0) 2014.09.16
프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player skin  (0) 2014.09.16
html5 herald register  (0) 2014.09.15
html/css #1  (0) 2014.04.09

youtube newboston html5


<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="main.css">

<script src="bucky.js"></script>

</head>

<body>

<section id="skin">

<video id="myMovie" width="640" height="360">

<source src="videos/hanshin.mp4">

</video>

<nav>

<div id="buttons">

<button type="button" id="playButton">Play</button>

</div>

<div id="defaultBar">

<div id="progressBar"></div>

</div>

<div style="clear:both"></div>

</nav>

</section>

</body>

</html>


body {

text-align:center;

}

header,section,footer,aside,nav,article,hgroup {

display:block;

}

#skin {

width: 700px;

margin: 10px auto;

padding: 5px;

background: red;

border: 4px solid red;

border-radius: 10px;

}


nav {

margin: 5px 0px;

}


#buttons {

float: left;

width: 70px;

height: 22px;

}


#defaultBar {

position: relative;

float: left;

width: 600px;

height: 16px;

padding: 4px;

border: 2px solid black;

background: yellow;

}


#progressBar {

position: absolute;

width: 250px;

height: 16px;

background: blue;

}


'html5' 카테고리의 다른 글

프로그래스바 실시간으로 변경하기...  (0) 2014.09.16
video player play 기능 추가  (0) 2014.09.16
html5 herald register  (0) 2014.09.15
html/css #1  (0) 2014.04.09
video 재생(control을 자바스크립트 버튼 작성)  (0) 2013.02.27

<!doctype html>

<html lang="en" manifest="cache.manifest">

<head>

  <meta charset="utf-8">

  <title>HTML5 헤럴드</title>

  <link rel="stylesheet" href="css/styles.css?v=1.0"/>

  <script src="js/modernizr-1.7.min.js"></script>


</head>

<body>

<header>

  <hgroup>

    <h1><a href="index.html">HTML5 <img src="images/logo.png" alt=""> 헤럴드</a></h1>

    <h2>HTML5 & CSS3를 이용해 옛 신문 스타일을 재현하다</h2>

  </hgroup>

  <nav>

    <ul>

      <li><a href="index.html">홈</a></li>

      <li><a href="register.html">등록</a></li>

    </ul>

  </nav>

  <p id="volume">Vol. MMXI</p>

  <p id="issue"><time datetime="1904-06-04" pubdate>June 4, 1904</time></p>

</header>


  <form id="register" method="post">

  <hgroup>

    <h1>등록해 주세요!</h1>

    <h2>이 멋진 신문을 구독하고 싶습니다.</h2>

  </hgroup>



  <ul>

    <li>

      <label for="name">제 이름은요:</label>

      <input type="text" id="name" name="name" required>

    </li>

    <li>

      <label for="email">제 이메일 주소는요:</label>

      <input type="email" id="email" name="email" required>

    </li>

    <li>          <label for="rememberme">이 컴퓨터에서 제 정보를 기억하도록 합니다</label>

          <input type="checkbox"  value="yes"  id="rememberme"> 

</li>

    <li>

      <label for="url">제 웹사이트 주소는요:</label>

      <input type="url" id="url" name="url" placeholder="http://example.com">

    </li>

    <li> 

      <label for="password">비밀번호는 이것이 좋겠어요:</label>

      <p>(최소 6자, 공백없이)</p>

      <input type="password" id="password" name="password" required pattern="\S{6,}">

    </li>

    <li>

      <label for="rating">제 HTML5에 대한 지식 수준은요, 1부터 10중에서:</label>

      <input min="1" max="10" id="rating" name="rating" type="range">

    </li>

    <li>

      <label for="startdate">이 날짜부터 구독하고 싶어요:</label>

      <input type="date" id="startdate" name="startdate" min="1904-03-17" max="1904-05-17" required>

    </li>

    <li>

      <label for="quantity"><cite>HTML5 헤럴드</cite>를 <input type="number" name="quantity" id="quantity" min="1" max="10" value="1">부 받고 싶습니다.</label>

    </li>

    <li>

      <label for="upsell"><cite>CSS3 이야기</cite>에도 함께 등록하겠습니다.</label>

      <input id="upsell" name="upsell" type="checkbox">

    </li>


  </ul>

  <input type="submit" id="register-submit" value="입력 정보 보내기"/>

</form>

    <footer>

    <small>© SitePoint </small>

    <p><a href="http://www.sitepoint.com"><img src="images/logo-sp.gif" alt="SitePoint" width="74" height="20"></a></p>

</footer>

<script>

if (!Modernizr.input.placeholder) {

$("input[placeholder], textarea[placeholder]").each(function(){

if ($(this).val() == "") {

$(this).val($(this).attr("placeholder"));

$(this).focus(function(){

if ($(this).val() == $(this).attr("placeholder")) {

$(this).val("");

$(this).removeClass('placeholder');

}

});

$(this).blur(function(){

if ($(this).val() == "") {

$(this).val($(this).attr("placeholder"));

$(this).addClass('placeholder');

}

});

}

});

$('form').submit(function(){

// first do all the checking for required element and form validation. 

// only remove placeholders before final submission

var placeheld = $(this).find('[placeholder]');

for (var i = 0; i < placeheld.length; i++) {

if (($(placeheld[i]).val() == $(placeheld[i]).attr('placeholder'))) {

// if not required, set value to empty before submitting

$(placeheld[i]).attr('value', '');

}

}

});

}

</script>

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

  <script type="text/javascript" src="js/rememberMe.js"></script>


</body>

</html>



css


body { font:13px serif; *font-size:10pt; *font:x-small; line-height:1.22; }
html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, 
hgroup, menu, nav, section,
time, mark, audio, video, a {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent none no-repeat 0 0;
  color: #484848;
  font-weight: normal;
}

article, aside, figure, footer, header, hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
ins { background-color:#ff9; color:#000; text-decoration:none; }

del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0;  font-size:inherit; font:100%;}
input, select { vertical-align:middle;  font:99% sans-serif; color: #282828;}
pre, code, kbd, samp { font-family: monospace, sans-serif; }/ 
h1,h2,h3,h4,h5,h6 { font-weight: bold; text-rendering: optimizeLegibility; }
html { -webkit-font-smoothing: antialiased; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a: active { outline: none; }
a:focus { outline: 1px dotted #f3f3f3; }
ul { margin-left:30px; }
ol { margin-left:30px; list-style-type: decimal; }

small { font-size:85%; }
strong{ font-weight: bold; }
sub { vertical-align: sub; font-size:10pter; }
sup { vertical-align: super; font-size:10pter; }

input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
::-moz-selection{ background: #484848; color:#fff; text-shadow: none; }
::selection { background:#484848; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #ccc; } 
html { overflow-y: scroll; }
button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

/* RESET STYLES END HERE */

/* @font-face code Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'LeagueGothic';
    src: url('../fonts/League_Gothic-webfont.eot');
    src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),
         url('../fonts/League_Gothic-webfont.woff') format('woff'),
         url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AcknowledgementMedium';
    src: url('../fonts/Acknowledgement-webfont.eot');
    src: url('../fonts/Acknowledgement-webfont.eot?#iefix') format('eot'),
         url('../fonts/Acknowledgement-webfont.woff') format('woff'),
         url('../fonts/Acknowledgement-webfont.ttf') format('truetype'),
         url('../fonts/Acknowledgement-webfont.svg#webfontuCYqM11k') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
  background: transparent url(../images/bg-main.gif) repeat 0 0;
  height: 100%;
}

body {
  width: 758px;
  margin: 6px auto 0 auto;
  border-top: solid 1px #8e8e8e;
  background: transparent url(../images/bg-texture.png) no-repeat top center;
  height: 100%;
  color: #666666;
  font-size: 13px;
  position: relative;
  font-family: Times, "Times New Roman", serif;
}


h1 {
  text-shadow: #fff 1px 1px;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  line-height: 1;
}

h2 {
  background-position: top center;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  padding: 7px 0 0 0;
}
article h2 {
  background-image: url(../images/bg-header.gif);
}
body > header h2 { 
  text-transform: lowercase;
  background-image: none;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: none;
  font-weight: normal;
  line-height: 2;
}
p {
  margin: 0 0 13px 0;
  text-align: justify;
  line-height: 1em;
}


/* HEADER */
body > header {
  border-top:  solid 1px #8e8e8e;
  border-bottom: solid 1px #8e8e8e;
  margin: 1px auto;
  padding-top: 8px;
  overflow: hidden;
  position: relative;
}

header a {
  text-decoration: none;
  color: #484848;
}
header a img {
  position: relative;
  top: 8px;
}

header hgroup {
  text-align: center;
  margin-left: 30px;
}

header h1 {
  font-family: "Times New Roman", Times, serif;
  font-size: 60px;
  position: relative;
}

header h1 span {
  position: absolute;
  left: 40px;
  top: 40%;
  font-size: 30%;
}

header p {
  position: absolute;
  bottom: 0;
  line-height: 25px;
  font-size: 12px;
  margin: 0;
}

#issue {
  right: 0;
  text-align: right;
}

nav {
  border-top: double 3px #8e8e8e;
  height: 28px;
}

nav ul {
  margin: 1px auto;
  height: 28px;
  white-space: nowrap;
  text-align: center;
  width: 10.2em;
  
}

nav ul li {
  width: 5em;
  float: left;
}

nav ul li a{ 
  color: #484848;
  text-transform: uppercase;
  font-size: 13px;
  display: block;
  line-height: 27px;
  text-decoration: none;
}

nav ul li a:hover, nav ul li a:active {
  text-decoration: underline;
}

#main {
  margin: 1px 0 0 0;
  border-top: solid 1px #8e8e8e;
  padding: 15px 0;
  clear: both;
}
#main > div {
  float: left;
}
#main > div:first-of-type, /* both selectors target the same element */
#primary   {
  width: 375px;
  padding-right: 4px;
}

#main > div:nth-of-type(2), /* both selectors target the same element */
#secondary {
  width: 130px;
}

#secondary {
  width: 130px;
}

#main > div:last-of-type, /* both selectors target the same element */
#tertiary,
aside {
  width: 244px;
  margin-right:0;
  padding-left: 4px;
}
/* The first article */

#primary article .content {
  -webkit-columns: 3 9em;
  -webkit-column-gap: 10px;
  -moz-column-count: 3;
  -moz-column-width: 9em;
  -moz-column-gap: 10px;
  column-count: 3;
  column-width: 9em;
  column-gap: 10px; 

}

#primary article .content h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
}

#video {
  display: block;
  margin-bottom: 12px;
}

#video, 
#primary article h1 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  clear:both;
}


#canvasOverlay
{
position:absolute;
top:0px;
left:0px;
/* to avoid seeing the video in color for a second before the JavaScript runs 
* show a black background instead*/
background-color: black;
margin-bottom:25px;
}

#secondary article{
  padding: 0 4px 0 4px;
  float: left;
  border-right: solid 1px #979797;
  border-left: solid 1px #979797;
}


img[alt~=cat] {
  margin: 0 auto 15px;
  display: block;
}

#main > div hgroup {
  padding: 0 0 10px 0;
  margin: 0 0 5px 0;
  background: transparent url(../images/bg-subhead.gif) no-repeat bottom center;
}

#main h1 {
  font-size: 22px;
  margin: 0 0 8px 0;
}

#main > div h2 {
  font-size: 14px;
  text-transform: none;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
  text-shadow: none;
  text-align: center;
}


#main > div:first-of-type h1 {
  font-size: 33px;
  padding: 0 0 4px 0;
  letter-spacing: -1px;
  text-align: left;
}

#tertiary article .content {
  -webkit-column-count: 2;
  -webkit-column-width: 117px;
  -webkit-column-gap: 10px;
  -moz-column-count: 2;
  -moz-column-width: 117px;
  -moz-column-gap: 10px;
  column-count: 2;
  column-width: 117px;
  column-gap: 10px;
}


/* advertisements */
aside {
  float: left;
  width: 246px;
}

aside article {
  width: 236px;
  border: 1px solid #cccccc;
  margin-bottom: 5px;
}


#ad2 {
  height: 170px;
  background-image:
    url(../images/bg-bike.png), 
    url(../images/gradient.svg);
  /* Mozilla gradient syntax */
  background-image:
    url(../images/bg-bike.png),
    -moz-linear-gradient(0% 0% 270deg,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* W3C gradient syntax for WebKit */
  background-image:
    url(../images/bg-bike.png),
    -webkit-linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* W3C gradient syntax for Opera */
  background-image:
    url(../images/bg-bike.png),
    -o-linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* Unprefixed W3C syntax */ 
  background-image:
    url(../images/bg-bike.png),
    linear-gradient(top,
    rgba(0,0,0,0.4) 0, 
    rgba(0,0,0,0) 37%,
    rgba(0,0,0,0) 83%, 
    rgba(0,0,0,0.06) 92%, 
    rgba(0,0,0,0) 98%);
  /* Old WebKit syntax */
  background-image:
    url(../images/bg-bike.png), 
    -webkit-gradient(linear, 
    from(rgba(0,0,0,0.4)), 
    color-stop(37%, rgba(0,0,0,0)),
    color-stop(83%, rgba(0,0,0,0)), 
    color-stop(92%, rgba(0,0,0,0.16)), 
    color-stop(98%, rgba(0,0,0,0)));

  background-position: 50% 88%, 0 0;
  -webkit-transition: background-position  1s linear 250ms;
  -moz-transition: background-position  1s linear 250ms;
  -o-transition: background-position  1s linear 250ms;
  transition: background-position  1s linear 250ms;
}

#ad2 h1 {
  color: #484848;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 1px 1px #FFFFFF;
  font-family: LeagueGothic, Arial Narrow, Helvetica, sans-serif;
  font-size: 42px;
  letter-spacing:-1px;
  margin: 20px 5px;    
  text-shadow: #fff 1px 1px;
}

#ad2 a {
  text-decoration: none;
}

#ad2:hover {
  background-position: 150% 88%, 0 0;
}


aside > article:nth-of-type(3),
#ad3 {
  background-image:url(../images/dukes.png);
  background-position: bottom left;
  -webkit-transition: transform  2s linear 250ms;
  -moz-transition: transform  2s linear 250ms;
  -o-transition: transform  2s linear 250ms;
  transition: transform  2s linear 250ms;
}

#ad1 h1 {
  font-family: AcknowledgementMedium;
  letter-spacing: 0.1em;
  font-size: 36px;
  margin: 0 0 0 0;
  text-align: center;
}

#ad1 h1:first-letter {
  letter-spacing: -0.1em;
}

#ad1 p {
  margin: 0;
  font-family: AcknowledgementMedium;
  text-transform: uppercase;
  font-size: 14px;
  text-align: center;
}

aside p + a { display: block; text-decoration: none; border: 5px double; color: #ffffff; background-color: #484848; text-align: center; font-size: 28px; margin: 5px 5px 9px 5px; padding: 15px 0; position: relative;
 border-radius: 25px;
 -webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
 text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);
 font-family: AcknowledgementMedium, sans-serif;
}

.draganddrop #mouseContainer
{
  text-align:center;
}

.no-draganddrop #mouseContainer
{
  visibility:hidden;
  height:0px;
}

#ad1 a.wanted:hover {
  -webkit-box-shadow: 4px 10px #484848;
  -moz-box-shadow: 4px 10px #484848;
  box-shadow: 4px 10px #484848;  
  top: -5px;
  left: -2px;
}

#ad3 h1 {
  font-size: 20px;
  font-family: AcknowledgementMedium;
  padding: 0 30px 0 75px;
  line-height:1;
  color: #999;
  margin: 0 0 0 15px;
}

#ad3 h1 span {
  font-size: 30px;
  color: #999999;
  display:inline-block;
  -webkit-transition: color 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -moz-transition: color 0.2s ease-out, -moz-transform 0.2s ease-out;
  -o-transition: color 0.2s ease-out, -o-transform 0.2s ease-out;
  transition: color 0.2s ease-out, transform 0.2s ease-out;
}

.holding {
  /* Firefox */
  -moz-transition: all 0.3s ease;
  /* WebKit */
  -webkit-transition: all 0.3s ease;
  /* Opera */
  -o-transition: all 0.3s ease;
  /* Standard */
  transition: all 0.3s ease;
}

#ad3 h1:hover span {
  color: #484848;
  -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -moz-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -ms-transform:rotate(10deg) translateX(40px) scale(1.5); 
  -o-transform:rotate(10deg) translateX(40px) scale(1.5); 
  transform:rotate(10deg) translateX(40px) scale(1.5);
}

#ad3 p {
  padding: 5px 3px 0 75px;
  font-size: 0.85em;
}

.no-geolocation #ad4 {
  display: none;
}

#ad4 h1 {
  font-size: 20px;
  font-family: AcknowledgementMedium;
  text-align:center;
}

#ad4 {
  height:140px;
  position:relative;
}

#mapDiv {
  height: 140px;
  width: 236px;
}

#spinner {
  position:absolute;
  top:8px;
  left:55px;
}
/* Forms */
form {
  border: solid 2px #888;
  border-width: 2px 0;
  clear: both;
  -moz-box-shadow: 
    inset 1px 1px 84px rgba(0,0,0,0.24), 
    inset -1px -1px 84px rgba(0,0,0,0.24);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#cacaca', endColorstr='#b1b1b1')"; /* IE8+ */

  margin: 1px 0 1px 0;
  text-align: center;
  padding: 20px;
  min-height: 300px;
  background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat bottom center;
}

form#geoForm
{
  padding: 0px;
  border:none;
  min-height:0px;
  background:none;
  filter: none;
  -ms-filter:none;
  -moz-box-shadow: none;
}

form ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
form ul li {
  margin-bottom: 40px;
}

label {
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  font-size: 26px;
  display:block;
  margin: auto;
  text-align:center;
}
form p {
  text-align: center;
}
input[type=text], input[type=email], input[type=password], input[type=url], textarea {
  background-color: transparent;
  border: dotted #484848;
  border-width: 0 0 1px 0;
  display:block;
  margin: 10px auto 10px;
  font-style:italic;
  font-family: Times, "Times New Roman", serif;
  padding: 5px 30px 5px 30px;
  width: 50%;
}

input#zipcode {
width:25%;
display:inline;
margin-right: 25px;
}
input[type=number] {
  width: 3em;
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]) {
  background: transparent no-repeat top right;
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):required {
  background-image: url('../images/required.png'); 
}

input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:invalid { 
  background-image: url('../images/invalid.png');
} 
input:not([type=range]):not([type=date]):not([type=submit]):not([type=button]):not([type=checkbox]):not([type=number]):focus:valid { 
  background-image: url('../images/valid.png');
}

:invalid {
  box-shadow: none;
}

::-webkit-input-placeholder { color:#333; }


input {
  font-size: 20px;
  text-align: center;
}

input[type=submit], input[type=button] {
  border: none;
  -moz-border-radius: 10%;
  border-radius: 5px;
  background-color: #333;
  /* SVG for IE9 and Opera */
  background-image: url(../images/button-gradient.svg);
  /* Old WebKit */
  background-image: -webkit-gradient(radial, 30% 120%, 0, 30% 120%, 100, 
    color-stop(0,rgba(144,144,144,1)), 
    color-stop(1,rgba(72,72,72,1)));
  /* W3C for Mozilla */
  background-image: -moz-radial-gradient(30% 120%, circle, 
    rgba(144,144,144,1) 0%, 
    rgba(72,72,72,1) 50%);
  /* W3C for new WebKit */
  background-image: -webkit-radial-gradient(30% 120%, circle, 
    rgba(144,144,144,1) 0%, 
    rgba(72,72,72,1) 50%);
  /* W3C unprefixed */
  background-image: radial-gradient(30% 120%, circle,
    rgba(144,144,144, 1) 0%,
    rgba(72,72,72,1) 50%);
  color: #fff;
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  font-size: 28px;
  padding: 10px 30px;
  margin: 10px auto;
  opacity: 0.8;
  -webkit-transition: opacity .25s linear;
  -moz-transition: opacity .25s linear;
 
}



input[type=submit]:hover {
  opacity: 1;
  -webkit-transition: opacity .25s linear;
  -moz-transition: opacity .25s linear;
}
form h1 {
  margin: 0 auto;
  font-size: 50px;
  font-family: AcknowledgementMedium;
  text-align:center;
  white-space:nowrap;
  background: 
    url(../images/bg-formtitle-left.png) left 13px no-repeat, 
    url(../images/bg-formtitle-right.png) right 13px no-repeat;
}
form h2 {
  font-size: 20px;
}

form hgroup {
  padding-bottom: 50px;
}

/* Page Footer */
body > footer,
#footer {
  clear: both;
  float: left;
  width: 758px;
}

body > footer small {
  font-family: LeagueGothic, Tahoma, Geneva, sans-serif;
  text-transform: uppercase;
  line-height: 32px;
  padding: 0 0 0 7px;
  letter-spacing: .08em;
  text-shadow: rgba(0,0,0,0.4) 1px 1px 4px;
  float: left;
}

body > footer p:last-of-type{
  float: right;
  padding: 5px 0 0 0;
}

body > footer section {
  float: left;
  
}

body > footer h1 {
  font-size: 185%; 
}

#authors {
  padding-top: 10px;
  padding-right: 20px;
  background: #d1d1d1;
  border-top: solid 1px #888;
  border-bottom: solid 1px #888;
}

#authors section {
  width: 226px;
  padding: 0 0 0 20px;
}

#footerinfo {
  clear: both;
  height: 30px;
  width: 100%;
  background: transparent;
}



/* PRINT STYLES */
@media print {
  * { background: transparent !important; color: #484848 !important; text-shadow: none; }
  a, a:visited { color: #484848 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  /* Don't show links for images */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}


'html5' 카테고리의 다른 글

video player play 기능 추가  (0) 2014.09.16
video player skin  (0) 2014.09.16
html/css #1  (0) 2014.04.09
video 재생(control을 자바스크립트 버튼 작성)  (0) 2013.02.27
LocalStorage  (0) 2013.02.26

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Herb Story</title>

<style>

</style>

</head>

<body>


<!-- 컨테이너 -->

<div id="container">


<!-- 헤더 -->

<div id="header">

<img src="images/herblogo.jpg" alt="Herb Logo" />

</div>


<!-- 메뉴 -->

<ul id="menu">

<li><a href="index.html">처음으로</a></li>

<li><a href="#">허브가 뭐지</a></li>

<li><a href="#">허브의 종류</a></li>

<li><a href="#">허브의 효능</a></li>

<li><a href="#">내가 만드는 허브차</a></li>

</ul>

<!-- 컨텐츠 -->

<div id="content">

<h3>허브란</h3>

<p>약초, 향초, 향신료나 약으로 사용하는 식물의 총칭. 허브는 풀을 의미하는 라틴어

허바(herba)에서 유래한 말로 지구상에는 2500여종이 자생하는 것으로 알려져 있다.

</p>


<h3>허브의 종류</h3>

<p>바질은 두통, 신경과면, 구내염, 강장효과, 건위, 진정, 살균, 불면증에 좋고

젖을 잘 나오게 하는 효능이 있으며, 졸림을 방지하여 늦게까지 공부하는 수험생에게 좋다.

또한 신장의 활동을 촉진시키며 벌레 물린데에 살균효과가 있다.

</p>


<h3>허브의 효능</h3>

<p>레몬그라스(Lemongrass)는 억새를 닮은 포아과의 다년초로 잎을 찢어서 손가락으로 비벼보면

레몬같은 향기가 난다하여 붙여진 이름이다. 약품, 비누, 린스, 캔디 등의 부향제로 쓰인다.

인도나 동남아에서는 일상 음료로 상용하는데 이 차는 소화기능을 강화할 뿐 아니라

빈혈에도 효과가 있으며 냉차로 마시면 더욱 향기롭다.

</p>


</div>


<!-- 풋터 -->

<div id="footer">

<small>Copyright (C) Herb Story. All rights reserved</small>

</div>


</div>

</body>

</html>

'html5' 카테고리의 다른 글

video player skin  (0) 2014.09.16
html5 herald register  (0) 2014.09.15
video 재생(control을 자바스크립트 버튼 작성)  (0) 2013.02.27
LocalStorage  (0) 2013.02.26
canvas #10 화상 Image 그리기(이미지 잘라내서 크기조절해서 붙이기)  (0) 2013.02.22

뭔가 그럴듯한 페이지(자랑스럽다)


<%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html><head><meta charset="utf-8"></head><body>

<h3>HTML5동영상 재생</h3>

<video id="a_video" src="VIDEO0004.mp4">

<source src="VIDEO0004.mp4" type="video/mp4"/>

video태그가 지원하지 않습니다.

<a href="VIDEO0004.mp4">link</a>

</video>

<div>

<input id="play_btn" type="button" value="재생" />

<input id="pause_btn" type="button" value="정지" />

<input id="play2_btn" type="button" value="처음부터 재생" />

</div>

<div id="info"></div>

<script type="text/javascript">

function $(id) { 

return document.getElementById(id); 

}

var a_video = $("a_video");

a_video.addEventListener("timeupdate", function() {

$("info").innerHTML = a_video.currentTime + "/" +

a_video.duration;

});

$("play_btn").onclick = function() { a_video.play(); }

$("pause_btn").onclick = function() { a_video.pause(); }

$("play2_btn").onclick = function() {

a_video.currentTime = 0;

a_video.play();

};

</script>

</body></html>

'html5' 카테고리의 다른 글

html5 herald register  (0) 2014.09.15
html/css #1  (0) 2014.04.09
LocalStorage  (0) 2013.02.26
canvas #10 화상 Image 그리기(이미지 잘라내서 크기조절해서 붙이기)  (0) 2013.02.22
canvas #10 화상 Image 그리기  (0) 2013.02.22

+ Recent posts

티스토리툴바