태그직접주입방식 과 internal방식 스타일 로 div와 테이블 박스 만들기

DIV 태그와 TABLE 태그의 스타일 정의로 테이블 만들기

 

이번 시간에는 지난 시간에 이어 스타일로 박스 만드는 법을 공부 해 봅니다.

지난 시간에 외부 스타일 시트와 내부 스타일 시트를 이용 한 스타일 적용에 대해 공부해 봤습니다.

스타일을 적용 하는 방식에는 external (외부스타일 시트)방식 과 internal (내부스타일 시트)방식 그리고 태그직접주입 방식 이렇게 크게 나눌수 있습니다.

이번 시간에는 태그 직접 주입 방식을 이용해서 테이블 에 스타일을 적용 해보고 또 내부 스타일 시트방식으로div에 스타일을 적용 해서 박스를 꾸미는 방법에 대해 공부해 보도록 합니다.

예제1번)

 

태그에 직접 스타일 주입 방식으로 TABLE 태그로 박스를 만들어 보도록 합니다.

직접입력방식으로 코딩을 한 소스 입니다.

<TABLE style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; height:150px; cellSpacing:5px; cellPadding:0; width:300px; text-align:center; boder-collapse:collapse;">
<TBODY>
<TR>
<TD style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; MARGIN: 5px; BORDER-LEFT: red 1px solid; border-box: " height=150 width=150 align=center>1-1</TD>
<TD style="BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 5px; BORDER-LEFT: red 1px solid; PADDING-RIGHT: 0px; border-box: " height=150 width=150 align=center>1-2 </TD>

</TR>

</TBODY>

</TABLE>

 

 

1번 결과)

TABLE태그에 직접스타일을 준 박스  모양

 

 

1-1

1-2

이번에는 위 코딩방식을 스타일 시트로 제어 하여 만들어 보도록 합니다.

아래 소스는 1번 테이블태그에 내부스타일시트 방식스타일을 준 박스 소스 입니다.

예제1-1)내부 스타일시트  소스

<style>
TABLE{ BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; height:150px; cellSpacing:5px; cellPadding:0; width:300px; text-align:center; boder-collapse:collapse;}
table .tda{BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; MARGIN: 5px; BORDER-LEFT: red 1px solid; height:150px; width:150px; text-align:center;}
table .tdb {BORDER-TOP: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-BOTTOM: red 1px solid; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 5px; BORDER-LEFT: red 1px solid; PADDING-RIGHT: 0px; height:150px; width:150px; text-align:center;}

</style>

아래는 코딩한 태그 소스 입니다.

 <table>

<tbody>

<tr>

<td class="tda">1-1 </td>

<td class="tdb">1-2 </td>

<tr>

</tbody>

</table>

1-1결과)

내부 스타일시트에 테이블 스타일을 주어 제어 한 박스 모양

1-1	1-2

두가지 방식 다 똑 같은 결과를 얻을수가  있다는걸 확인 했습니다.

직접입력 방식은 간단한 테이블 만들기에는 편리하지만 관리가 힘이 듭니다.

반면 스타일시트를 이용하면 다양하고 복잡한 테이블을 만들고 관리하기가 용이한 장점이 있습니다.

이렇게 한번 해보세요
박스크기와 라인 굵기 여백 이나 배경 등을 태그 내에 직접스타일을 주어 고쳐 보고 원격 시트를 링크해 고쳐 보도록 해 봅니다.

먼저 직접 태그 주입 방식으로 고치는 공부를 먼저 해봅시다.

 

table 코드에서 높이를 결정 하는 속성 엘리먼트인  height 의 값을  원하는 값으로 바꾸어 줍니다.

이부분을 height="150px"를 원하는 크기로 고치면 됩니다.

가로크기를 고치려면 넓이를 결정 하는 속성 엘리먼트 width의 값을 고쳐 주면 됩니다.

width="300px"이부분을 원하는 치수대로 고치면 됩니다.

 
border 는 테이블 선을 결정 짓는 엘리먼트 입니다.

 

위의경우 1픽셀 실선에 컬러는 레드를 직접 태그 주입 방식으로 스타일을 준 상태 입니다.

 

align="center" cellpadding="0px" cellspacing="5px"  align 콘텐츠의 위치를 결정짓는 엘리먼트 입니다.

속성값으로는left 왼쪽 정렬right 오른쪽 정렬center 중앙에 정렬 vetical-align 은 수직선상의 위치를 결정 하는 엘리먼트로

