개발 공부/html & css
제대로 배워보는 html과 css, 그리고 웹표준 14. 웹 사이트 제작 실습
maxlafe
2020. 9. 24. 21:22
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
제대로 배워보는 html과 css, 그리고 웹표준 14. 웹 사이트 제작 실습
14.1 최적화 된 웹사이트 마크업 작성하기 1
Bootstrap Templates on WrapBootstrap
The most popular items on WrapBootstrap Browse → The newest items on WrapBootstrap Browse → Recently updated items on WrapBootstrap Browse →
wrapbootstrap.com
www.w3schools.com/w3css/w3css_templates.asp
W3.CSS Templates
www.w3schools.com
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
참고 사이트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
<title>LEARN WEB Template</title>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/website.css">
</head>
<body>
<dl class="skip">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#container">skip to Content</a></dd>
</dl>
<hr>
<div id="wrap">
<!--header-->
<div id="header">
<h1 class="logo"><a href="#"><i class="fas fa-home"></i>Logo</a></h1>
<nav>
<h2>Main navigation</h2>
<button type="button"><i class="fas fa-bars"></i><span>Main menu</span></button>
<ul class="lnb">
<li><a href="#">Team</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
</div>
<!--//header-->
<!-- visual -->
<section class="visual">
<h3>Learn w3.css</h3>
<p><img src="img/pic1.jpg" alt=""></p>
</section>
<!-- //visual-->
<div id="container">
<!-- team -->
<section class="team">
<h3>OUR TEAM</h3>
<p>Meet the team - our office rats:</p>
<ul>
<li>
<figure>
<img src="img/avatar.jpg" alt="">
<figcaption>
<strong>Johnny Walker</strong>
<small>Web Designer</small>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/avatar.jpg" alt="">
<figcaption>
<strong>Rebecca Flex</strong>
<small>Support</small>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/avatar.jpg" alt="">
<figcaption>
<strong>Jan Ringo</strong>
<small>Boss man</small>
</figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/avatar.jpg" alt="">
<figcaption>
<strong>Kai Ringo</strong>
<small>Fixer</small>
</figcaption>
</figure>
</li>
</ul>
</section>
<!-- //team -->
<!-- pricing-->
<section class="pricing">
<h3>PRICING</h3>
<p>Choose a pricing paln that fits your needs.</p>
<dl>
<dt><strong>Basic</strong></dt>
<dd>
<ul>
<li><strong>10GB</strong> Storage</li>
<li><strong>10</strong> Emails</li>
<li><strong>10</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>10</em> <span>per month</span></li>
</ul>
<p><a href="#"><i class="fas fa-check"></i>Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>Pro</strong></dt>
<dd>
<ul>
<li><strong>25GB</strong> Storage</li>
<li><strong>25</strong> Emails</li>
<li><strong>25</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>25</em> <span>per month</span></li>
</ul>
<p><a href="#"><i class="fas fa-check"></i>Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>Premium</strong></dt>
<dd>
<ul>
<li><strong>50GB</strong> Storage</li>
<li><strong>50</strong> Emails</li>
<li><strong>50</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>50</em> <span>per month</span></li>
</ul>
<p><a href="#"><i class="fas fa-check"></i>Sign Up</a></p>
</dd>
</dl>
</section>
<!--//pricing-->
<!-- contact -->
<div class="contact">
<h3>Contact Us</h3>
</div>
<!--//contact-->
</div>
<footer id="footer">
<p><strong>Follow Us</strong></p>
<dl>
<dt><strong>sns Link</strong></dt>
<dd><a href="#"><i class="fab fa-facebook-f"></i> <span>Go facebook</span></a></dd>
<dd><a href="#"><i class="fab fa-twitter"></i> <span>Go twitter</span></a></dd>
<dd><a href="#"><i class="fab fa-google-plus-g"></i> <span>Go google plus</span></a></dd>
<dd><a href="#"><i class="fab fa-instagram"></i> <span>Go instagram</span></a></dd>
</dl>
<p class="copy">Powered by <a href="#">w3.css</a></p>
</footer>
</div>
</body>
</html>
14.2 최적화된 웹사이트 마크업 작성하기 2
common.js 추가
// map
window.onload = function(){
var mymap = document.getElementById('map');
var latlng = new google.maps.LatLng(37.497673,127.0277946);
var gmap = new google.maps.Map(
mymap, {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// ICON pointer
var marker = new google.maps.Marker({
position: latlng,
map: gmap,
title:'강남역'
});
google.maps.event.addListener(marker, 'click', function(event){
alert('강남역');
});
};
index.html 헤더와 본문 안에 각각 추가
<script src="js/jquery-1.12.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/common.js"></script> <!-- contact -->
<div class="contact">
<h3>Contact Us</h3>
<p class="desc">Swing by for a cup of coffee, or whatever.</p>
<div id="map"></div>
</div>
<!--//contact-->
14.3 기본 스타일 지정하기
14.4 각 부위별 스타일 지정하기
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
/* 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;
}
/* reset */
body {
padding-top: 50px;
font-family: 'Noto Sans',sans-serif;
font-size: 14px;
}
.blind {
display: block;
position: absolute;
left: 0;
top: -9999em;
overflow: hidden;
}
.skip a {
display: block;
position: absolute;
left: 0;
top: -9999em;
background-color: navy;
color: #efefef;
text-decoration: none;
text-align: center;
line-height: 2;
width: 100%;
z-index: 9999;
}
.skip a:focus {
top: 0;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
hr {
display: none;
}
/* style */
#wrap {
max-width: 1200px;
margin: 0 auto
}
#header {
top: 0;
position: fixed;
background-color: #000;
width: 100%;
z-index: 30;
max-width: 1200px;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
line-height: 50px;
color: #fff;
font-size: 16px;
font-weight: bold;
background-color: #009688;
padding: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
#header .logo a:hover {
background-color:#ccc;
color: #000;
}
#header .logo a i {
margin-right: 10px;
}
#header .btn_nav {
float: right;
line-height: 50px;
height: 50px;
border: 0;
background-image: none;
width: 50px;
background-color: #333;
color: #eee;
cursor: pointer;
font-size: 16px;
}
#header .btn_nav:hover {
background-color: #ccc;
color: #000;
}
#header .lnb {
position: absolute;
top: 50px;
width: 100%;
display: none;
}
#header .lnb li a {
background-color: #222;
color: #ccc;
padding-left: 20px;
font-size: 15px;
font-weight: bold;
text-transform: uppercase;
line-height: 40px;
display: block;
text-decoration: none;
border-bottom: 1px solid #333;
letter-spacing: .2em;
}
#header .lnb li a:hover {
background-color: #ddd;
color: #000;
}
.visual {
position: relative;
z-index: 20;
}
.visual .tle {
position: absolute;
bottom: 20px;
left: 20px;
line-height: 65px;
padding: 0 20px;
background-color: #000;
color: #eee;
text-transform: uppercase;
font-size: 2em;
letter-spacing: .1em;
cursor: pointer;
z-index: 10;
}
.visual .tle:hover {
background-color: #009688;
color: #fff;
}
.visual .pic {
z-index: 5;
position: relative;
}
.visual .pic img{
width: 100%;
-webkit-filter: sepia(0.6) grayscale(0.5);
-o-filter: sepia(0.6) grayscale(0.5);
filter: sepia(0.6) grayscale(0.5);
}
#container {
text-align: center;
}
#container .team {
padding: 80px 0 60px;
border-bottom: 1px solid #ddd;
}
#container .team .tle{
font-size: 26px;
line-height: 60px;
}
#container .team .desc {
margin-bottom: 40px;
line-height: 30px;
font-size: 16px;
}
#container .human {
}
#container .human figure img {
width: 200px;
border-radius: 50%;
}
#container .human figcaption {
margin-bottom: 20px;
}
#container .human figcaption strong{
display: block;
font-size: 24px;
line-height: 50px;
}
#container .human figcaption small {
display: clock;
font-size: 1.2em;
line-height: 30px;
}
#container .pricing {
padding: 80px 0 60px;
border-bottom: 1px solid #ddd;
}
#container .pricing .tle {
font-size: 26px;
line-height: 60px;
}
#container .pricing .desc {
font-size: 16px;
margin-bottom: 40px;
line-height: 30px;
}
#container .pricing dl {
margin: 0 20px 20px;
border: 1px solid #ccc;
}
#container .pricing dt strong {
display: block;
background-color: #222;
color: #eee;
font: 24px/3.4 'Verdana', sans-serif;
}
#container .pricing dd li {
line-height: 50px;
border-bottom: 1px solid #ccc;
font-size: 1.2em;
}
#container .pricing dd li strong {
font-weight: bold;
color: #000;
}
#container .pricing dd li span {
display: block;
}
#container .pricing dd li span.pay {
font-size: 2em;
padding: 15px 0 0;
}
#container .pricing dd li span.pay + span {
color: #666;
font-size: .9em;
}
#container .pricing dd .sign {
padding: 20px 0;
background-color: #f0f0f0;
}
#container .pricing dd .sign a {
display: inline-block;
line-height: 45px;
background-color: #009688;
color: #fff;
font-size: 1.2em;
text-decoration: none;
padding: 0 24px;
}
#container .pricing dd .sign a i {
margin-right: 10px;
}
#container .pricing dd .sign a:hover {
background-color: #ccc;
color: #000;
}
#container .pricing .pro dt strong{
background-color: #444;
}
#container .contact {
padding: 80px 0 0;
}
#container .contact .tle {
font-size: 26px;
line-height: 60px;
}
#container .contact .desc {
margin-bottom: 40px;
font-size: 16px;
line-height: 30px;
}
/* maps */
#container .contact #map {
width: 100%;
height: 400px;
}
#footer {
padding: 30px 0 50px;
background-color: #222;
color: #eee;
text-align: center;
}
#footer a {
color: #fff;
}
#footer .desc {
margin-bottom: 15px;
font-size: 1.3em;
}
#footer dl{
margin-bottom: 15px;
}
#footer dd {
display: inline;
}
#footer dd a {
display: inline-block;
color: #eee;
height: 40px;
width: 40px;
background-color: #009688;
text-align: center;
line-height: 40px;
font-size: 1.2em;
border-radius: 50%;
}
#footer dd a:hover {
background-color: #ccc;
color: #000;
}
14.5 웹페이지 실습 - script
// map
window.onload = function(){
var mymap = document.getElementById('map');
var latlng = new google.maps.LatLng(37.497673,127.0277946);
var gmap = new google.maps.Map(
mymap, {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// ICON pointer
var marker = new google.maps.Marker({
position: latlng,
map: gmap,
title:'강남역'
});
google.maps.event.addListener(marker, 'click', function(event){
alert('강남역');
});
};
// menu
$(document).ready(function(){
// $('#header .lnb').hide();
// $('.btn_nav').click(function(){
// $('#header .lnb').slideToggle(500);
// });
$('#header .lnb')
.css({
left : '-100%',
opacity : 0
});
$('.btn_nav').click(function(){
if($('#header .lnb').hasClass('active')) {
$('#header .lnb').animate({
left : '-100%',
opacity : '0'
}).removeClass('active');
}
else {
$('#header .lnb').animate({
left : '0',
opacity : '1'
}).addClass('active');
}
});
});common.js 추가
14.6 웹호스팅 설정 & FTP 활용 파일 전송
www.dothome.co.kr/web/free/index.php
웹호스팅 > 무료 호스팅
filezilla-project.org/download.php?type=client
Download FileZilla Client for Windows (64bit)
Download FileZilla Client for Windows (64bit) The latest stable version of FileZilla Client is 3.50.0 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla Pro S
filezilla-project.org
파일질라 다운로드
호스트: mysite4761.dothome.co.kr
사용자명: mysite4761
