여기서는 다자인된 웹사이트 전체를 코드를 통해서 만들어가는 과정을 함께해보겠습니다. 작은 부품이 되는 요소들을 유기적으로 결합하는 연습을 자주 해봐야 어떤 웹사이트도 만들 수 있다는 자신감이 생기게 됩니다. templated.co에서 제공하는 템플릿과 똑같은 모습으로 코딩을 해보면서 CSS로 코딩하는 감각을 익혀보시기 바랍니다.
결과물은 아래와 같이 생겼습니다. 실제 동작하는 모습을 보고 싶다면 DEMO를 방문해주세요.
작업 미리 보기
사용기술
주요개념
수업소개
배경 이미지 지정하기
헤더 - 아바타 이미지
헤더 - 슬로건
헤더 - 소셜 공유
헤더 - 다듬기
메인 - 섬네일
푸터
최종 마무리와 반응형 디자인 적용
예제
전체 파일을 다운로드 받으려면 아래 링크를 클릭하세요.
index2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <!DOCTYPE HTML><!-- Visualize by TEMPLATED templated.co @templatedco Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)--><html> <head> <title>Visualize by TEMPLATED</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="assets/css/reset.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,400i" rel="stylesheet"> <link rel="stylesheet" href="fontello-bcf36fd2/css/fontello.css"> <link rel="stylesheet" href="assets/css/main2.css" /> <style> body{ background-image: url(images/bg.jpg); background-size: cover; } </style> </head> <body> <!-- Wrapper --> <div id="wrapper"> <!-- Header --> <header id="header"> <span class="avatar"><img src="images/avatar.jpg" alt="" /></span> <h1>This is <strong>Visualize</strong>, a responsive site template designed by <a href="http://templated.co">TEMPLATED</a><br /> and released for free under the Creative Commons License.</h1> <ul class="icons"> <li><a href="#" class="icon-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon-facebook"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon-mail"><span class="label">Email</span></a></li> </ul> </header> <!-- Main --> <section id="main"> <!-- Thumbnails --> <section class="thumbnails"> <div> <a href="images/fulls/01.jpg"> <img src="images/thumbs/01.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> <a href="images/fulls/02.jpg"> <img src="images/thumbs/02.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> </div> <div> <a href="images/fulls/03.jpg"> <img src="images/thumbs/03.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> <a href="images/fulls/04.jpg"> <img src="images/thumbs/04.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> <a href="images/fulls/05.jpg"> <img src="images/thumbs/05.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> </div> <div> <a href="images/fulls/06.jpg"> <img src="images/thumbs/06.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> <a href="images/fulls/07.jpg"> <img src="images/thumbs/07.jpg" alt="" /> <h3>Lorem ipsum dolor sit amet</h3> </a> </div> </section> </section> <!-- Footer --> <footer id="footer"> <p>© Untitled. All rights reserved. Design: <a href="http://templated.co">TEMPLATED</a>. Demo Images: <a href="http://unsplash.com">Unsplash</a>.</p> </footer> </div> <!-- Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.poptrox.min.js"></script> <script src="assets/js/skel.min.js"></script> <script src="assets/js/main.js"></script> </body></html> |