속성값은 vetical-align: top 상단정렬 vetical-align: middle 중간 정렬 vetical-align:bottom 하단정렬의 값을 가집니다.

여백 을 결정 하는 속성 엘리먼트 로는cellpadding 콘텐츠와 셀의 여백을 결정 하며 테이블 태그에만 존재 하며 위치 엘리먼트로 상하좌우위치를 타켓팅해서 속성값을 줄수가 있습니다.

cellspacing속성은 테이블 태그에만 위치 하는 속성 엘리먼트로 셀과 셀의 간격을 결정 짓는 엘리 먼트 입니다.

 

 

예제 2번) 

 

internal 스타일 방식으로 이번엔 DIV 태그로 박스 를 만들어 보도록 합니다.

 

스타일 시트 입니다.

 

<STYLE>
body{margin:0px; padding:0px;}
div#gambox{width:510px; height:150px; border:1px solid silver;}
#gambox ul{display:ilnline-block; }
#gambox ul li{text-align:left;  font-size:14px; }
{clear:both; }
div#sagaboxwarp{width:600px; height:150px;}
#saga{width:270px; height:100%; position:relative; display:ilnline-block;}
#sagaboxwarp
.sagabox1,.sagabox2{width:250px; height:136px; text-align:center;
border:2px solid red;}
 #sagaboxwarp
 .sagabox1{margin-top:0px; display:ilnline-block; float:left;}
 .sagabox2{margin:5px; display:ilnline-block; margin-left:260px; fioat:right;}
.sagabox1 ul{display:ilnline-block; }
.sagabox1 ul li{text-align:left;  font-size:14px; }
</STYLE> 

  

2번 결과)

DIV태그 스타일  목록 박스

 

• 목록 내용
• 목록 내용
• 목록 내용
• 목록 내용

DIV 중첩으로 여러칸의 테이블 만들기

 

이번에는 DIV 안에 DIV를 넣어 DIV를 중첩 사용해 여러 칸을 가진 테이블을 만들어 보도록 하겠습니다.

 

3번 예제)

internal 스타일 방식의 div 태그로  만든 여러 칸을 가진 박스 모양 입니다.

 

STYLE소스 입니다.

 

<STYLE>

.wrap{position:relative; left:0;}

 

#dga{display:block; margin-top:10px; margin-bottom:10px; width:100%; height:126px; border-top:1px solid red; border-bottom:1px solid red; border-left:1px solid red; border-right:1px solid red; text-align:center; padding:2px; background:rgb(230,230,0); position:relative; overflow:hidden;}

 

.dgaa{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px;; background:rgb(230,0,0); position:absolute; top:0; left:0; overflow:hidden;}

.dgab{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(230,0,0); position:absolute; top:0; left:25%;overflow:hidden;}

.dgac{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(230,0,0); position:absolute; top:0; left:50%;overflow:hidden;}

.dgad{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(230,0,0); position:absolute; top:0; left:75%;overflow:hidden;}

 

 .dgba{display:inline-block; float:left;margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:30px; left:0; overflow:hidden;}

.dgbb{display:inline-block; float:left;margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:30px; left:25%; overflow:hidden;}

.dgbc{display:inline-block; float:left;margin-right:1px; width:25%; height:30px border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:30px; left:50%; overflow:hidden;}

.dgbd{display:inline-block; float:left;margin-right:1px; width:25%; height:30px border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:30px; left:75%; overflow:hidden;}

 

 .dgca{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:60px; left:0;overflow:hidden;}

.dgcb{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:60px; left:25%;overflow:hidden;}

.dgcc{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:60px; left:50%;overflow:hidden;}

.dgcd{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,230,0); position:absolute; top:60px; left:75%;overflow:hidden;}

 

 .dgda{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,0,230); position:absolute; top:90px; left:0;overflow:hidden;}

.dgdb{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,0,230); position:absolute; top:90px; left:25%;overflow:hidden;}

.dgdc{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,0,230); position:absolute; top:90px; left:50%;overflow:hidden;}

.dgdd{display:inline-block; float:left; margin-right:1px; width:25%; height:30px; border-top:1px solid gray; border-bottom:1px solid gray; border-left:1px solid gray; border-right:1px solid gray; text-align:center; padding-top:2px; background:rgb(0,0,230); position:absolute; top:90px; left:75%;overflow:hidden;} 
</STYLE>

코딩 소스 입니다.

 

 

<DIV id="dga">

