728x90
반응형
AWS 클라우드환경 네이티브 수업 83일차
진행
1. 웹페이지 만들어 보기
요약
1. 웹페이지 만들어 보기
웹페이지 만들어 보기
welcome.html (첫 페이지)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 화면</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../css/subpage.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="wrap">
<!-- 헤더파일이 들어가는 곳 -->
<header>
<div id="login">
<a href="#">login</a> | <a href="../member/join.html">Join</a>
</div>
<div class="clear"></div>
<div id="logo">
<img src="../images/logo.gif" width="265" height="62" alt="my Home"/>
</div>
<nav id="top_menu">
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../company/welcome.html">COMPANY</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CUSTOMER CENTER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<!-- 헤더파일이 들어가는 곳 -->
<div class="clear"></div>
<!-- 서브페이지 이미지가 들어가는 곳 -->
<div id="sub_img"></div>
<!-- 서브페이지 이미지가 들어가는 곳 -->
<div class="clear"></div>
<!-- 좌측 서브메뉴가 들어가는 곳 -->
<nav id="sub_menu">
<ul>
<li><a href="./welcome.html">Welcome</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Newsroom</a></li>
<li><a href="#">Public Policy</a></li>
</ul>
</nav>
<!-- 좌측 서브메뉴가 들어가는 곳 -->
<!-- 메인컨텐츠가 들어가는 곳 -->
<article>
<h1>Welcome</h1>
<figure class="ceo"><img src="../images/company/CEO.jpg" width="196" height="226" alt="CEO">
<figcaption>My Home CEO Gildong</figcaption></figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum, libero faucibus porttitor bibendum, lorem purus sollicitudin lacus, ut laoreet sem dui non nibh. Fusce tempor, eros vulputate luctus malesuada, nunc nisi rutrum massa, vestibulum rhoncus metus tellus in eros. Ut vehicula luctus cursus. Aliquam nunc neque, condimentum eu fringilla quis, feugiat in erat. Aliquam vel neque dolor, eu porttitor nulla. Cras ac dui metus, non viverra ligula. Maecenas sed tortor justo. Duis vehicula nisl sed sapien egestas ut aliquet purus mattis. Vestibulum vitae libero sapien, sed ultricies lacus. Morbi sapien metus, ullamcorper rhoncus cursus in, facilisis id felis. Aliquam id elit lacus, at laoreet enim. Nullam quis purus dui, eu molestie augue.</p>
<p>Nam venenatis neque quis tortor laoreet egestas hendrerit id diam. Nam adipiscing urna non tortor ornare vel consectetur est cursus. Morbi sed libero quam, sed scelerisque ligula. Vivamus vitae massa in quam hendrerit porttitor. Vivamus ac feugiat odio. In hac habitasse platea dictumst. Proin porta tempus ligula ut eleifend. Maecenas tincidunt elementum purus, nec venenatis nisl sodales vel. Mauris at neque nisi, nec tincidunt nulla. Mauris porta, nunc et semper lobortis, sem erat tempus massa, at porttitor dolor mi non sem.</p>
<p>Phasellus lectus elit, sagittis quis aliquet vulputate, consectetur ac velit. Mauris molestie, quam et ultrices fringilla, lectus magna auctor nisl, a congue tortor nisi eu magna. Phasellus eleifend tristique sapien sed eleifend. Nunc nunc sem, interdum ac mattis in, mollis ut felis. Aenean varius, ligula id consequat condimentum, diam mauris ullamcorper arcu, ut porttitor libero neque sit amet velit. Ut gravida ultricies est, non mollis massa pharetra imperdiet. Duis commodo libero eget massa tempor eget lacinia mi elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at leo et massa euismod bibendum. Mauris consectetur dictum orci pretium hendrerit. Integer ipsum ligula, fringilla nec iaculis nec, ultrices eu diam. Nunc tellus nulla, fringilla eu tempor ac, commodo at augue. Vestibulum vel congue tellus.</p>
</article>
<!-- 메인컨텐츠가 들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터가 들어가는 곳 -->
<footer>
<hr>
<div id="copy">
All contents Copyright 2017 MyHome Inc. all rights reserved<br>
Contact mail : admin@myhome.com Tel : +82 02 123 4567 Fax + 82 02 123 4568
</div>
<div id="social">
<img src="../images/facebook.gif" width="33" height="33" alt="Facebook"/>
<img src="../images/twitter.gif" width="33" height="33" alt="Twitter"/>
</div>
</footer>
<!-- 푸터가 들어가는 곳 -->
</div>
</body>
</html>
default.css
@charset "UTF-8";
body {
background-color: #898989;
margin: 0;
padding: 0;
font-size: 0.75em;
line-height: 1.2em;
color: #333;
}
/* 웹 페이지를 중앙에 배치하는 css코드 */
#wrap {
width: 971px; /* 각 웹 페이지의 크기에 맞게 사이즈를 조정한다. */
text-align: left;
margin: 0;
margin-right: auto;
margin-left: auto;
background-image: url(../images/shadow.png);
background-repeat: repeat-y;
min-height: 780px;
}
.clear {
clear: both;
}
#logo {
float: left;
width: 265px;
margin: 60px 0 0 40px;
}
header {
height: 151px;
margin: 0;
padding: 0;
}
#login {
float: right;
margin: 20px 64px 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
word-spacing: 5px;
}
#login a {
text-decoration: none;
color: #333;
}
#login a:hover {
color: #F90;
}
/* 종속 선택자 : 태그 선택자와 연계된 아이디 또는 클래스 선택자를 종속 선택자라고 한다. */
nav#top_menu {
width: 600px;
margin: 50px 20px 0 0;
float: right;
}
nav#top_menu ul {
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: 100;
color: #333;
}
nav#top_menu ul li {
float: left;
margin: 0 5px;
}
nav#top_menu a {
display: block;
height: 20px;
padding: 10px; /* a:hover를 통해서 밑줄효과를 주기 위해서 */
text-decoration: none;
color: #333;
}
nav#top_menu a:hover {
background-image: url(../images/blue.gif);
background-repeat: repeat-x;
background-position: bottom;
}
footer {
margin: 50px 0 0 0;
height: 120px;
background-image: url(../images/under_logo.gif);
background-repeat: no-repeat;
background-position: 40px 20px;
}
footer hr {
width: 900px;
margin: 0 0 0 35px;
}
footer #copy {
font-family: Verdana, Geneva, sans-serif;
width: 450px;
margin: 20px 0 0 290px;
float: left;
}
footer #social {
width: 130px;
margin: 20px 20px 0 0;
float: right;
}
footer #social img {
margin: 0 7px;
}
subpage.css
@charset "UTF-8";
/* CEO 인사말 */
#sub_img {
width: 971px;
height: 179px;
background-image: url(../images/company/sub_back.png);
background-repeat: no-repeat;
background-position: left top;
}
/* 서브 메뉴 시작 */
#sub_menu {
width: 238px;
float: left;
marign: 20px;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
}
#sub_menu ul {
margin: 20px 0 0 10px;
list-style: none;
}
#sub_menu a {
text-decoration: none;
color: #666;
display: block;
height: 15px;
width: 150px;
padding: 7px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
background-image: url(../images/bullet.gif);
background-repeat: no-repeat;
background-position: right center;
}
#sub_menu a:hover {
background-image: url(../images/bullet_orange.gif);
background-repeat: no-repeat;
background-position: right center;
color: #F90;
}
/* 컨텐츠 시작 */
article {
float: right;
width: 660px;
padding-right: 30px;
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
line-height: 1.5em;
}
article h1 {
font-family: "Times New Roman", Times, serif;
font-size: 45px;
color: #CCC;
margin: 20px 0;
font-weight: normal;
}
article p {
padding-left: 10px;
}
figure.ceo {
float: right;
margin: 5px;
}
figcaption {
text-align: center;
color: #39F;
}
index.html (상단 메인 메뉴에서 home )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메인 화면</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/front.css" rel="stylesheet" type="text/css" media="all"/>
</head>
<body>
<div id="wrap">
<!-- 헤더파일이 들어가는 곳 -->
<header>
<div id="login">
<a href="#">login</a> | <a href="member/join.html">Join</a>
</div>
<div class="clear"></div>
<div id="logo">
<img src="images/logo.gif" width="265" height="62" alt="my Home"/>
</div>
<nav id="top_menu">
<ul>
<li><a href="./">HOME</a></li>
<li><a href="company/welcome.html">COMPANY</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CUSTOMER CENTER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<!-- 헤더파일이 들어가는 곳 -->
<div class="clear"></div>
<!-- 메인 이미지가 들어가는 곳 -->
<div id="main_img">
<img src="images/main_img.jpg" width="971" height="282"/>
</div>
<!-- 메인 이미지가 들어가는 곳 -->
<div class="clear"></div>
<!-- 메인컨텐츠가 들어가는 곳 -->
<article id="front">
<div id="solution">
<div id="hosting">
<h3>Web Hosting Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est</p>
</div>
<div id="security">
<h3>Web Security Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est</p>
</div>
<div id="payment">
<h3>Web Payment Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est</p>
</div>
</div>
<div class="clear"></div>
<div id="sec_news">
<h3><span class="orange">Security</span> News</h3>
<dl>
<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
<dd><a href="#">Proin quis ante eget arcu tempus tempus porta vel ipsum.
Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor.
In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
<dd><a href="#none">Proin quis ante eget arcu tempus tempus porta vel ipsum.
Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor.
In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
</dl>
</div>
<div id="news_notice">
<h3 class="brown">News & Notice</h3>
<table>
<tr>
<td class="contxt"><a href="#">Vivamus id ligula velit, quis euismod nisi </a></td>
<td><a href="#">2011.07.31</a></td>
</tr>
<tr>
<td class="contxt">Fusce eros augue, tempus nec interdum eu</td>
<td>2011.06.11</td>
</tr>
<tr>
<td class="contxt">Donec eget tincidunt purus</td>
<td>2011.05.12</td>
</tr>
<tr>
<td class="contxt">Nam facilisis mauris in dui suscipit volutpat </td>
<td>2011.05.08</td>
</tr>
<tr>
<td class="contxt">Aenean in dui mollis leo ullamcorper fringilla </td>
<td>2011.04.25</td>
</tr>
</table>
</div>
</article>
<!-- 메인컨텐츠가 들어가는 곳 -->
<div class="clear"></div>
<!-- 푸터가 들어가는 곳 -->
<footer>
<hr>
<div id="copy">
All contents Copyright 2017 MyHome Inc. all rights reserved<br>
Contact mail : admin@myhome.com Tel : +82 02 123 4567 Fax + 82 02 123 4568
</div>
<div id="social">
<img src="images/facebook.gif" width="33" height="33" alt="Facebook"/>
<img src="images/twitter.gif" width="33" height="33" alt="Twitter"/>
</div>
</footer>
<!-- 푸터가 들어가는 곳 -->
</div>
</body>
</html>
front.css
@charset "UTF-8";
#main_img {
width: 971px;
height: 308px;
background-image: url(../images/img_back.png);
background-repeat: no-repeat;
background-position: center top;
}
#main_img img {
margin: 9px 0 0 0;
}
article#front {
margin: 5px 0 5px 0;
}
#solution {
border: solid 1px #FFFFFF;
border-radius: 10px;
width: 910px;
min-height: 150px;
background: #EBEBEB;
padding: 10px;
margin: 0 0 0 20px;
}
#hosting, #security, #payment {
width: 260px;
float: left;
padding: 10px;
margin: 0 0 0 20px;
}
#hosting h3, #security h3, #payment h3 {
font-family: Roboto, Franklin, Calibri;
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0 0 10px 80px;
}
#hosting p, #security p, #payment p {
font-family: Roboto, Franklin, Calibri;
font-size: 12px;
color: #333;
margin: 0 0 0 80px;
}
#hosting {
background-image: url(../images/icon1.png);
background-repeat: no-repeat;
background-position: left 15px;
border-right: 1px solid #CCC;
}
#security {
background-image: url(../images/icon2.png);
background-repeat: no-repeat;
background-position: left 15px;
border-right: 1px solid #CCC;
}
#payment {
background-image: url(../images/icon3.png);
background-repeat: no-repeat;
background-position: left 15px;
}
#sec_news, #news_notice {
float: left;
width: 420px;
margin: 15px 0 0 20px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
}
#sec_news h3, #news_notice h3 {
font-family: Roboto, Franklin, Calibri;
font-size: 14px;
font-style: italic;
font-weight: normal;
width: 420px;
height: 24px;
background-image: url("../images/h3_back.jpg");
background-repeat: no-repeat;
padding: 5px 0 0 22px;
}
#sec_news .orange {
color: #F26522;
}
#news_notice .brown {
color: #827B00;
}
#sec_news dl {
margin-left: 6px;
}
#sec_news dt {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
margin: 5px 0;
color: #F00;
}
#sec_news dt a {
color: #F00;
text-decoration: none;
}
#sec_news dt a:hover {
color: #F90;
text-decoration: underline;
}
#sec_news dd {
margin-left: 0;
color: #333;
}
#sec_news dd a {
color: #333;
text-decoration: none;
}
#sec_news dd a:hover {
color: #F90;
text-decoration: underline;
}
#news_notice {
padding-left: 30px;
}
#news_notice table {
width: 400px;
border-collapse: collapse;
/* border-collapse: collapse; => cellspacing="0" cellpadding="0"과 거의 같은 효과 */
text-align: center;
}
#news_notice td {
padding: 6px 4px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
#news_notice td.contxt {
background-image: url(../images/tr_back.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
text-align: left;
color: #333;
}
#news_notice a {
color: #333;
text-decoration: none;
}
#news_notice a:hover {
text-decoration: underline;
color: #F90;
}
결과캡쳐
728x90
반응형
'코딩수업 > AWS 클라우드환경 네이티브' 카테고리의 다른 글
| (미완) 9/21 Bootstrap 프레임워크 (0) | 2022.09.21 |
|---|---|
| 9/20 웹페이지 만들어 보기, Bootstrap 프레임워크 시작 (0) | 2022.09.20 |
| 9/16 CSS 속성 ( 배경, 테두리, 박스, 위치, Animation ) (2) | 2022.09.16 |
| 9/15 CSS 선택자, CSS 속성(Font, Text, Color) (0) | 2022.09.15 |
| (미완) 9/14 HTML 태그 종류 별 정리, CSS 개념 및 적용 방식, 박스 모델 (0) | 2022.09.14 |
댓글