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

지난 강좌에서 기본적인 테이블을 이용해 각 영역을 나누어 표시했습니다.

이번에는 그 영역에 각각의 컨텐츠를 넣어보겠습니다.

먼저 아래의 소스를 복사해서 붙여넣기 하세요.

(여건이 된다면 직접 코딩을 해보는 것도 좋습니다.)

 

<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>
메뉴1
  </td>
 </tr>
 <tr>
  <td width=100%>
메뉴2
  </td>
 </tr>
 </table>

 

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

 

파란색이 추가된 내용입니다.

 

만들고자 하는 상단디자인의 width 값이 900이 되어야 하므로 미리 지정을 하고, <img> 태그를 사용하여 기존의 '로고' 부분에 직접 만들어놓은 로고의 파일주소를 적어줍니다. (해당 로고는 "관리자모드 -> web ftp 이미지관리" 에 미리 업로드합니다.)

 

('주소/경로명/파일명' 의 형태는 절대경로이고, '경로명/파일명'만 있다면 상대경로입니다. 나중에 쇼핑몰의 주소가 변경될 가능성도 있으므로 상대경로를 사용하는 것이 좋습니다. 이 강좌에서는 외부링크밖에 사용을 못하여 절대경로를 사용하고 있습니다.)

 

로고부분에 가서 마우스 오른쪽 클릭후 '속성'을 보게 되면 파일을 업로드한 주소와 경로 그리고 파일명이 보이게됩니다.

'http://ex3.godo.co.kr' ftp 주소에

'/shop/skin/black/img/main/' 경로로 이동하여

'top_logo.gif' 라는 파일명으로 업로드를 하고 사용했습니다.

 

HTML 강좌를 보시는 분들도 직접 본인만의 로고를 만드신 후에 업로드 해보시기 바랍니다.

 

ftp가 없는것이 문제가 된다면, 각종 갤러리 게시판에 이미지 업로드하시고 등록하신 후에 내용보기를 하면 업로드된 이미지가 보이시겠죠?

그 이미지에 마우스 오른쪽 클릭 -> 속성 을 클릭하면  이미지의 주소,경로,파일명을 확인할 수가 있습니다 (파일명은 바뀌는 경우가 있습니다.)

 

이미지를 만들 줄 모른다면 본인의 마음에 드는 로고가 있는 싸이트에 가셔서 역시 마우스 오른쪽 클릭 -> 속성을 보시면 주소, 경로, 파일명을 확인할수 있습니다.

(이것은 불펌입니다. 교육용으로만 본인의 컴퓨터 파일에서 사용해야 합니다.)

 

 

다음으로 align='center' 부분은 나름대로 로고의 안정감을 위해 속해있는 위치에서 가운데에 보이도록 설정한 것입니다.

로고를 넣고 aling 이외에 valign도 이용하여 알맞은 위치에 정렬시키세요.

로고의 사이즈가 현재 테이블의 비율과 맞지 않는다면 이미지 태그에서 width와 height를 적절히 넣어주시면 됩니다.

 

참고로 테이블 전체의 배경색이었던 'bgcolor=green' 과 'bgcolor='yellow'는 삭제하였습니다.

 

 실행 결과입니다.

 

처음 보는 'cellpadding' 와 'cellspacing' 에 대해 간단히 설명을 드리겠습니다.

 

cellpadding

    cellpadding 속성은 셀 테두리선과 입력된 내용 사이의 여백을 조절한다. cellpadding 속성을 지정해 주지 않을 경우 셀의 내용이 셀의 테두리선에 바짝 붙어서 표시되는데 적절하게 cellpadding 속성을 설정해 주면 훨씬 깔끔한 표를 유지할 수 있다.

 

cellspacing

    여러 셀로 구성된 표에서 셀과 셀 사이를  조금 여유있게 띄어야 할 경우가 있는데 이경우 cellspacing 속성을 사용한다. cellpadding 이 셀의 안쪽 여백을 조절하는 속성이라면 cellspacing은  셀의 바깥여백이라고 생각하면 된다. cellspacing 속성을 사용하지 않을경우 cellspacing = "0" 으로 인식하여 셀과 셀사이에 여백이 생기지 않게된다.

 

한마디로 새로 추가될 테이블에 여백이 생겨서 지저분하게 보이는것을 방지하기 위한 태그로서 HTML 테이블 태그에서 무척 많이 사용하는 태그입니다.

 

다음 강좌에서는 각 메뉴부분을 하나씩 넣어보겠습니다.

 

 

 

목록보기