TABLE Element Part IV | Alignment with Image
Home > Document > HTML > 중급 과정 > Table Part IV

페이지 목차

8. Cell 속의 Image 정렬

이번에는 Cell 속의 image를 정렬 시키는 방법에 대해 알아 봅니다. 요즘 컴퓨터를 사면 대부분 Window XP를 탑재하다 보니 Web Page Design 에도 XP의 Interface가 많은 영향을 미치는 모양입니다. 왜 Window 상단 좌우측 모서리가 둥글게 된 거 말이져. 그러다 보니 아래와 같이 테이블도 둥근 모서리로 Design하는 경우가 유행이더군요...^^ 저기 아래의 둥근 모서리... 저거 다 1/4원 그림을 Cell 에 집어넣고 정렬 시킨 겁니다. 그러니까 아래와 같이 Table을 분할 한 다음 좌상과 우상에 해당 그림을 넣은거져... 한 번 미리 만들어 보고 싶으면 2번 째 아래의 좌우 상단의 조그만 테두리에 들어있는 그림 2개를 우클릭하고 다른 이름으로 그림 저장' 메뉴를 선택하고 Image 파일을 저장한 다음 Coding 해 보시져. 아래의 모서리가 둥근 테이블은 다음 페이지 내용을 미리 본 것입니다.

우클릭하고 '다른 이름으로 그림 저장'으로 저장하세요. 모서리가 둥근 테이블 우클릭하고 '다른 이름으로 그림 저장'으로 저장하세요.
  모서리가 둥글면 머 쩜 나은가?...^^ 난 별루든데...  
 


이제 Table border 값과 IMG border 값을 '1'로 주면 아래와 같이 모든게 적라나하게 드러나게 되져...

우클릭하고 '다른 이름으로 그림 저장'으로 저장하세요. 모서리가 둥근 테이블 우클릭하고 '다른 이름으로 그림 저장'으로 저장하세요.
  모서리가 둥글면 머 쩜 나은가?...^^ 난 별루든데...  
 

모서리가 둥근 테이블 Source 입력
<HTML>
    <HEAD>
        <TITLE>유행?... 그 것도 좋지...</TITLE>
    </HEAD>
    <BODY>
        <table align="center" border="0" cellpadding="0" cellspacing="0" 
        bgcolor="#99ccff" width="450">
            <tr height="25">
                <td valign="top" width="25">
                    <IMG src="../images/cleft1.gif" width="6" height="6">
                </td>
                <td align="center">모서리가 둥근 테이블</td>
                <td valign="top" align="right" width="25">
                    <IMG src="../images/cright1.gif" width="6" height="6">
                </td>
            </tr>
            <tr height="250">
                <td valign="top" width="25">&nbsp;</td>
                <td bgcolor="#efefef" align="center" style="border: 1px solid gray;">
                    모서리가 둥글면 머 쩜 나은가?...^^ 난 별루든데...
                </td>
                <td valign="top" width="25">&nbsp;</td>
            </tr>
            <tr height="25">
                <td colspan="3">&nbsp;</td>
            </tr>
        </table>
    </BODY>
</HTML>


그건 그렇고 이제 본격적으로 Cell 에 Image 넣는 방법에 대해서 생각해 보시져... Cell 에 Image를 넣을 때 고려해야 할 사항이 있는데 그건, 테이블을 그림 size에 맞출 것인지, 아니면 그림을 테이블 size에 맞출 것인지 하는 문제입니다. 우선 어떤 그림을 가지고 실습할 건지 알기 위해 아래의 그림이 들어간 테이블을 보시져...

 
  AA01.jpg AA02.jpg AA03.jpg AA04.jpg AA05.jpg
 
  AA06.jpg AA07.jpg AA08.jpg AA09.jpg AA10.jpg

위의 그림 파일들을 우클릭 후 '다른 이름으로 그림 저장' 을 선택해서 앞에서 만들었던 Myfolder/images 폴더에 저장하시져. 그리고 새 파일을 시작해서 Myfolder/html 폴더에 images_in_cell.html로 저장합니다. 그림 파일이름은 AA01.jpg ~ AA10.jpg 까지 10개의 Image 가 되겠습니다.

우선 위의 이미지 중에서 AA01.jpg(width:48px, height:66px)를 width:96px, height:132px 의 Cell 에 넣을 경우를 보져. 그러니까 면적이 4배가 커지는 셈이죠.

입력
<HTML>
    <HEAD>
        <TITLE>Cell 에 Image 넣기</TITLE>
    </HEAD>
    <BODY>
        <table border="1" align="center">
            <tr>
                <td><IMG src="../images/AA01.jpg"></td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
AA01.jpg

Source 입력란을 보면 <td><IMG src="../images/AA01.jpg"></td> 중에서 IMG Tag이나 TD Tag에 width나 height를 사용하지 않았다는 것을 볼 수 있는데, 이와 같이 TD 에 가로, 세로를 지정하지 않으면 Cell 안에 들어가는 내용물의 크기에 맞춰서 Cell 의 크기가 조절됩니다. 그리고 Table Tag 에 cellpadding, cellspacing을 주지 않았기 때문에 그림과 Cell 테두리 사이에 1pixel 의 padding이 생기게 되죠. 아래의 굵은 글씨 부분을 추가하고 브라우저로 출력해 보시져. 여기서 주의 할 점은 아래의 IMG Tag이 들어가는 Cell을 Coding 할 때 <td><IMG src="...."></td> 와 같이 줄을 바꾸지 말고 Coding 하세요. 아래의 입력란에서는 Tag의 위계를 보느라고 줄을 바꿨습니다.

