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

이제 마지막 '메뉴3' 부분에 디자인을 넣어보겠습니다.

 

<table cellpadding=0 cellspacing=0  border="3" bordercolor="green" width="900">
<tr>
 <td>
 <table cellpadding=0 cellspacing=0 border="3" bordercolor="pink" width="900">
 <tr>
  <td rowspan="2" width=199 nowrap align="center">
   <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_logo.gif">
  </td>
  <td align="right">

   <TABLE cellpadding=0 cellspacing=0 border=0>
    <TR>
    
     <TD><img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_login.gif"></TD>
     <td><img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_join.gif"></td>
     <td><img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_today.gif"></td>
    </TR>
   </TABLE>

  </td>
 </tr>
 <tr>
  <td width=100%>

 

 

  <table cellpadding=0 cellspacing=0>
  <tr>
   <td>

      <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_sub_event.gif">

   </td>
   <td>

      <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_sub_brand.gif">

   </td>
   <td>

      <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_sub_best.gif">

   </td>
   <td>

      <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_sub_recom.gif">

   </td>
   <td><img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_search_icon.gif"></td>
   <td><input name=sword type=text class=line style="width:100" value="" required label="검색어"></td>
   <td>

   <input type=image src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_search_bu_go.gif">

   </td>
   <td>

     <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_search_bu_detail.gif">

   </td>
  </tr>
  </table>

 

 

  </td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td>

 

 <table cellpadding=0 cellspacing=0>
 <tr>
  <td background="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_bg.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_cart.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_order.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_mypage.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_community.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_center.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_company.gif">
  </td>
 </tr>
 </table>

 

 </td>
</tr>
</table>

 

파란색 글씨가 '메뉴3' 부분에 새로 추가된 테이블입니다.

 

<td background="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_bg.gif">

위의 태그는 현재 속해있는 <tr><td>위치의 배경이미지를 지정한 것입니다

해당 '주소/경로/파일명'의 이미지가 새로 추가된  테이블의  배경이미지로 지정되었습니다.

만약 이 백그라운드 부분을 삭제한다면 먼가 어색해지는 느낌이 들죠?

 

 

어느정도 상단 부분처럼 디자인이 됬지만 먼가 어색합니다.

이 부분을 새로 추가된 테이블 소스 부분을 약간 수정하여 좀 더 깔끔하게 만들어 보겠습니다.

 

추가된 메뉴3 부분의 바로 위 소스를 아래와 같이 변경해 보세요.


 </table>
 </td>
</tr>
<tr>
  <td bgcolor="black" align="right">

 <table cellpadding=0 cellspacing=0 >
 <tr>
  <td background="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_bg.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_cart.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_order.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_mypage.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_community.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_center.gif">
  <img src="http://ex3.godo.co.kr/shop/skin/black/img/main/top_menu_main_company.gif">
  </td>
 </tr>
 </table>

 </td>
</tr>

 

bgcolor 와 align 으로 해당 줄과 열의 정렬과 배경색을 지정해준 것만으로 전체적인 상단 디자인이 정리가 되었습니다.

 

그리고 마지막으로 소스의 가장 상단부분에 있는

border=3,bordercolor=green, border=3,bordercolor=pink 부분을 삭제하시고 실행해 보시면 아래와 같은 결과가 나오게 됩니다.

 

 

다음 시간에는 고급 강좌로 위에 제작한 디자인을 실제 이나무 솔루션에 적용시켜 보겠습니다.

목록보기