TABLE Element Part V | Inline Table

Inline Table이란 Cell 속에 Table이 들어가 있는 것을 말합니다. 이런 방법은 실제적으로 많이 사용되고 있습니다. Cell 속에 Table이 들어간다... 아마 이해가 잘 가지 않을 겁니다. 그래서 말로 설명하기 보다는 아래와 같은 sample을 보는게 좋겠군요. 아래의 예를 보시져.

왜 이런 짓을 할까요? 지금 야후 코리아에 한 번 가 보시져. 왼쪽의 검색하는 부분과 오른쪽의 뉴스 부분으로 좌우측이 나뉘어져 있습니다. 자세히 들여다 보면 좌측과 우측의 행(row)들의 수평 위치가 일치하지 않는 부분들이 있져? 그건 위의 테이블 처럼 전체 테이블을 만들고 전체 테이블의 Cell 속에 Inline Table을 집어 넣은 겁니다. 위의 테이블도 마찬가지 이지만 아무리 Cell 병합을해도 1개의 테이블로 위와 같이 분할 할 방법은 없습니다. 또 이런 Inline Table의 사용이 처음에는 어렵게 느껴지지만 익숙해 지기만 하면 테이블의 구조가 복잡하면 할 수록 훨씬 쉽게 작업할 수 있습니다. 실제적으로 가장 많이 사용되는 수법이라고 할 수 있져...

또 이러한 구조를 사용하게 됨에 따라 귀찮아도 써먹어야 될게 있습니다. 그건 바로 Comment Element... 즉, 주석을 사용하는거져. 아래의 XML 문서에도 주석 넣은거 보이져? 이런 식으로 주석을 붙이지 않으면 어디가 어딘지 분간하는데 무쟈게 애먹습니다. 절대 귀찮은게 아니져. 사실 나중에는 어뜩하면 조금이라도 주석을 더 붙이나 하고 궁리하게 되져... 고수가 될수록 말입니다.

- <html>

- <head>

<title>Page title</title>

</head>

- <body>

- <table border="1" align="center" width="100%">

- <tr height="200">

- <!--

 1번째 어미 Cell 시작

-->

- <td width="40%">

- <!--

  2행 2열 Inline Table 시작

-->

- <table border="1" width="100%" height="100%" bgcolor="palegreen">

- <tr>

</tr>

- <tr>

</tr>

</table>

- <!--

  2행 2열 Inline Table 끝

-->

</td>

- <!--

 1번째 어미 Cell 끝

-->

- <!--

 2번째 어미 Cell 시작

-->

- <td>

- <!--

  3행 3열 Inline Table 시작

-->

- <table border="1" width="100%" height="100%" bgcolor="salmon">

- <tr>

</tr>

- <tr>

</tr>

- <tr>

</tr>

</table>

- <!--

  3행 3열 Inline Table 끝

-->

</td>

- <!--

 2번째 어미 Cell 끝

-->

</tr>

</table>

</body>

</html>

위의 XML 문서를 봐도 알겠지만 처음 접하는 초보자에겐 참으로 복잡하게만 보이는 구조를 하고 있습니다. 저걸 처음부터 끝까지 한 줄로 입력한다고 생각해 보시져... 참 골에 쥐나는 일이져. 특히 Code의 양이 많아져서 아래 위로 스크롤해 가면서 작업하려면 슬슬 현기증이 나기 시작하죠. 거기에다 주석을 안 붙여서 어디가 어딘지 헷갈리기 시작하면 생리적인 변화까지 생기게 됩니다. 즉, 혈압이 오르고 곧 흥분상태에 들어가서 끙끙거리다 그만 포기할 수도 있습니다. 모두 흥분을 위해서 지나친 건강을 삼가해야 되겠습니다.

하지만 아래와 같이 작업하면 여러분의 정신건강에 매우 유익하리라 생각되어 진심으로 이 페이지를 보는 사람들을 위하는 마음에서 Code의 모듈화 작업에 대해 설명하겠습니다. 위의 XML 코드를 Sample로 합니다.

아래와 같이 마치 그림이 액자 속에 들어 간 것 같은 효과를 내보기로 하시져... 뭐 이런게 꼭 좋다는건 아니지만 (취향이 각자 다르니까) Inline Table 연습삼아 해 볼만 하겠군요. 아래의 순서대로 Coding해 보시져.

우선 아래와 같이 액자 역할을 할 어미 테이블과 그림이 10개 들어간 테이블을 각각 Coding 합니다. 이 때 일단 Table border를 1로 주어서 전체적인 윤곽을 알아 보기 쉽게 한 다음 테이블이 완성된 다음 0 으로 수정하는게 작업하는데 편리합니다.

이제 아래와 같이 부분에 '그림이 10개 들어간 테이블을 지우면서 복사(Ctrl + X) 해서 붙여 넣기(Ctrl + V)합니다. 그림 테이블이 들어갈 모서리가 등근 테이블이 납작하게 보이는 이유는 내용물이 없어서 그런거져... 그림 테이블이 들어가면 들어가는 테이블 크기에 맞게 늘어납니다. 굵은 글씨 부분을 유의해서 입력하시져...

감추기

HTML-Kit 의 Tag 들여 쓰기 기능