<DIV class="wrap">

<DIV class="dgaa">1</DIV>

<DIV class="dgab">2</DIV>

<DIV class="dgac">3</DIV>

<DIV class="dgad">4</DIV>

</DIV>

<DIV class="wrap">

<DIV class="dgba">1</DIV>

<DIV class="dgbb">2</DIV>

<DIV class="dgbc">3</DIV>

<DIV class="dgbd">4</DIV>

</DIV>

<DIV class="wrap">

<DIV class="dgca">1</DIV>

<DIV class="dgcb">2</DIV>

<DIV class="dgcc">3</DIV>

<DIV class="dgcd">4</DIV>

</DIV>

<DIV class="wrap">

<DIV class="dgda">1</DIV>

<DIV class="dgdb">2</DIV>

<DIV class="dgdc">3</DIV>

<DIV class="dgdd">4</DIV>

</DIV>

</DIV>

예제 3번 결과)

DIV 중첩 스타일

 

1

2

3

4

1

2

3

4

1

2

3

4

1

2

3

4

 

예제4번) 

internal 스타일 방식의 div 태그로  만든 목록 상자와 박스 모양 입니다.

 

스타일 소스

<STYLE>
body{margin:0px; padding:0px;}
div#gambox{width:510px; height:150px; border:1px solid silver;}
#gambox ul{display:ilnline-block; }
#gambox ul li{text-align:left;  font-size:14px; }
{clear:both; }
div#sagaboxwarp{width:600px; height:150px;}
#saga{width:270px; height:100%; position:relative; display:ilnline-block;}
#sagaboxwarp
.sagabox1,.sagabox2{width:250px; height:136px; text-align:center;
border:2px solid red;}
 #sagaboxwarp
 .sagabox1{margin-top:0px; display:ilnline-block; float:left;}
 .sagabox2{margin:5px; display:ilnline-block; margin-left:260px; fioat:right;}
.sagabox1 ul{display:ilnline-block; }
.sagabox1 ul li{text-align:left;  font-size:14px; }
</STYLE>

 

 

<DIV id=gambox>
<UL>
<LI><SPAN style="FONT-SIZE: 14pt">목록 내용</SPAN></LI>
<LI><SPAN style="FONT-SIZE: 14pt">목록 내용</SPAN></LI>
<LI><SPAN style="FONT-SIZE: 14pt">목록 내용</SPAN></LI>
<LI><SPAN style="FONT-SIZE: 14pt">목록 내용</SPAN></LI></UL></DIV>
<DIV></DIV> 

 

 

 

4번결과)

목록박스 와 박스

 

• 목록 내용
• 목록 내용
• 목록 내용
• 목록 내용

 

 

div 태그역시 테이블과 같은 공간 확보 요소를 가진 블록 레벨 엘리먼트 이며 테이블에 위치하는 속성 엘리먼트들을

대부분 같이 사용 할수 있습니다 width height border align vetical-align 여백 지정 엘리먼트로는 padding 콘텐츠와 테그 라인 과의 여백을 결정 지으며 위치 요소 엘리먼트로 상하 좌우 타켓팅 속성값을 줄수 있습니다

margin div 태그의 외부 여백을 결정짓는엘리먼트이며 역시 상하좌우 위치를 타켓팅 해 속성값을 지정 할수 있습니다.

 

직접 주입 스타일 방식 으로 여러가지 테이블과 메뉴보드를 만들어 보고

좀 익숙 해지게 되면 이번엔 내부의 시트에 링크를 걸어 table태그 나 div태그에 스타일을 주는 방법도 익히도록 합니다.
아래는 div 태그에 원격 링크로 스타일을 주고 박스를 꾸며 본 스타일 시트 부분 소스 입니다.

 

2번 박스 와 4번 박스 공동 스타일 시트

 

<style>
body{margin:0px; padding:0px;}
div#gambox{width:510px; height:150px; border:1px solid silver;}
#gambox ul{display:ilnline-block; }
#gambox ul li{text-align:left;  font-size:14px; }
{clear:both; }
div#sagaboxwarp{width:600px; height:150px;}
#saga{width:270px; height:100%; position:relative; display:ilnline-block;}
#sagaboxwarp .sagabox1,.sagabox2{width:250px; height:136px; text-align:center; border:2px solid red;}
 #sagaboxwarp  .sagabox1{margin-top:0px; display:ilnline-block; float:left;}
 .sagabox2{margin:5px; display:ilnline-block; margin-left:260px; fioat:right;}
