CSS 날씨 표현 예제
SOURCE.html
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
<style type="text/css">
#divtit {
width:580px;
}
#weatherTable {
text-align:center;
font-size:12px;
color:#646464;
width:580px;
}
hr {
border-top:2px solid #808080;
}
.borderbar {
border-right:1px solid #cecece;
}
span {
color:#7B7B7B;
font-size:11px;
float:right;
}
.max {
display:inline;
padding-left:5px;
color:red;
font-weight:bold;
font-size:12px;
}
.min {
display:inline;
padding-left:5px;
color:blue;
font-weight:bold;
font-size:12px;
}
</style>
</head>
<body>
<div id="divtit">
<div>
<img src="./images/h3_today_world.gif" id="title" />
<span id="title">더보기▶</span>
<hr />
</div>
</div>
<table id="weatherTable">
<tr>
<td class="borderbar">
<div>뉴욕</div>
<img src="./images/w_l2.gif" />
<div>최고<div class="max"><strong>29 ℃</strong></div></div>
<div>최저<div class="min">19 ℃</span></div>
</td>
<td class="borderbar">
<div>도쿄</div>
<img src="./images/w_l4.gif" />
<div>최고<div class="max">19 ℃</span></div>
<div>최저<div class="min">16 ℃</span></div>
</td>
<td class="borderbar">
<div>런던</div>
<img src="./images/w_l7.gif" />
<div>최고<div class="max">17 ℃</span></div>
<div>최저<div class="min">11 ℃</span></div>
</td>
<td class="borderbar">
<div>벤쿠버</div>
<img src="./images/w_l4.gif" />
<div>최고<div class="max">13 ℃</span></div>
<div>최저<div class="min">9 ℃</span></div>
</td>
<td class="borderbar">
<div>베이징</div>
<img src="./images/w_l1.gif" />
<div>최고<div class="max">29 ℃</span></div>
<div>최저<div class="min">16 ℃</span></div>
</td>
<td class="borderbar">
<div>파리</div>
<img src="./images/w_l2.gif" />
<div>최고<div class="max">19 ℃</span></div>
<div>최저<div class="min">8℃</span></div>
</td>
</tr>
</table>
</body>
</html>
결과
SOURCE.html
<html>
<head>
<title></title>
<meta name="generator" content="editplus" />
<style type="text/css">
#main {
width:580px;
}
div, span, td {
font-size:12px;
font-family:돋움;
color:#646464;
}
#weatherTable {
width:580px;
}
#weatherTable td {
text-align:center;
border-right:1px solid #cecece;
}
#header span {
float:right;
color:#7b7b7b;
font-size:11px;
}
hr {
border-top:2px solid #808080;
}
.max span {
color:#ff3300;
}
.min span {
color:#3366ff;
}
</style>
</head>
<body>
<div id="main">
<div id="header"><img src="images/h3_today_world.gif" alt="" /><span>더보기▶</span></div>
<hr />
<table id="weatherTable">
<tr>
<td>
<div class="location">뉴욕</div>
<div class="icon"><img src="images/w_l2.gif" alt="" /></div>
<div class="max">최고 <span><strong>29</strong> ℃</span></div>
<div class="min">최저 <span><strong>19</strong> ℃</span></div>
</td>
<td>
<div class="location">도쿄</div>
<div class="icon"><img src="images/w_l4.gif" alt="" /></div>
<div class="max">최고 <span><strong>19</strong> ℃</span></div>
<div class="min">최저 <span><strong>16</strong> ℃</span></div>
</td>
<td>
<div class="location">런던</div>
<div class="icon"><img src="images/w_l7.gif" alt="" /></div>
<div class="max">최고 <span><strong>17</strong> ℃</span></div>
<div class="min">최저 <span><strong>11</strong> ℃</span></div>
</td>
<td>
<div class="location">밴쿠버</div>
<div class="icon"><img src="images/w_l4.gif" alt="" /></div>
<div class="max">최고 <span><strong>13</strong> ℃</span></div>
<div class="min">최저 <span><strong>9</strong> ℃</span></div>
</td>
<td>
<div class="location">베이징</div>
<div class="icon"><img src="images/w_l1.gif" alt="" /></div>
<div class="max">최고 <span><strong>29</strong> ℃</span></div>
<div class="min">최저 <span><strong>16</strong> ℃</span></div>
</td>
<td>
<div class="location">파리</div>
<div class="icon"><img src="images/w_l2.gif" alt="" /></div>
<div class="max">최고 <span><strong>19</strong> ℃</span></div>
<div class="min">최저 <span><strong>8</strong> ℃</span></div>
</td>
</tr>
</table>
</div>
</body>
</html>
<!--
//▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣
//
// 작성일 :
//
// 제목 :
//
// 내용 :
//
//▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣▣
-->
결과