입력
<HTML>
    <HEAD>
        <TITLE>Cell 에 Image 넣기</TITLE>
    </HEAD>
    <BODY>
        <table border="1" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td height="132" width="96">
                    <IMG src="../images/AA01.jpg" width="100%" height="100%">
                </td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
AA01.jpg

보는 바와 같이 그림과 Cell 사이의 padding이 없이 이미지가 Cell 에 정확하게 일치하게 됩니다. 물론 원래 면적(48 × 66 = 3168 pixel)의 4배(96 × 132 = 12672 pixel)가 되었으므로 그림의 선명도는 당연히 떨어지게 되죠.

이제 위에서 보여줬던 10개의 이미지 파일(AA01.jpg ~ AA10.jpg)을 정리해 보도록 하죠. 여러개의 그림을 테이블에 넣어서 정리할 때 유의해야 할 사항은 size가 각기 다른 이미지들을 어떻게 정렬시키느냐 하는 문제 입니다. 아래의 몇 가지 경우를 봅시다. Cell border가 있는 것과 없는 것을 비교해 가면서...



align="center" , valign="center"


align="center" , valign="center" , border="0"




align="center" , valign="bottom"

align="center" , valign="bottom" , border="0"




align="left" , valign="bottom"


align="left" , valign="bottom" , border="0"

정렬하는 방법은 앞 페이지의 Cell 속에서의 text 정렬에서 보았지만 나머지 6개의 경우가 더 있겠군요... 하여간 이렇게 몇 가지를 보았는데 여러분들은 어떤게 맘에 드시져?... 없습니까? 사람마다 취향이 다 틀리니까 꼭 어떤게 좋다고 할 수는 없지만 저는 개인적으로 align="left"(default) , valign="bottom" 이 맘에 든다고 치겠습니다. 여러분들도 모두 이게 맘에 든다 치고 이걸로 정렬해 봅시다. 그런데 한가지 문제가 있군요. 머 그리 큰 문제는 아니지만(큰 문젠가?) 좌측 하단으로 정렬시키고 보니 전체적으로 이미지들이 왼쪽과 아래쪽으로 쏠려 있군요. 이럴 때는 일종의 Trick을 사용하면 됩니다. 어떤 Trick 인가 하면 왼쪽에 일정 폭(width)을 가지는 Column을 하나 더 만들고 아래는 행(Row)을 하나 더 만드는거져. 무슨 말인가하면 지금 현재 2행 5열인 테이블을 3행 6열로 만들어서 왼쪽 열과 3번째 행은 &nbsp; 넣고 border를 '0'으로 하면 전체적인 그림 윤곽이 가운데로 쏠릴거라는 말입니다. 말이 필요가 없군요. 직접 해 봅시다. 그러니까...

align="left" , valign="bottom" , border="1"
 
 
 

이렇게 한다는 뜻입니다. 제일 처음에 나오는 10개의 그림이 들어간 테이블도 지금 보는 테이블 처럼 2행 6열로 위의 테이블과 같이 만든 다음 border값을 '0'으로 한 거죠. 그리고 1 번째 column(width="50")과 3 번째 row(height="40")는 내용을 넣지 않고 Escape 문자인 &nbsp;(non-breaking space)를 하나씩 넣었습니다.. 'Escape 문자' 기억 하고 있겠죠? 아래는 Source code 입력입니다.

입력
<HTML>
    <HEAD>
        <TITLE>Table Cell 속에서의 그림 정렬</TITLE>
    </HEAD>
    <BODY>
        <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
            <tr height="100" align="left" valign="bottom">
                <td width="50">&nbsp;</td>
                <td><IMG src="../images/AA01.jpg"></td>
                <td><IMG src="../images/AA02.jpg"></td>
                <td><IMG src="../images/AA03.jpg"></td>
                <td><IMG src="../images/AA04.jpg"></td>
                <td><IMG src="../images/AA05.jpg"></td>
            </tr>
            <tr height="100" align="left" valign="bottom">
                <td width="50">&nbsp;</td>
                <td><IMG src="../images/AA06.jpg"></td>
                <td><IMG src="../images/AA07.jpg"></td>
                <td><IMG src="../images/AA08.jpg"></td>
                <td><IMG src="../images/AA09.jpg"></td>
                <td><IMG src="../images/AA10.jpg"></td>
            </tr>
            <tr height="40">
                <td colspan="6">&nbsp;</td>
            </tr>
        </table>
    </BODY>
</HTML>
출력결과
Table Cell 속에서의 그림 정렬
 
 
 


위의 Source 중에서 새로 집어넣은 1열(column)의 width 50을 어떻게 계산 했는지 궁금하지 않습니까? 사실은 계산하지 않았습니다. 계산하지 않고 그냥 단번에 짐작으로 때려 맞춘거져...^^ 물론 틀릴적도 많지만 대개는 거의 비슷하게 맞춥니다. 아마 이런 걸 많이 다루어 봐서 그런 모양입니다. 이런 경우 일단은 어느 정도의 값을 주고 수정과 실행을 반복하면서 조정 하는 거랍니다. 이런 경험을 많이 하면 거의 비슷하게 또는 단번에 값을 알 수 있습니다. 즉, 저 정도 크기면 몇 pixel 정도 라는 게 눈에 익숙해 진거죠.


다음 페이지에서 계속...




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색