.sagabox1 ul{display:ilnline-block; }
.sagabox1 ul li{text-align:left;  font-size:14px; }
</style>

선택자와 속성자

스타일시트를 이용 하는 원격 스타일은 태그내에 직접 스타일을 주지 않습니다.

Id선택자 를 결정 하는 부호는# 이며 문서 내 의 id 네임 을 가진 태그에 스타일을 주게 됩니다.

class선택자를 결정 하는 부호는 .마침표 이며 문서내의 class 클래스 명을 가진 태그에 스타일을 주게 됩니다.

스타일이란? 지난글 보기

스타일을 정의 하는 선택자의 기본 구조를 보면 선택자{속성:속성값;} 이런 형태를 가지게 되는데요 여러개의 속성과 속성값을 함께 줄수 있습니다.

선택자가 스타일을 입힐 태그를 먼저 선언 해주게 되며 # . > , *이렇게 몇가지 부호와 함께 올수도 있고 태그 단독으로 올수도 있습니다.

예를 들어 #gamgabox{width:300px; height:200px; border:1px lime solid;}위와같이 정의 한  스타일을 해석하면id이름이 gamgabox 라는 태그에 넓이 300픽셀 높이 200픽셀 을 주고 굵기1픽셀의 실선으로 라임 컬러로 사각형의 모양을 만들어라는 것이죠

이때 gamgabox 가 선택자가 되는 것이죠

만약 이렇게 .마침표와 함께 선택을 해주게 되면 .gamgabox{width:300px; height:200px; border:1px lime solid;} gamgabox 라는 class 명 을 가진 태그에 넓이 300픽셀 높이 200픽셀 을 주고 굵기1픽셀의 실선으로 라임 컬러로사각형의 모양을 만들어라는 것이죠

또한 여러개의 id 나 클래스에 스타일을 한꺼번에 똑같이 줄수도 있는데 그룹 선택자 라고 하며 이때는 선택자 와 선택자 사이에 , 쉼표로 구분 해 주게 되죠

이런식이 되겠죠 #gamgabox, #gulbox, .gajibox{width:300px; height:200px; border:1px blue solid;} #gamabox,(gamgabox라는 이름의 id 태그)#gulbox,(gulbox라는 이름의 id 태그) .gajibox( gajibox라는 이름의 class 태그)라는 이름과 클래스를 가진 태그들에 넓이 300픽셀 높이 200픽셀 을 주고 굵기1픽셀의 실선으로 blue 컬러로 사각형의 모양을 만들어라는 것이죠

이때 gamabox gulbox gajibox가 선택자가 되는 것이죠

이때 # 와 함께 오는 선택자를 가리켜  #id 네임선택자라고 하며 이렇게 .마침표와 함께 선택을 하는 것을.class 클래스선택자라고 합니다.

> 이런 꺽쇠우측에 오는 선택자를 가리켜 하위선택자 또는 자식선택자라고 합니다. 보통 메뉴박스를 꾸밀때 많이 쓰게 되며 이런 모습이 됩니다.

#menu>ul>ul{width:100px; height:50px; border:1px lime solid;} menu라는 네임 의 박스 안에 서브메뉴박스를 넓이 100픽셀 높이50픽셀 1픽셀굵기의 푸른 실선으로 네모박스를 만들어 주라는 것이 되겠죠 *이 부호는 선택자 전체에 속성과 속성값으로 스타일을 줄때 사용 합니다. 전체선택자 라고 하며 예를 들어 *p{margin:5px;} 이런식으로 p태그에 외부 간격을 결정 해 주게 되면 스타일이 미치는 페이지의 모든 p태그에 이 스타일이 유효 하게 적용 됩니다.다음으로 선택자가 결정 되고나면 스타일값을 주는 부분을 구성 해주어야 하며 모양은 중괄호{로 시작 하며 중괄호}로 마치게 됩니다.
속성자 라고 하며 괄호내에 속성과 속성값을 주고 각 엘리먼트의 속성 엘리먼트 다음에는 콜론부호:를 주고 속성값이 끝나는 자리에는 세미콜론;을 줘서 구분과 마침을 표시 해줍니다.

이런 모습이 됩니다.선택자{속성:속성값; . . . . n속성:n속성값;} 괄호속에 기록되는 속성과 속성값은 선택자에 스타일을 입히는 결과를 주게 됩니다.

