Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>daum menu</title>
<style>
/* reset */
html,body {width: 100%; height: 100%}
body,h1,h2,h3,h4,ul,li,p {margin: 0; padding: 0}
body,h1,h2,h3,h4 {font-family: 'Malgun Gothic','맑은 고딕',sans-serif; font-size: 12px}
li {list-style: none}
em {font-style: normal}
img {vertical-align: top}
a {text-decoration: none}
a:hover,a:focus {text-decoration: underline}
.blind {display: block; position: absolute; left: 0; top: -9999em; overflow: hidden}
/* style */
#header {width: 978px; margin: 0 auto}
#header .tle {float: left; margin: 35px 0 23px 3px}
#header .tle a {display: block; width: 103px; height: 37px; background: url(img/gnb.gif) no-repeat 0 0; text-indent: -9999em}
#header .sub {float: left; margin: 42px 0 0 23px}
#header .sub li {}
#header .sub li a {display: block; width: 44px; height: 24px; background: url(img/gnb.gif) no-repeat 0 -50px; text-indent: -9999em}
#header .area {border-top: 1px solid #333; height: 44px; border-bottom: 1px solid #cdcdcd; clear: both;}
#header .area .inn {position: relative; border-top: 1px solid #333; *zoom: 1;}
#header .area .inn:after {}
#header .area:after {content: ''; display: block; clear: both;}
#header .area .gnb_real {float: left}
#header .area .gnb_real li {float: left; margin-right: 1px;}
#header .area .gnb_real li a {display: block; height: 44px; background: url(img/gnb.gif) no-repeat; text-indent: -9999em}
#header .area .gnb_real li.mm01 a {width: 77px; background-position: 0 -675px}
/* background가 이미 부모 클래스에 들어가있으니까 background-position만 쓰기 */
#header .area .gnb_real li.mm02 a {width: 82px; background-position: -78px -675px}
#header .area .gnb_real li.mm03 a {width: 84px; background-position: -161px -675px}
#header .area .gnb_real li.mm04 a {width: 49px; background-position: -246px -675px}
#header .area .gnb_real li.mm05 a {width: 75px; background-position: -296px -675px}
#header .area .gnb_real li.mm06 a {width: 51px; background-position: -372px -675px}
#header .area .gnb_real li.mm07 a {width: 51px; background-position: -424px -675px}
#header .area .gnb_real li.mm08 a {width: 75px; background-position: -476px -675px}
#header .area .gnb_real li.mm09 a {width: 90px; background-position: -552px -675px}
#header .area .gnb_real li.mm01 a.active,
#header .area .gnb_real li.mm01 a:hover {width: 77px; background-position: 0 -725px}
#header .area .gnb_real li.mm02 a.active,
#header .area .gnb_real li.mm02 a:hover {width: 82px; background-position: -78px -725px}
#header .area .gnb_real li.mm03 a.active,
#header .area .gnb_real li.mm03 a:hover {width: 84px; background-position: -161px -725px}
#header .area .gnb_real li.mm04 a.active,
#header .area .gnb_real li.mm04 a:hover {width: 49px; background-position: -246px -725px}
#header .area .gnb_real li.mm05 a.active,
#header .area .gnb_real li.mm05 a:hover {width: 75px; background-position: -296px -725px}
#header .area .gnb_real li.mm06 a.active,
#header .area .gnb_real li.mm06 a:hover {width: 51px; background-position: -372px -725px}
#header .area .gnb_real li.mm07 a.active,
#header .area .gnb_real li.mm07 a:hover {width: 51px; background-position: -424px -725px}
#header .area .gnb_real li.mm08 a.active,
#header .area .gnb_real li.mm08 a:hover {width: 75px; background-position: -476px -725px}
#header .area .gnb_real li.mm09 a.active,
#header .area .gnb_real li.mm09 a:hover {width: 90px; background-position: -552px -725px}
#header .area .gnb_with {float: right; margin-right: 85px}
#header .area .gnb_with li {}
#header .area .gnb_with li a {display: block; width: 100px; height: 44px; background: url(img/gnb.gif) no-repeat -793px -675px; text-indent: -9999em}
#header .area .gnb_with li a:hover {background-position: -793px -725px}
#header .area .app {position: absolute; right: 0; top: 8px}
#header .area .app a {display: block; width: 82px; height: 30px; background: url(img/gnb.gif) no-repeat 0 -125px; text-indent: -9999em}
</style>
</head>
<body>
<div id="header">
<h1 class="tle"><a href="#">부동산</a></h1>
<h2 class="blind">관련서비스</h2>
<ul class="sub">
<li class="mm01"><a href="#">금융</a></li>
</ul>
<h2 class="blind">메인메뉴</h2>
<div class="area">
<div class="inn">
<ul class="gnb_real">
<li class="mm01"><a href="#" class="active">부동산홈</a></li>
<li class="mm02"><a href="#">매물·시세</a></li>
<li class="mm03"><a href="#">신축·분양</a></li>
<li class="mm04"><a href="#">경매</a></li>
<li class="mm05"><a href="#">인테리어</a></li>
<li class="mm06"><a href="#">이사</a></li>
<li class="mm07"><a href="#">뉴스</a></li>
<li class="mm08"><a href="#">커뮤니티</a></li>
<li class="mm09"><a href="#">지역핫이슈</a></li>
</ul>
<ul class="gnb_with">
<li class="mm01"><a href="#">매물관리센터</a></li>
</ul>
<p class="app"><a href="#">부동산앱</a></p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table</title>
<style>
/* reset */
html,body {width: 100%; height: 100%}
body,h1,h2,h3,h4,ul,li,p {margin: 0; padding: 0}
body,h1,h2,h3,h4,th,td {font-family: 'Malgun Gothic','맑은 고딕',sans-serif; font-size: 12px}
li {list-style: none}
em {font-style: normal}
img {vertical-align: top}
table {border-collapse: collapse}
a {text-decoration: none}
a:hover,a:focus {text-decoration: underline}
caption {display: none}
/* 제목을 잘 설명해두면 캡션을 아예 숨겨버려도 됨 */
/* style */
.tbl {width: 800px; margin: 0 auto}
.tbl h1 {padding: 20px 0; font-size: 20px}
.tbl table {width: 100%}
.tbl table th, td {padding: 4px 0; border: 1px solid #ccc; color: #777; text-align: center}
.tbl table thead th {padding: 6px 0; background-color: #efefef; color: #666}
.tbl table tfoot th, .tbl table tfoot td {padding: 6px 0; background-color: #efefef; color: #666; font-weight: bold}
</style>
</head>
<body>
<div class="tbl">
<h1>메이져리그 2007시즌 1위~6위 팀순위</h1>
<!-- UI Object -->
<table>
<caption>메이져리그 2007시즌 1위~6위 팀순위입니다.</caption>
<colgroup>
<col width="10%">
<col>
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
<col width="10%">
</colgroup>
<thead>
<tr>
<th scope="col">순위</th>
<th scope="col">팀</th>
<th scope="col">경기수</th>
<th scope="col">승</th>
<th scope="col">패</th>
<th scope="col">승률</th>
<th scope="col">승차</th>
<th scope="col">최근</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>콜로라도</td>
<td>163</td>
<td>90</td>
<td>73</td>
<td>0.552</td>
<td>-</td>
<td>9승-1패</td>
</tr>
<tr>
<th scope="row">2</th>
<td>샌디에이고</td>
<td>163</td>
<td>89</td>
<td>74</td>
<td>0.546</td>
<td>1</td>
<td>4승-6패</td>
</tr>
<tr>
<th scope="row">3</th>
<td>뉴욕M</td>
<td>163</td>
<td>88</td>
<td>74</td>
<td>0.543</td>
<td>1.5</td>
<td>4승-6패</td>
</tr>
<tr>
<th scope="row">4</th>
<td>애틀랜타</td>
<td>163</td>
<td>84</td>
<td>78</td>
<td>0.519</td>
<td>5.5</td>
<td>5승-5패</td>
</tr>
<tr>
<th scope="row">5</th>
<td>밀워키</td>
<td>163</td>
<td>83</td>
<td>79</td>
<td>0.512</td>
<td>6.5</td>
<td>5승-5패</td>
</tr>
<tr>
<th scope="row">6</th>
<td>LAD</td>
<td>163</td>
<td>82</td>
<td>80</td>
<td>0.506</td>
<td>7.5</td>
<td>3승-7패</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">우승</th>
<td>콜로라도</td>
<td>845</td>
<td>448</td>
<td>511</td>
<td>0.521</td>
<td>-</td>
<td>-</td>
</tr>
</tfoot>
</table>
<!-- //UI Object -->
</div>
</body>
</html>
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 020 CSS 공부 (16) 레이아웃 예제 실습 (0) | 2021.02.21 |
|---|---|
| 019 CSS 공부 (15) 로그인 페이지 예제 실습 (0) | 2021.02.17 |
| 017 CSS공부 (13) 이미지 하단 텍스트, 다음 메인 예제 실습 (0) | 2021.02.16 |
| 016 CSS공부(12) 이미지와 텍스트 목록 예제 실습 (0) | 2021.02.09 |
| 015 CSS공부(11) 갤러리 형식의 리스트 예제 실습 (0) | 2021.02.04 |
Daily Study/Web Dev
