http://m.cook.miznet.daum.net/
여기 보면 "인기요리분류" 부분에 표로 되어있는데요.
넓이 100%에서 창을 줄이면 똑같은 간격으로 글씨는 중앙에 위치하게 되는데요.
몇시간 동안 씨름하고 찾아보고 해도 제실력으로는 안되서 이렇게 문의 드립니다.
부탁좀 드리겠습니다. 초보에게 큰 빛이 됩니다. ㅠㅜ
여기 보면 "인기요리분류" 부분에 표로 되어있는데요.
넓이 100%에서 창을 줄이면 똑같은 간격으로 글씨는 중앙에 위치하게 되는데요.
몇시간 동안 씨름하고 찾아보고 해도 제실력으로는 안되서 이렇게 문의 드립니다.
부탁좀 드리겠습니다. 초보에게 큰 빛이 됩니다. ㅠㅜ
댓글 6개
13년 전
감싸주는곳은 100%로 하시고
나누어지는곳에 넓이를 각각 25%로 해주시고 글자는 가운데 정렬을 해주시면 됩니다.
나누어지는곳에 넓이를 각각 25%로 해주시고 글자는 가운데 정렬을 해주시면 됩니다.
13년 전
간단하게 테이블 코딩으로 나타내면
<style type="text/css">
.box{overflow:hidden;width:100%;border:1px solid #ddd;background-color:#f7f7f7;}
.box td{padding:10px;text-align:center;border-right:1px solid #ddd;}
.box .none{border:none}
</style>
<h3>인기 요리분류</h3>
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="box">
<colgroup ><col width="25%"><col width="25%"><col width="25%"><col width="25%"></colgroup>
<tbody>
<tr>
<td>반찬</td>
<td>국물요리</td>
<td>별미일품</td>
<td class="none">밥죽</td>
</tr>
</tbody>
</table>
<style type="text/css">
.box{overflow:hidden;width:100%;border:1px solid #ddd;background-color:#f7f7f7;}
.box td{padding:10px;text-align:center;border-right:1px solid #ddd;}
.box .none{border:none}
</style>
<h3>인기 요리분류</h3>
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="box">
<colgroup ><col width="25%"><col width="25%"><col width="25%"><col width="25%"></colgroup>
<tbody>
<tr>
<td>반찬</td>
<td>국물요리</td>
<td>별미일품</td>
<td class="none">밥죽</td>
</tr>
</tbody>
</table>
13년 전
새벽비님 감사합니다. 대부분 소스를 보니 div ul li 로 만들어져있길래 어떻게든 해보려 했으나 안되네요. 테이블이 역시 좋습니다. 감사합니다.^^~
13년 전
간단하게 짜봤습니다.
xhtml transitional 에서 테스트했습니다.
<style type="text/css" media="screen">
ul {float:left;margin:0;padding:0;width:500px;border:1px solid #ccc;background:#f7f7f7;list-style:none}
ul li {float:left;margin-left:-1px;padding:10px 0;width:25%;border-right:1px solid #eee;border-bottom:1px solid #eee;text-align:center}
.rt_none {border-right:none}
</style>
<ul>
<li>반찬</li>
<li>국물요리</li>
<li>별미일품</li>
<li class="rt_none">밥죽</li>
<li>도시락</li>
<li>샌드위치</li>
<li>베이커리</li>
<li class="rt_none">면요리</li>
</ul>
<div style="clear:both;height:0;overflow:hidden"><!-- --></div>
xhtml transitional 에서 테스트했습니다.
<style type="text/css" media="screen">
ul {float:left;margin:0;padding:0;width:500px;border:1px solid #ccc;background:#f7f7f7;list-style:none}
ul li {float:left;margin-left:-1px;padding:10px 0;width:25%;border-right:1px solid #eee;border-bottom:1px solid #eee;text-align:center}
.rt_none {border-right:none}
</style>
<ul>
<li>반찬</li>
<li>국물요리</li>
<li>별미일품</li>
<li class="rt_none">밥죽</li>
<li>도시락</li>
<li>샌드위치</li>
<li>베이커리</li>
<li class="rt_none">면요리</li>
</ul>
<div style="clear:both;height:0;overflow:hidden"><!-- --></div>
13년 전
지운아빠님 감사합니다. 늦게 봤습니다만 딱 원했던것입니다. 테이블로 쓰고 있었는데 정말 감사드립니다. 너무 잘됩니다.^^~
13년 전
음
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 130 | 20년 전 | 4016 | ||
| 129 | 20년 전 | 2954 | ||
| 128 | 20년 전 | 3695 | ||
| 127 | 20년 전 | 3533 | ||
| 126 | 20년 전 | 3787 | ||
| 125 | 20년 전 | 8606 | ||
| 124 | 20년 전 | 2610 | ||
| 123 | 20년 전 | 3762 | ||
| 122 | 20년 전 | 3219 | ||
| 121 | 20년 전 | 2621 | ||
| 120 | 20년 전 | 2685 | ||
| 119 | 20년 전 | 2595 | ||
| 118 | 20년 전 | 2871 | ||
| 117 |
 damoa.biz |
20년 전 | 3071 | |
| 116 | 20년 전 | 5335 | ||
| 115 | 20년 전 | 3937 | ||
| 114 | 20년 전 | 4986 | ||
| 113 | 20년 전 | 6228 | ||
| 112 | 21년 전 | 7334 | ||
| 111 | 21년 전 | 18447 | ||
| 110 | 21년 전 | 6887 | ||
| 109 | 21년 전 | 2896 | ||
| 108 | 21년 전 | 4152 | ||
| 107 |
prosper
|
21년 전 | 2512 | |
| 106 |
prosper
|
21년 전 | 4332 | |
| 105 |
아우겐나이스
|
21년 전 | 2930 | |
| 104 | 21년 전 | 2276 | ||
| 103 | 21년 전 | 2487 | ||
| 102 | 21년 전 | 2275 | ||
| 101 | 21년 전 | 2591 | ||
| 100 | 21년 전 | 1765 | ||
| 99 | 21년 전 | 1583 | ||
| 98 | 21년 전 | 1631 | ||
| 97 | 21년 전 | 2148 | ||
| 96 | 21년 전 | 1895 | ||
| 95 | 21년 전 | 2393 | ||
| 94 | 21년 전 | 3580 | ||
| 93 | 21년 전 | 1576 | ||
| 92 | 21년 전 | 1770 | ||
| 91 | 21년 전 | 3193 | ||
| 90 | 21년 전 | 2351 | ||
| 89 | 21년 전 | 3188 | ||
| 88 | 21년 전 | 2878 | ||
| 87 | 21년 전 | 3306 | ||
| 86 | 21년 전 | 5154 | ||
| 85 | 21년 전 | 2538 | ||
| 84 | 21년 전 | 4838 | ||
| 83 | 21년 전 | 2517 | ||
| 82 | 21년 전 | 3130 | ||
| 81 | 21년 전 | 7646 | ||
| 80 | 21년 전 | 3843 | ||
| 79 | 21년 전 | 3223 | ||
| 78 | 21년 전 | 4707 | ||
| 77 | 21년 전 | 2917 | ||
| 76 | 21년 전 | 6232 | ||
| 75 | 21년 전 | 4483 | ||
| 74 | 21년 전 | 5799 | ||
| 73 | 21년 전 | 3637 | ||
| 72 | 21년 전 | 5981 | ||
| 71 | 21년 전 | 3132 | ||
| 70 | 21년 전 | 2860 | ||
| 69 | 21년 전 | 2651 | ||
| 68 | 21년 전 | 2459 | ||
| 67 | 21년 전 | 2666 | ||
| 66 | 21년 전 | 2686 | ||
| 65 | 21년 전 | 3797 | ||
| 64 | 21년 전 | 2840 | ||
| 63 | 21년 전 | 2468 | ||
| 62 | 21년 전 | 2279 | ||
| 61 | 21년 전 | 3099 | ||
| 60 | 21년 전 | 3147 | ||
| 59 | 21년 전 | 2530 | ||
| 58 | 21년 전 | 2603 | ||
| 57 | 21년 전 | 2985 | ||
| 56 | 21년 전 | 2347 | ||
| 55 | 21년 전 | 2776 | ||
| 54 | 21년 전 | 2145 | ||
| 53 | 21년 전 | 2374 | ||
| 52 | 21년 전 | 2715 | ||
| 51 |
prosper
|
21년 전 | 2368 | |
| 50 |
prosper
|
21년 전 | 2184 | |
| 49 | 21년 전 | 2198 | ||
| 48 | 21년 전 | 2357 | ||
| 47 | 21년 전 | 1951 | ||
| 46 | 21년 전 | 1938 | ||
| 45 | 21년 전 | 2146 | ||
| 44 | 21년 전 | 2376 | ||
| 43 | 21년 전 | 4590 | ||
| 42 |
prosper
|
21년 전 | 2725 | |
| 41 |
prosper
|
21년 전 | 2127 | |
| 40 | 21년 전 | 2189 | ||
| 39 | 21년 전 | 2160 | ||
| 38 | 21년 전 | 2435 | ||
| 37 | 21년 전 | 2579 | ||
| 36 | 21년 전 | 1790 | ||
| 35 | 21년 전 | 4090 | ||
| 34 | 21년 전 | 3864 | ||
| 33 | 21년 전 | 3002 | ||
| 32 |
prosper
|
21년 전 | 2916 | |
| 31 | 21년 전 | 5303 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기