예를 들면 이런 모양으로 #menu>ul>ul{width:100px; height:50px; border:1px lime solid;}선택자와 속성자가 만들어 졌다면

menu 이름을 가진 박스 안에 서브메뉴박스를 넓이 100픽셀 높이50픽셀 1픽셀굵기의 푸른 실선으로 네모박스를 만들어 주라는 것이 되겠죠 이때의 선택자는 서브메뉴 박스를 결정 하는 menu이름의 박스인 하위 엘리 먼트인 순서 없는 목록태그 ul이 되고 속성은 width height  border solid 속성이 되고 속성값은 넓이(100픽셀) 높이(50 픽셀 )선굵기(1픽셀) 컬러 (blue) 가 속성값이 되는 것입니다.

아래는 바디 부의 div 태그와 하위 ul 목록 태그에 스타일을 주고 만든 2번 목록 박스와 3번 목록박스와 혼합 박스의 태그소스 입니다.

 

<div id="gombox">
<ul>
<li>목록 내용</li>
<li>목록 내용</li>
<li>목록 내용</li>
<li>목록 내용</li>
</ul>
</div>
<br />
<div id="sagaboxwarp">
; <div id="saga">
<div class="sagabox1">
<ul>
<li>목록 내용</li>
<li>목록 내용</li>
<li>목록 내용</li>
<li>목록 내용</li>
</ul>
</div>
<div class="sagabox2">
</div> </div></div>
<div style="clear:both;"> </div>

 

 

위치 속성엘리 먼트relative와 absolute

 

그런데 문제가 하나 발생 했습니다.

블로그에는 화면 설정 서비스를 제공해서 포스팅의 최신글을 순서로 화면에 원하는 갯수만큼 띄울수 있도록 설정 하는 서비스를 제공 하고 있는데요

예를 들면 블로그 관리자가 5개의 글을 화면에 한꺼번에 노출 하고 싶다고 할때 관리 모드>에서 화면설정>에서 화면 출력에 들어 가면 원하는 설정을 할수 있습니다.

제가 그렇게 화면에 5개의 글과 목록이 떠도록 설정을 한후 검정을 한 결과 하나만 출력 할때는 정상 적인 div 박스가 5개 글의 화면 출력후에는 위치를 완전히 이탈 해 버린것을 확인 할수가 있었는데요

아마 상위의 시트에 영향을 받은것 같았 습니다.

그래서 에디터 상단부에 스타일로 0점 처리를 해보았지만 먹히지를 않아 이번엔 다른 방법으로 위치 조정을 해 보았습니다.

상위 엘리먼트의 위치를 기준으로 정렬 하는 방법 인데요 속성 엘리 먼트는 absolute 라는 엘리먼트 입니다.

아래 에 따로 값을 주어 구분 하고 소스를 첨부 합니다.

아래는internal 스타일 방식의 div 태그로  만든 박스로absolute 로 변경후의 4번 목록박스 와 박스 모습 입니다.

• 목록 내용
• 목록 내용
• 목록 내용
• 목록 내용

사과박스

이렇게absolute 로 바로 상위의 엘리 먼트에 고정 시켜 주니까 글 목록의 갯수에도 상관 없이 바로 위의relative 엘리먼트 의 값에 고정된 모습을 볼수가 있죠 이때 주의 할점은 class명을 바꿔 져야 위의 개체에 서로영향을 끼치지 않게 되겠죠

아래는 엘리먼트 변경후의 4번 박스 스타일 시트 와 태그 소스 입니다

<style>
body{margin:0px; padding:0px;}
div#sagaboxwarp{width:600px; height:150px;}
#saga{width:270px; height:100%; position:relative; display:ilnline-block;}
#sagaboxwarp .sagabox1,.sagabox3{width:250px; height:136px; text-align:center; border:2px solid red;}
#sagaboxwarp  .sagabox1{margin-top:0px; display:ilnline-block; float:left;}
.sagabox3{absolute; top:0px; left:260px;}
.sagabox1 ul{display:ilnline-block; }
.sagabox1 ul li{text-align:left;  font-size:14px; }
</style>

바디 부 태그소스 입니다.

 

<div id="sagaboxwarp">
<div id="saga">
<div class="sagabox1">
<ul>
<li>목록 내용</li>

 

<li>목록 내용</li>

 

<li>목록 내용</li>

 

<li>목록 내용</li>
</ul>
</div>
<div class="sagabox2">
</div>
</div>
</div>
<div style="clear:both;"></div>