표를 이용하여 글을 올리는 방법에 대해서 알아보겠습니다.
웹 문서에서 표를 빼 놓고는 이야기를 할 수 없을 정도로 너무나 많이 사용되고 있습니다.
이 표를 잘 이용하면 웹 문서를 보기 좋게 작성할 수 있습니다.
먼저 표는 어떻게 만드는가?
이 의문은 편집기의 상단에 보면
이렇게 툴바가 있습니다.
이 중에서 이 녀석이 표를 만드는 아이콘입니다.
이 녀석을 클릭하면 아래의 그림과 같이 표를 작성하는 옵션창이 열리게 됩니다.
설정하는 옵션은 행과 열, 테투리의 굵기, 테두리색, 표배경색을 지정할 수 있는데 모두 지정할 필요는 없고 아래 그림과 같이 행은 20 정도로 열은 1로 설정을 합니다.
지정을 마쳤다면 이 버턴을 클릭하면 편집기에 아래 그림과 같이 표가 추가됩니다.
실제로는 위의 그림과 같이 되지 않습니다.
위의 경우에는 표가 선택되어 지는데 마우스커서를 표의 위로 올려 놓으면 커서의 모양이 로 변할 때 마우스 왼쪽을 클릭하면 표가 선택이 됩니다.
이렇게 표를 선택한 다음에 가운데로 맞춤을 하기 위해서 편집기의 툴바 중 이 부분 중에 을 클릭하면 아래 그림과 같이
표가 가운데로 이동을 하게 됩니다.
이렇게 중간으로 이동이 되면 표를 클릭하여 아래 그림과 같이 마우스 커서가 표의 셀 안에 들어가도록 합니다.
이 부분이 잘 안될수도 있겠네요.
먼저 마우스 커서를 표가 아닌 곳으로 이동한 다음에 왼쪽 버턴을 클릭하면 표에서 선택되었던 사각형 포인터가 없어집니다.
이 상태에서 다시 마우스 커서를 움직여 표의 위로 이동 한 다음에 마우스 커서가 로 표시될때 마우스 왼쪽 버턴을 클릭하면 됩니다.
아래 그림과 같이 마우스 커서가 셀 안에서 깜박거리게 됩니다.
이 상태에서 먼저 등록하고자 하는 그림을 첨부파일 리스트에서 선택한 다음에 본문삽입 버턴을 클릭합니다.
아래 그림과 같이 그림이 가운데로 나타나게 됩니다.
다음에는 마우스 커서를 그림이 등록된 아래의 서너줄 다음에 이동한 다음에 클릭을 하여 그 셀에서 깜박거리게 한 다음에
다음의 그림을 등록합니다.
이렇게 반복 작업을 하면 그림과 그림 사이에 아래 그림과 같이 행이 추가된 모습으로 됩니다.
이렇게 그림이 중간으로 모이게 되고 그림과 그림 사이에 공간이 생기게 됩니다.
그리고 맨 아래 부분은 다음의 그림과 같이 됩니다.
아래의 남은 줄에다 글을 쓰겠습니다.
글을 쓰고자 하는 행을 클릭한 다음에 글을 쓰고 엔터키를 치면 개행이 되고 아래 그림과 같이 한 셀에 글이 쓰여 집니다.
이렇게 글쓰기를 완료했다면 거의 다 작성을 한 것입니다.
그렇지만 조금은 문제가 있을 듯 합니다.
테두리의 선이 글을 작성할 때 처럼 보이게 됩니다.
이 줄을 없애기 위해서는 HTML 코드에서 수정을 해야 하는데 생각보다는 간단합니다.
편집기의 상단에 있는 버턴을 클릭하면 아래 그림과 같이 HTML 코드가 나타나게 됩니다.
HTML 코드가 나타난다고 어렵다고 생각하지 마시기 바랍니다.
고쳐야 할 문자의 수가 6자 밖에 되지 않습니다.
위의 그림의 HTML 코드 중에서 파란색으로 선택되어진 부분이 테두리의 색깔을 결정하게 되는 곳입니다.
그 중에서도 cccccc 부분이 색상을 결정합니다.
이는 회색 계통입니다.
이 부분의 cccccc를 아래 그림과 같이 ffffff 으로 바꾸어 주시면 됩니다.
이렇게 바꾸셨으면 다 된것입니다.
다시 편집기 상단의 버턴을 클릭하면 아래의 그림처럼 선들이 없어진 것을 확인하실 수 있습니다.
이렇게 작성된 결과가 아래 처럼 보이게 됩니다.
이해를 돕기 위해서 그림의 크기를 줄여서 작성을 했습니다.
사진은
명지/姜寬洙님의 산해박
恩江님의 산솜다리
박하님의 콩짜개란
혜원님의 은방울꽃 입니다.
사진을 작게 편집했습니다.
아름다운 사진들 올려주셔서 감사합니다.
|
|
|
|
내용을 작성합니다. 글의 작성도 훨씬 수월할 것 같은 생각이 듭니다. 칸이 보이니 훨씬 더 좋습니다. |
번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
---|---|---|---|---|
5 | 그림과 글의 정렬에 대해서 | floma | 2009.06.11 | 1819 |
» | 표를 이용하여 글을 등록하는 방법 [1] | floma | 2009.06.10 | 1574 |
3 | 그림의 위치를 이동시키는 방법 [4] | floma | 2009.06.10 | 2005 |
2 | 그림이 옆으로 이어지거나 연달아 이어지지 않게 하는 방법 [1] | floma | 2009.06.09 | 1566 |
1 | 글쓰기 할 때 참조하세요. | floma | 2009.05.11 | 1546 |