位置条 2 的CSS

1. 설계2. 디자인3. 마크업4. 개발

1. 설계2. 디자인 디자인 디자인3. 마크업4. 개발

1. 설계2. 디자인 디자인3. 마크업 마크업 마크업

CSS Code

1/* UI Object */

2.process{overflow:hidden;border:1px solid #d5d5d5;background:#f8f8f8}

3.process table{width:100%;height:100%;border:0}

4.process table caption,.process table th{display:none}

5.process table td{height:100%;padding:1px 40px 0 5px;border:0;background:url(img/bg_process_arr.gif) no-repeat 100% 50%;font-family:'돋움',dotum;font-size:12px;font-weight:bold;line-height:16px;text-align:center;white-space:nowrap}

6.process table td span{display:block;margin-top:4px;font-weight:normal;color:#f86f41}

7.process table td.last{padding-right:20px;background:none}

8/* //UI Object */

HTML Code

view source

print?

01<!-- UI Object -->

02<div class="process" style="height:30px">

03    <table cellspacing="0" border="1">

04    <caption>진행과정</caption>

05    <tbody>

06    <tr>

07    <th scope="row">프로젝트 1</th>

08    <td>1. 설계</td>

09    <td>2. 디자인</td>

10    <td>3. 마크업</td>

11    <td class="last">4. 개발</td>

12    </tr>

13    </tbody>

14    </table>

15</div>

16<br>

17<div class="process" style="height:50px">

18    <table cellspacing="0" border="1">

19    <caption>진행과정</caption>

20    <tbody>

21    <tr>

22    <th scope="row">프로젝트 1</th>

23    <td>1. 설계</td>

24    <td>2. 디자인 디자인 디자인</td>

25    <td>3. 마크업</td>

26    <td class="last">4. 개발</td>

27    </tr>

28    </tbody>

29    </table>

30</div>

31<br>

32<div class="process" style="height:100px">

33    <table cellspacing="0" border="1">

34    <caption>진행과정</caption>

35    <tbody>

36    <tr>

37    <th scope="row">프로젝트 1</th>

38    <td>1. 설계</td>

39    <td>2. 디자인 디자인</td>

40    <td class="last">3. 마크업 마크업 마크업</td>

41    </tr>

42    </tbody>

43    </table>

44</div>

45<!-- //UI Object -->