고정 헤더 영역
상세 컨텐츠
본문
728x90
style="...." inline style
<style>
......
</style?>
<link type="text/css" rel="stylesheet" href="standard.css"> external CSS
RGB (Red-Green-Blue) = 빛의 3원색
ex) background-color:#927117;
background-color:rgb(223, 22, 223);
ex) black=#000000 white=#ffffff red=#ff0000 green=#00ff00 blue=#0000ff
=====================================
<영역 확인>
 |
Semantic tags
|
<study06>
<!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">
<title>Document</title>
</head>
<style>
header{
background-color: aliceblue;
left: 0;
top: 0;
width: 100%;
height: 50px;
text-align: center;
}
nav{
background-color: aquamarine;
left: 0;
top: 51px;
width: 100%;
height: 50px;
text-align: center;
}
section{
background-color: beige;
float: left;
left: 0;
top: 201px;
width: 70%;
height: 500px;
text-align: center;
}
aside{
background-color: bisque;
float: right;
left: 561px;
top: 201px;
width: 30%;
height: 500px;
text-align: center;
}
footer{
background-color: blanchedalmond;
left: 0;
width: 100%;
top: 701px;
height: 100px;
clear: both;
text-align: center;
}
</style>
<body>
<header>header</header>
<nav>nav</nav>
<section>section</section>
<aside>aside</aside>
<footer>footer</footer>
</body>
</html><결과물>
<카페관리>
<!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">
<title>카페 주문관리</title>
</head>
<style>
body{
font-size: 18px;
color: chocolate;
}
select{
width: 240px; font-size: 20px;
}
input,button{
font-size: 20px;
color: darkslategray;
}
.line{
border: 1px solid black;
}
#tbl1{
width: 860px;border-collapse: collapse;
}
#tbl1:first-child{
text-align: center;background-color: bisque;color:darkslategray;
}
#tbl1:nth-child(2)
</style>
<body>
<table id=tbl1 align=center>
<tr id=tr1>
<td colspan="3"><h1>카페관리</h1></td>
</tr>
<tr>
<td valign="top" align="center" class="line" style="background-color:cornsilk;">
<table>
<tr>
<td colspan="2" style="text-align: center;"><h3>메뉴목록</h3></td></tr>
<tr>
<td colspan="2">
<select size="14">
<option value="latte">Latte, 3000</option>
<option value="moca">Moca, 3500</option>
<option value="americano">American, 2500</option>
<option value="espresso">Espresso, 2700</option>
<option value="cappuccino">Cappuccino, 3600</option>
<option value="greentea">Green Tea, 2800</option>
</select>
</td>
</tr>
<tr>
<td>메뉴명</td><td><input type=text id=name name=name readnoly size="12"></td>
</tr>
<tr>
<td>수량</td><td><input type=number id=qty name=qty style="width: 120px">잔</td>
</tr>
<tr>
<td>가격</td><td><input type=number id=price name=price style="width: 120px">원</td>
</tr>
<tr>
<td><button id=btnSelect>주문</button></td>
<td align="right"><button id=btnReset>지우기</button></td>
</tr>
</table>
</td>
<td valign="top" align="center" class="line" style="background-color:rgb(252, 239, 223);">
<table>
<tr>
<td colspan="2" style="text-align: center;"><h3>주문내역</h3></td></tr>
<tr>
<td colspan="2">
<select size="15">
</select>
</td>
</tr>
<tr>
<td>주문금액</td><td><input type="number" style="width: 120px;">원</td>
</tr>
<tr>
<td>모바일번호</td><td><input type="text" id="mobile" name="mobile" style="width: 120px;"></td>
</tr>
<tr><td> </td></tr>
<tr>
<td><button id="btnOrder">주문완료</button></td>
<td align="right"><button id="btnCancel">취소</button></td>
</tr>
</table>
</td>
<td valign="top" align="center" class="line" style="background-color: cornsilk;">
<table>
<tr>
<td colspan="2" style="text-align: center;"><h3>매출내역</h3></td>
</tr>
<tr>
<td>
<select size="20">
</select>
</td>
</tr>
<tr>
<td align="center"><button id="btnRefresh">새로고침</button></td>
</tr>
</table>
</td>
</tr>
<tr style="height: 150px;background-color: darksalmon;">
<td style="vertical-align:top;color: brown;">
Created by Giga Coffe
</td>
<td colspan="3" style="text-align:right;vertical-align:top;color: brown;">
Designed by Hwang
</td>
</tr>
</table>
</body>
</html><결과물>
| html tags 계층=tree || DOM( Document = web page Object = tag Model) |
 |
| #tbl1:first-child{ text-align: center;background-color: bisque;color:darkslategray; } |
반응형웹(Responsive Web design)
- 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것
- 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹
- 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공
728x90
'HTML' 카테고리의 다른 글
| 2023.01.16 호텔 객실/예약 관리 코드 (0) | 2023.01.16 |
|---|---|
| 2023.01.12 (0) | 2023.01.12 |
| 2023.01.11 (0) | 2023.01.11 |
