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

이번 강좌에서는 각 메뉴 부분에 대한 이미지를 넣어보겠습니다.

메뉴 1부분을 추가시킨 소스코드입니다.

 

<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%>
메뉴2
  </td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td>
메뉴3
 </td>
</tr>
</table>

 

'메뉴1' 이란 글씨를 없애고 새로운 테이블을 하나 넣어주었습니다.

새로 추가된 테이블 역시 기본적인 구조이니 이해하는데 어려움이 없으시겠죠?

 

테이블에 링크되어있는 이미지들은 지난 강좌에서 알려드린 것 처럼 설명을 위해 절대경로로 되어 있습니다.

 

주소 : ex3.godo.co.kr

경로 : shop/skin/black/img/main/

파일명 : top_menu_login.gif , top_menu_join.gif , top_menu_today.gif

 

포토샵 등으로 직접 이미지를 만들어  FTP에 업로드 한 다음, 위와 같은 방법( 'http://주소/경로/파일명' )으로 이미지를 넣어주세요.

 

'메뉴1' 테이블을 추가한 후에 바로 그 위를 보시면 'align=right' 라는 부분도 추가가 되어 있습니다. 특별한 의미는 없습니다. center 또는 left로 사용하셔도 되지만 일반적으로 로그인메뉴는 오른쪽 끝에 있는 경우가 많아서 오른쪽 정렬을 해준 것 입니다.

 

실행 결과 입니다.

 

 

다음으로 '메뉴2' 부분을 디자인 해보겠습니다.

메뉴2 역시 메뉴1 과 마찬가지로 동일하게 디자인을 하신 후에 미리 ftp에 업로드를 해주시면 됩니다.

 

변경된 소스입니다.

 

 

<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>
메뉴3
 </td>
</tr>
</table>

 

전체적으로 추가되는 소스들이 점점 길어져서 어려워 보일수도 있지만 기본적인 테이블 태그 입니다.

'메뉴2' 라는 글씨를 없애고 테이블을 넣은 것이고, 추가되는 테이블 사이즈를 기본 <td> 와 </td>의 영역에 맟추어 제작을 했으므로 특별한 정렬은 필요없습니다. 추가되는 테이블이 메뉴1에서 추가된 것처럼 기본 영역 사이즈보다 더 작다면 align='right'를 이용하여 오른쪽 정렬을 해주는것이 깔끔합니다.

 

실행 결과 입니다.

 

 

메뉴2 의 위치에 만든 테이블에 처음 보는 input type 관련 태그가 있습니다.

이 태그 역시 어려운 부분이 아니니 추후 강좌나 오프라인 강좌에서 더욱 자세한 내용을 설명해 드리겠습니다.

 

목록보기