API tools faq
paste
Advertisement
asimryu

html 5 & css & js 기본 페이지 예제(20150826)

asimryu
Aug 25th, 2015
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.92 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="ko">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>모던 웹디자인 기초</title>
  6.     <style>
  7.         /* style.css */
  8.         body { margin: 0; }
  9.         header, section, footer {
  10.             width: 1000px;
  11.             margin: 0 auto;
  12.             position: relative;
  13.         }
  14.         #visual {
  15.             width:100%;
  16.             height:400px;
  17.             background-image: url(http://lorempixel.com/1000/400);
  18.         }
  19.         nav {
  20.             width:100%;
  21.             height: 50px;
  22.             background-color: black;
  23.         }
  24.         nav > a {
  25.             display: inline-block;
  26.             width: auto;
  27.             height: 50px;
  28.             color: white;
  29.             font-size: 1.7em;
  30.             text-decoration: none;
  31.             padding: 0 10px;
  32.             line-height: 50px;
  33.         }
  34.         nav > a:hover { background-color: red; }
  35.         #main {
  36.             position: relative;
  37.             padding: 20px 0;
  38.             width: 1000px;
  39.             margin: 0 auto;
  40.         }
  41.         #videos { width: 100%; height: 250px; }
  42.         #videos > div {
  43.             float:left;
  44.             width: 250px;
  45.             height: 250px;
  46.         }
  47.         #maps { padding: 10px 0;}
  48.         #contents > div {
  49.             float:left;
  50.             width: 500px;
  51.             height: 300px;
  52.         }
  53.         #contents > div { font-size: 1.2em; }
  54.         #contents > div > h3 { font-size: 1.5em; }
  55.         #contents > div > img {
  56.             margin: 0 20px 20px 0;
  57.             border-radius: 75px;
  58.         }
  59.         #contents > div > img:hover {
  60.             animation-name: myani;
  61.             animation-duration: 1s;
  62.         }
  63.         @keyframes myani {
  64.             from { transform: rotate(0deg); }
  65.             to { transform: rotate(360deg); }
  66.         }
  67.         footer {
  68.             clear:both;
  69.             height: 30px;
  70.             background-color: black;
  71.             color: white;
  72.             line-height: 30px;
  73.             text-align:center;
  74.         }
  75.     </style>
  76. </head>
  77. <body>
  78.     <header>
  79.         <nav>
  80.             <a href="#" onmouseover="bg('food')">디자인</a>
  81.             <a href="#" onmouseover="bg('city')">HTML</a>
  82.             <a href="#" onmouseover="bg('nature')">CSS</a>
  83.             <a href="#" onmouseover="bg('technics')">JavaScrit</a>
  84.             <a href="#" onmouseover="bg('cats')">PHP & MySql</a>
  85.         </nav>
  86.         <div id="visual">
  87.         </div>
  88.     </header>
  89.     <section id="main">
  90.         <div id="videos">
  91.             <div><iframe width="250" height="250" src="https://www.youtube.com/embed/Yu5LBT5h84k" frameborder="0" allowfullscreen></iframe></div>
  92.             <div><iframe width="250" height="250" src="https://www.youtube.com/embed/-wCuhDnwNzM?autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe></div>
  93.             <div><iframe width="250" height="250" src="https://www.youtube.com/embed/abUJIr4h9bs" frameborder="0" allowfullscreen></iframe></div>
  94.             <div><iframe width="250" height="250" src="https://www.youtube.com/embed/sVtNdmAKvUw" frameborder="0" allowfullscreen></iframe></div>
  95.         </div>
  96.         <div id="maps">
  97.             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d799.119908209104!2d126.28946123439768!3d36.75905968632276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357a6b1e66aab1a5%3A0x2749d18b4feba468!2z7YOc7JWI7Jes7J6Q6rOg65Ox7ZWZ6rWQ!5e0!3m2!1sen!2skr!4v1440554956445" width="1000" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
  98.         </div>
  99.         <div id="contents">
  100.             <div>
  101.                 <h3>모던웹디자인이란?</h3>
  102.                 <img src="http://lorempixel.com/150/150/nightlife" align="left">
  103.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quasi corrupti nemo provident pariatur veritatis quam delectus assumenda atque dolor culpa obcaecati et possimus saepe quae porro iusto dignissimos natus!
  104.             </div>
  105.             <div>
  106.                 <h3>글로벌숙련기술진흥원이란?</h3>
  107.                 <img src="http://lorempixel.com/150/150/sports" align="left">
  108.                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quasi corrupti nemo provident pariatur veritatis quam delectus assumenda atque dolor culpa obcaecati et possimus saepe quae porro iusto dignissimos natus!
  109.             </div>
  110.         </div>
  111.     </section>
  112.     <footer>
  113.         &copy; 2015 유승열 All Rights Reserved
  114.     </footer>
  115.     <script>
  116.         function bg(c) {
  117.             if( ! c ) return;
  118.             var bgurl = "http://lorempixel.com/1000/400/" + c;
  119.             var visual = document.getElementById("visual");
  120.             visual.style.backgroundImage = "url(" + bgurl + ")";
  121.         }
  122.     </script>
  123. </body>
  124. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!