본문 바로가기
개발 공부/html & css

제대로 배워보는 html과 css, 그리고 웹표준 11. 웹 페이지 만들어보기 실습

maxlafe 2020. 9. 18. 12:21

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

제대로 배워보는 html과 css, 그리고 웹표준 11. 웹페이지(subcide.com) 만들어보기 실습

 

11.1 웹 페이지 html 실습

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<meta name="generator" content="">
	<meta name="robots" content="index,follow">
	<!-- index, follow = all -->
	<title>About - Enlighten Designs</title>
	<link rel="stylesheet" href="css/subcide.css">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
	<dl class="skip-nav">
			<dt><strong>skip Navigator</strong></dt>
			<dd><a href="#content">skip to content</a></dd>
	</dl>
	<div id="wrap">

		<!--header-->
		<div id="header">
			<h1 class="logo"><a href="#"><img src="img/logo_enlighten.gif" alt="Enlighten Designs"></a></h1>
			<h2>Main menu</h2>
			<ul class="lnb">
				<li class="mm1"><a href="#" class="on">About</a></li>
				<li class="mm2"><a href="#">Services</a></li>
				<li class="mm3"><a href="#">Portfolio</a></li>
				<li class="mm4"><a href="#">Contact us</a></li>
			</ul>
		</div>
		<!--//header-->
		<!--container-->
		<div id="container">
			<!--content-->
			<div id="content">
				<h2><img src="img/about.gif" alt="About"></h2>
				<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p>
				<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
				<h2><img src="img/contact.gif" alt="Contact Us"></h2>
				<address>
					<p><em>Phone:</em> (07) 853 6060</p>
					<p><em>Fax:</em> (07) 853 6060</p>
					<p><em>Email:</em> <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a></p>
					<p><em>P.O Box:</em> 14159, Hamilton, New Zealand</p>
				</address>
				<p><a href="#">More contact information...</a></p>
			</div>
			<!--//content-->
			<!--aside-->
			<div id="aside">
				<h2>aside area</h2>
				<p>Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Fuga, earum, ex. Quas, rerum labore ducimus dicta perspiciatis cupiditate quaerat itaque eaque consequuntur deserunt nisi facere vero tempore! Veniam, quae, odit?</p>
			</div>
			<!--//aside-->
		</div>
		<!--//container-->
		<!--footer-->
		<div id="footer">
			<dl class="btm_menu">
				<dt><strong>Bottom menu</strong></dt>
				<dd><a href="#">About</a> -</dd>
				<dd><a href="#">Services</a> -</dd>
				<dd><a href="#">Portfolio</a> -</dd>
				<dd><a href="#">Contact Us</a> -</dd>
				<dd><a href="#">Terms of Trade</a> -</dd>
			</dl>
			<p class="copy">
				Copyright &copy; Enlighten Designs<br>
				Powered by <a href="#">Enlighten Hosting</a> and <a href="#">Vadmin 3.0 CMS</a>
			</p>
		</div>
		<!--//footer-->
	</div>
</body>
</html>

 

 

 

 

11.2 웹 페이지 css 실습

