exam.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<style type="text/css">
div, td, span {
font-family:돋움;
font-size:12px;
color:#4c4c4c;
}
#headerSub1 {
font-weight:bold;
color:#000066;
}
#headerSub2 {
font-size:11px;
}
#wtable {
border:1px solid #939393;
border-collapse:collapse;
width:280px;
height:260px;
margin-top:7px;
}
#wtable td {
border:1px solid #939393;
padding:5px;
}
.leftTd {
text-align:center;
}
.date1 {
font-weight:bold;
color:#262626;
}
.date2 {
font-size:11px;
color:#717171;
margin-top:1px;
}
#wtable img {
float:left;
margin:2px;
}
#footer {
width:280px;
text-align:right;
margin-top:10px;
}
#footer span {
font-size:9px;
color:#929292;
}
.wdesc {
margin-top:10px;
}
.wdesc2_1 {
font-size:11px;
color:#717171;
}
.wdesc2_2 {
font-weight:bold;
color:#f98b39;
}
.wdesc2_3, .wdesc2_5 {
font-size:11px;
}
.wdesc2_4 {
font-size:11px;
font-weight:bold;
color:#737373;
}
</style>
</head>
<body>
<div id="header">
<span id="headerSub1">영등포구</span> <span id="headerSub2">| 현재 지점의 날씨를 알려드립니다.</span>
</div>
<table id="wtable">
<tr>
<td class="leftTd">
<div class="date1">현재</div>
<div class="date2">(05/27)</div>
</td>
<td colspan="2" class="rightTd">
<img src="images/w_l1.gif" id="wdescImg" alt="" />
<div class="wdesc">맑음</div>
<div class="wdesc2">
<span class="wdesc2_1">기온</span> <span class="wdesc2_2">19℃</span> <span class="wdesc2_3">강수량</span> <span class="wdesc2_4">0</span><span class="wdesc2_5">mm</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="leftTd">
<div class="date1">오늘</div>
<div class="date2">(05/27)</div>
</td>
<td>오전</td>
<td>
<img src="images/w_s21_.gif" id="wdescImg" alt="" />
<div class="wdesc1">구름많음</div>
<div class="wdesc2">
<span class="wdesc2_1">기온</span> <span class="wdesc2_2">17℃</span> <span class="wdesc2_3">강수확률</span> <span class="wdesc2_4">20</span><span class="wdesc2_5">%</span>
</div>
</td>
</tr>
<tr>
<td>오후</td>
<td>
<img src="images/w_s21_.gif" id="wdescImg" alt="" />
<div class="wdesc1">구름많음</div>
<div class="wdesc2">
<span class="wdesc2_1">기온</span> <span class="wdesc2_2">24℃</span> <span class="wdesc2_3">강수확률</span> <span class="wdesc2_4">20</span><span class="wdesc2_5">%</span>
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="leftTd">
<div class="date1">내일</div>
<div class="date2">(05/28)</div>
</td>
<td>오전</td>
<td>
<img src="images/w_s21_.gif" id="wdescImg" alt="" />
<div class="wdesc1">구름조금</div>
<div class="wdesc2">
<span class="wdesc2_1">기온</span> <span class="wdesc2_2">16℃</span> <span class="wdesc2_3">강수확률</span> <span class="wdesc2_4">10</span><span class="wdesc2_5">%</span>
</div>
</td>
</tr>
<tr>
<td>오후</td>
<td>
<img src="images/w_s21_.gif" id="wdescImg" alt="" />
<div class="wdesc1">구름조금</div>
<div class="wdesc2">
<span class="wdesc2_1">기온</span> <span class="wdesc2_2">27℃</span> <span class="wdesc2_3">강수확률</span> <span class="wdesc2_4">10</span><span class="wdesc2_5">%</span>
</div>
</td>
</tr>
</table>
<div id="footer"><span>▶</span> 주간 예보 확인</div>
</body>
</html>
결과
날씨이미지는 파일이름만 잘수정해서 넣으면 됩니다.
examl.html
<!--
//▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣
//
// 작성일 :
//
// 제목 :
//
// 내용 :
//
//▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zzarungna 공부중</title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<meta name="keywords" content="수련중" />
<meta name="description" content="xhtml, css, javascript" />
<style type="text/css">
/*
바깥 테이블
*/
table, .wtr, .wtra, .wtrb {
border:1px darkgray solid;
border-collapse:collapse;
}
/*
전체 글꼴
*/
div, span, td, th {
font-style:돋움;
font-size:12px;
color:#4c4c4c;
}
/*
title 첫번째
*/
#tita {
font-weight:bold;
display:inline;
color:#000066;
}
/*
title 두번째
*/
div #titb {
font-size:11px;
}
/*
안쪽 테이블
*/
#tbl {
margin-top:5px;
width:280px;
height:280px;
}
/*
table title 테이블 제목
*/
table .tbltit {
font-size:11px;
color:#939393;
display:block;
font-weight:normal;
}
/*
table title 제목 테이블 사이즈
*/
.wtra {
width:60px;
color:black;
}
/*
첫번쨰 이미지 디자인
*/
#imgctl {
border:0px;
margin-right:12px;
}
/*
/*
기온
*/
.tempt {
color:#717171;
font-size:11px;
}
/*
섭씨
*/
.celsius {
color:#F98B39;
font-size:12px;
font-weight:bold;
}
/*
수치
*/
.numval {
font-size:11px;
font-weight:bold;
color:#737373;
}
/*
오전, 오후 테이블 조정
*/
.wtrb {
width:40px;
text-align:center;
}
/*
마지막 주간예보 확인 스타일
*/
#finala {
margin-top:10px;
padding-left:185px;
color:#4C4C4C;
}
#finalb {
font-size:11px;
color:#929292;
}
</style>
</head>
<body>
<div>
<div id="tita">영등포구</div><span id="titb"> | 현재 지점의 날씨를 알려드립니다.</span>
</div>
<table id="tbl">
<tr>
<th class="wtra">현재<span class="tbltit">(05/27)</span></th>
<td id="imgctl" colspan="2">
<img src="./images/w_l1.gif" />
</td>
<td id="imgwidth">
<div>맑음</div>
<span class="tempt">기온</span>
<span class="celsius">19℃</span> 강수량
<span class="numval">0</span>mm
</td>
</tr>
<tr>
<th class="wtra" rowspan="2">오늘<span class="tbltit">(05/27)</span></th>
<td class="wtrb">오전</td>
<td class="wtr">
<img src="./images/w_s21_.gif" />
</td>
<td class="wtr">
<div>구름많음</div>
<span class="tempt">기온</span>
<span class="celsius">17℃</span> 강수확률
<div><span class="numval">20%</span></div>
</td>
</tr>
<tr>
<td class="wtrb">오후</td>
<td class="wtr">
<img src="./images/w_s21_.gif" />
</td>
<td class="wtr">
<div>구름많음</div>
<span class="tempt">기온</span>
<span class="celsius">24℃</span> 강수확률
<div><span class="numval">20%</span></td></div>
</tr>
<tr>
<th class="wtra" rowspan="2">내일<span class="tbltit"> (05/28)</span></th>
<td class="wtrb">오전</td>
<td class="wtr">
<img src="./images/w_s21_.gif" />
</td>
<td class="wtr">
<div>구름조금</div>
<span class="tempt">기온</span>
<span class="celsius">16℃</span> 강수확률
<div><span class="numval">10%</span></td></div>
</tr>
<tr>
<td class="wtrb">오후</td>
<td class="wtr">
<img src="./images/w_s21_.gif" />
</td>
<td class="wtr">
<div>구름조금</div>
<span class="tempt">기온</span>
<span class="celsius">27℃</span> 강수확률
<div><span class="numval">10%</span></td></div>
</tr>
</table>
<div id="finala"><span id="finalb">▶</span> 주간 예보 확인</div>
</body>
</html>
결과