앞에서도 누누히 설명했지만 Tag의 위계에 의한 오른쪽 들여쓰기는 HTML을 Coding 하는 문서 작성자에게는 필수적인 항목입니다. 흔히 Source 보기를 하면 그 문서를 작성한 사람이 하수인지 또는 중수 내지는 고수인지 금방 알 수 있습니다. 그건 들여쓰기나 주석을 붙인걸 보면 알 수 있습니다. 사실 들여쓰기나 주석문 같은게 남들이 보라고 하는 건 아니지만 우리가 흔히 말하는 '남에게 나의 안면(顔面)을 판매한다.' 라는 표현을 자주 쓰지 않습니까? 에~ 그러니까... 왜 '쪽 팔린다.' 라고 별로 우아하지 않은 표현을 하는 사람들도 더러 있습니다만...^^

하여간 이렇게 Tag을 정리, 정돈하는 습관은 남들이 어떻게 보건 자기 스스로를 위한 작업, 어디가 어딘지 찾느라 시간을 낭비하지 않기 위한 작업이라는 점을 잊으면 안되겠습니다. 그럼 HTML-Kit로 오른쪽 들여 쓰기하는 방법에 대해 알아보겠습니다. 예를 들어 아래와 같이 엄청 혼란스럽게 작성된 Code 가 있다고 치져...

입력 1

<table>
                       <tr>
                <td>R1 C1</td>
<td>R1 C2</td>
  </tr>
                      <tr>
    <td>R2 C1</td>
                 <td>R2 C2</td>
  </tr>
          </table>

아무리 제가 의도적으로 꾸민거지만 보기만 해도 괜히 열받는군요... 빨리 정돈 하도록 하져. 이와 같이 총체적 혼돈 상태일 경우 일단 아래과 같이 흐트러진 코드 전체를 선택합니다.

입력 2

<table>
                       <tr>
                <td>R1 C1</td>
<td>R1 C2</td>
  </tr>
                      <tr>
    <td>R2 C1</td>
                 <td>R2 C2</td>
  </tr>
          </table>

그리고 Ctrl + [ (대괄호 : P key 오른쪽에 있음) 를 아래의 그림과 같이 선택된 Tag들이 왼쪽으로 완전히 붙을 때 까지 반복해서 눌러 줍니다.

입력 3

<table>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr>
</table>

이제 정돈이 되었으니까 이번에는 아래와 같이 Table의 하위 Tag인 <tr>...</tr> 까지를 선택하고 Ctrl + ] 를 2번 눌러서 선택된 부분이 오른쪽으로 들여쓰기가 되도록 합니다.

입력 4

<table>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
</tr></table>

같은 요령으로 아래의 파란 부분들을 선택(각각 1번씩 2번 선택하고 정리해야 됩니다.)하고 Ctrl + ] 를 2번 눌러 오른쪽 들여 쓰기를 하면 됩니다.

입력 5

<table>
    <tr>        <td>R1 C1</td>
    <td>R1 C2</td>    </tr>
    <tr>    <td>R2 C1</td>
    <td>R2 C2</td>    </tr>
</table>

아래와 같이 정돈이 되었습니다. 이와 같이 Tag을 위계 질서있게 정리 및 정돈하는 습관이 여러분들을 Power User 로 만들어주는 요소 중에 하나라는 사실을 잊지 말고 항상 습관적으로... 자기도 모르게 정리 정돈하도록 해야 되겠져?^^

입력 6

<table>
    <tr>    
        <td>R1 C1</td>
        <td>R1 C2</td>
    </tr>
    <tr>
        <td>R2 C1</td>
        <td>R2 C2</td>
    </tr>
</table>

숨은 문자 보이기와 길이가 긴 입력 라인의 정리

숨은 문자 보이기

숨은 문자란 HTML-Kit Editor 상에서 Space, Enter, Tab 같이 눈에 보이지 않는 문자를 특정 기호로 표시해 줍니다. 특히 <PRE> 같은 Tag을 사용하여 라인을 정리할 때 Tab과 Space는 간격이 차이가 나기 때문에 이런 기능을 사용하면 Tab인지 Space인지 쉽게 눈으로 볼 수 있습니다.

사용 방법은 HTML-Kit Main menu 중 View / Editor / Hidden Charaters 를 선택합니다.

Hidden Characters 표시

Space · (Middle Dot)

Tab > (Tag 닫는 부등호)

Enter ¶

길이가 긴 라인의 칸 바꾸기

Coding을 하다 보면 라인이 길어져서 Editor 오른쪽을 넘고 넘어 수평으로 한참 스크롤해야 될 경우가 많습니다. 또 뒤에 나오는 JavaScript나 ASP의 경우 칸을 바꾸면 Error 가 나게 됩니다. 이럴 경우 전체 라인을 다 보려면 몹시 귀찮아 지죠. 이럴 때 사용하면 좋은게 있습니다. 실제로는 칸이 바뀌지 않지만 Editor 상에서만 칸이 바뀌게 됩니다.

사용 방법은 HTML-Kit Main menu중 View / Editor / Word Wrap 을 선택합니다. 선택 후 Editor 왼쪽의 Gutter에 라인 번호를 보면 줄바꿈(Word Wrap)이 생기더라도 라인 번호 대신 오른쪽으로 돌아 감기는 화살표로 표시 됩니다.

감추기

내용이 넘 길어진게 아닌지 모르겠습니다. 그 만큼 Table에 관련된 Element들이 Web Design에서 큰 비중을 차지하고 있다는 의미가 되겠죠. 이 밖에도 테이블에 관련된 Element들이 Colgroup, Col, Tbody, Thead, Tfoot 등 아직 Column 을 다루는 몇가지가 있긴 하지만 그건 고급과정에서 다루기로 하고 일단 여기서 접도록 하겠습니다. 헷갈리는 테이블 공부하느라 수고 많았씸더...