@charset "utf-8";
/* reset */
html, body, dl, dt, dd, hr, h1, h2, ul, li, p, address {margin: 0; padding: 0;}
body, h1, h2 {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px;}
li {list-style:none;}
img, fieldset {border: 0;}
img {vertical-align: top;}
address, em {font-style: normal;}
hr {display: none;}
.blind {display: none; position: absolute; left: 0; top: -9999em;}
.skip-nav a {display: block; background-color: navy; color: #eee; line-height: 2.4em; text-align: center; position: absolute; width: 100%; z-index: 9999; left: 0; top: -9999em;}
.skip-nav a:focus {top: 0;}

/* style */
#wrap {width: 760px; margin: 0 auto; }
#header { position: relative; padding-bottom: 150px; background: url(../img/visual_about.jpg) no-repeat 0 100%;}
#header .logo {position: absolute; right: 26px; top: 106px;}
#header .lnb {padding-left: 11px; *zoom: 1;}
#header .lnb:after {content: ''; display: block; clear: both;}
#header .lnb li{float: left;}
#header .lnb li a {display: block; height: 50px; background: no-repeat 0 0; text-indent: -9999em;}
#header .lnb li.mm1 a {width: 71px; background-image: url(../img/m_about.gif);}
#header .lnb li.mm2 a {width: 84px; background-image: url(../img/m_services.gif);}
#header .lnb li.mm3 a {width: 95px; background-image: url(../img/m_portfolio.gif);}
#header .lnb li.mm4 a {width: 106px; background-image: url(../img/m_contact.gif);}
#header .lnb li a:hover {background-position: 0 -50px;}
#header .lnb li a.on,
#header .lnb li a.on:hover {background-position: 0 -100px;}

#container {*zoom: 1; padding-bottom: 20px;}
#container:after {content:''; display: block; clear: both;}
#container #content {float: left; width: 63%; color: #666; line-height: 1.4}
#container #content h2,
#container #content p,
#container #content address {margin-bottom: 15px;}
#container #content address p {margin-bottom: 0;}
#container #content .inner {padding: 25px 25px 0;}
#container #aside {float: right; width: 37%; color: #666; line-height: 1.4;}
#container #aside .inner {padding: 25px 25px 0 0;}

#footer {border-top: 1px solid #ccc; padding: 25px 25px 35px; line-height: 1.8; *zoom: 1; color: #999; font-size: .9em;}
#footer a {color: #aaa; text-decoration: none;}
#footer a:hover {color: brown;}
#footer:after {content: ''; display: block; clear: both;}
#footer .btm_menu {float: right;}
#footer .btm_menu dd {display: inline; }
#footer .copy {float: left;}

 

11.3 웹 페이지 link 실습

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<meta name="generator" content="">
	<meta name="robots" content="index,follow">
	<!-- index, follow = all -->
	<title>About - Enlighten Designs</title>
	<link rel="stylesheet" href="css/subcide.css">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" href="favicon.ico" type="image/x-icon">
	<meta http-equiv="refresh" content="2; url=html/about.html">
</head>
<body class="intro">
	<dl class="skip-nav">
			<dt class="blind"><strong>skip Navigator</strong></dt>
			<dd><a href="#content">skip to content</a></dd>
	</dl>
	<hr>
	<div id="wrap">

		<!--header-->
		<div id="header">
			<h1 class="logo"><a href="#"><img src="img/logo_enlighten.gif" alt="Enlighten Designs"></a></h1>
			
		</div>
		<!--//header-->
		<!--container-->
		<div id="container">
			<!--content-->
			<div id="content">
				<p>sbout.html 페이지로 이동합니다.</p>
			</div>
			<!--//content-->
		
		</div>
		<!--//container-->
		<!--footer-->
		<div id="footer">
			<dl class="btm_menu">
				<dt class="blind"><strong>Bottom menu</strong></dt>
				<dd><a href="#">About</a> -</dd>
				<dd><a href="#">Services</a> -</dd>
				<dd><a href="#">Portfolio</a> -</dd>
				<dd><a href="#">Contact Us</a> -</dd>
				<dd><a href="#">Terms of Trade</a> -</dd>
			</dl>
			<p class="copy">
				Copyright &copy; Enlighten Designs<br>
				Powered by <a href="#">Enlighten Hosting</a> and <a href="#">Vadmin 3.0 CMS</a>
			</p>
		</div>
		<!--//footer-->
	</div>
</body>
</html>

 

subside.css

 

@charset "utf-8";
/* reset */
html, body, dl, dt, dd, hr, h1, h2, ul, li, p, address {margin: 0; padding: 0;}
body, h1, h2 {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px;}
li {list-style:none;}
img, fieldset {border: 0;}
img {vertical-align: top;}
address, em {font-style: normal;}
hr {display: none;}
.blind {display: none; position: absolute; left: 0; top: -9999em;}
.skip-nav a {display: block; background-color: navy; color: #eee; line-height: 2.4em; text-align: center; position: absolute; width: 100%; z-index: 9999; left: 0; top: -9999em;}
.skip-nav a:focus {top: 0;}

/* style */
#wrap {width: 760px; margin: 0 auto; }
#header { position: relative; padding-bottom: 150px; background: no-repeat 0 100%;}
.about #header {background-image: url(../img/visual_about.jpg);}
.services #header {background-image: url(../img/visual_services.jpg);}
.portfolio #header {background-image: url(../img/visual_portfolio.jpg);}
.contact #header {background-image: url(../img/visual_contact.jpg);}
#header .logo {position: absolute; right: 26px; top: 106px;}
.intro #header .logo {position: static; }
#header .lnb {padding-left: 11px; *zoom: 1;}
#header .lnb:after {content: ''; display: block; clear: both;}
#header .lnb li{float: left;}
#header .lnb li a {display: block; height: 50px; background: no-repeat 0 0; text-indent: -9999em;}
#header .lnb li.mm1 a {width: 71px; background-image: url(../img/m_about.gif);}
#header .lnb li.mm2 a {width: 84px; background-image: url(../img/m_services.gif);}
#header .lnb li.mm3 a {width: 95px; background-image: url(../img/m_portfolio.gif);}
#header .lnb li.mm4 a {width: 106px; background-image: url(../img/m_contact.gif);}
#header .lnb li a:hover {background-position: 0 -50px;}
#header .lnb li a.on,
#header .lnb li a.on:hover {background-position: 0 -100px;}

#container {*zoom: 1; padding-bottom: 20px;}
#container:after {content:''; display: block; clear: both;}
#container #content {float: left; width: 63%; color: #666; line-height: 1.3}
.intro #container #content {float: none; width: auto; text-align: center;}
#container #content h2,
#container #content p,
#container #content address {margin-bottom: 15px;}
#container #content address p {margin-bottom: 0;}
#container #content .inner {padding: 25px 25px 0;}
#container #aside {float: right; width: 37%; color: #666; line-height: 1.4;}
#container #aside .inner {padding: 25px 25px 0 0;}

#footer {border-top: 1px solid #ccc; padding: 25px 25px 35px; line-height: 1.8; *zoom: 1; color: #999; font-size: .9em;}
#footer a {color: #aaa; text-decoration: none;}
#footer a:hover {color: brown;}
#footer:after {content: ''; display: block; clear: both;}
#footer .btm_menu {float: right;}
#footer .btm_menu dd {display: inline; }
#footer .copy {float: left;}

'개발 공부 > html & css' 카테고리의 다른 글

제대로 배워보는 html과 css, 그리고 웹표준 13. 반응형 웹 알아보기  (0) 2020.09.23
제대로 배워보는 html과 css, 그리고 웹표준 12. css3 알아보기  (0) 2020.09.23
제대로 배워보는 html과 css, 그리고 웹표준 10. 예제 만들어보기(네이버 Nuli)  (0) 2020.09.17
제대로 배워보는 html과 css, 그리고 웹표준 9. EMS, 이벤트 제작 실습  (0) 2020.09.11
제대로 배워보는 html과 css, 그리고 웹표준 7. 테이블~8. 배치 스타일  (0) 2020.09.11

'개발 공부/html & css' Related Articles

티스토리툴바