• 메인홈으로
  • 전체메뉴 보기
  • 이달의 교육
  • 아카데미 교육
  • 창업스쿨
  • 1:1 방문컨설팅
  • 지역별교육&파트너
  • 무료 스튜디오
  • 쇼핑몰 자격증
  • 맨위로
상단디자인 만들기 ① 2007.02.15

지난번 기초강좌에서 기본적인 태그들을 설명했습니다.

설명했던 내용을 기본으로 이나무에 적용하는 방법을 설명하겠습니다.

 

<table bgcolor="blue" border="3" bordercolor="green">
<tr>
 <td>

 

테이블이 들어갈곳


 </td>
</tr>
<tr>
 <td>
메뉴3
 </td>
</tr>
</table>


 

위의 내용은 이해가 되시죠?

 

테이블을 하나 만든 것이고,

bgcolor="blue" bordercolor="green" border="3" 부분은 실제로는 필요가 엇으나

테이블이 어떻게 나뉘고 적용이되는지 결과물을 보기가 편하므로 임의로 넣어놓은것입니다.

 

한글로 해석하면 테이블의 바탕화면을 'blue' 테이블 영역 둘레를 '3'픽셀로 둘레의 색깔을 'green'으로 지정한 것입니다 실행 결과는 아래와 같습니다.

 

 

 

전체적으로 블루 배경에 녹색의 테두리가 있는 테이블이 하나 생성되었습니다.

여기서 '테이블이 들어갈곳' 에 테이블을 하너 더 만들어 보겠습니다.

 

 

<table bgcolor="blue" border="3" bordercolor="green">
<tr>
 <td>

 

 <table bgcolor="yellow" border="3" bordercolor="pink">

 <tr>
  <td rowspan=2 width=199 nowrap>
로고
  </td>
  <td align=right>
메뉴1
  </td>
 </tr>
 <tr>
  <td width=100%>
메뉴2
  </td>
 </tr>
 </table>

 

 </td>
</tr>
<tr>
 <td>
메뉴3
 </td>
</tr>
</table>

 

실행 결과입니다.

 

 

새로 추가된 테이블에 처음보는 태그가 2개 있습니다

'rowspan'과 'nowrap' 에 대해 간단히 설명드리면..

nowrap는 실제 지정되 있는 테이블 사이즈만큼의 공간을 사용하겠다는 태그입니다.

nowrap를 삭제하고 다시 저장후에 실행해보시면 실제 witth값이 199 만큼 사용하는것이 아니라 '로고'라는 글자가 보이는곳 만큼 줄어들어서 실행 됩니다. 이것을 방지하기위해 nowrap라는 태그를 사용합니다.

 

그리고 rowspan=2 는 행(tr)을 2개 사용하겠다는 뜻입니다.

노란색 부분을 보면 '로고' 라는곳은 혼자서 왼쪽의 칸을 사용하고,

오른쪽은 '메뉴1'과 '메뉴2'는 핑크색 칸으로 2층으로 나뉘어져 사용하고 태그를 보시면 <tr></tr> 부분이 하나가 더 적게 되어있습니다.

rowspan으로 오른쪽에 2층으로 되어있는 부분을 한번에 사용하겠다는 태그로 이해하시면 됩니다

nowrap와 마찬가지로 해당 태그 부분을 삭제하고 실행해 보시면 태그가 있을경우와 없을경우의 차이점이 확인됩니다.

 

목록보기