位置条 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 -->