Chapter 15. 표다듬기 1
1. 표안의내용을보기좋게정렬할수있습니다. 2. 셀배경색을지정하여꾸밀수있습니다. 3. 셀간격과셀안쪽여백을조절하여표를꾸밀수있습니다. 1. 표내의내용정렬하기 표의내용을정렬하는방법에대해알아보겠습니다. 그러기전에일단표를만듭니다. 2
표의아래경계선을마우스포인터로드래그하여늘리기 1 줄 3 칸짜리표가만들어졌습니다. 표가만들어졌으면, 각셀을왼쪽부터순서대로수평방향왼쪽수직방향위, 수평정렬가운데수직정렬중간, 수평정찰오른쪽수직정렬아래를적습니다. 정렬을이에맞춰정렬하겠습니다. 3
왼쪽셀에따라수평정렬왼쪽, 수직정렬위를맞춰보겠습니다. 해당셀에커서를두고오른쪽클릭합니다. 표속성대화상자가나타납니다. 모양부분의수평정렬을왼쪽으로, 수직정렬에는위로설정합니다. 4
나머지셀들도같은방법으로셀을지정합니다. 그림과같이정렬이됩니다. 수평정렬은글을왼쪽가운데오른쪽으로분류하여글을정리하며, 수직정렬은위, 중간, 아래쪽으로분류하여글을정리합니다. 5
2. 셀속성사용하여효과내기 다시 1 줄 3 칸표를만든후, 이번엔셀속성의기능에대해알아보겠습니다. 맨처음셀에커서를두고오른쪽클릭하여나오는팝업메뉴의셀속성항목을클릭합니다. 셀탭이나와있는표속성도구상자를보실수있습니다. 6
배경에서색깔항목을노란색으로바꿔주고확인버튼을누르면첫번째셀이설정된대로노란색으로칠해졌습니다. 7
두번째셀도같은방법으로표속성대화상자를만들어냅니다. 이번엔테두리부분을바꾸도록하겠습니다. 옅은테두리에파란색, 짙은테두리에빨간색을설정하고확인하면설정이적용되었습니다. 이제마지막셀에커서를두고, 셀속성을클릭합니다. 8
이번에는테두리의색깔이란항목에보라색으로설정하고확인버튼을클릭합니다. 테두리가보라색으로바뀌었습니다. 9
그런대만일색깔이보라색이라고지정된상태에서옅은테두리색과진한테두리색을넣으면어떻게될까요? 3 번째셀에대한설정에추가로짙은테두리색과옅은테두리색을입력하고확인을누릅니다. 짙은테두리색과옅은테두리색으로설정된걸확인할수있는데, 보통테두리색깔설정은짙은, 옅은테두리설정보다우선순위가낮아반영되지동시설정되었을땐반영되지않습니다. 10
3. 셀간격, 셀여백나누기 다시표를만들고이번엔 3 줄 1 칸표를만듭니다. [ 표 ] 의새표항목을클릭하면표속성대화상자에서만들수있습니다. 셀안쪽여백을맨첫셀에적고, 오른쪽클릭해표속성을클릭합니다. 11
표탭이나와있는표속성대화상자가나타납니다. 셀안쪽여백을 5 를지정합니다. 확인버튼을누르면여백이넓어져글자와표테두리간간격이벌어졌습니다. 12
표를그아래에새표명령을이용하여, 3 줄 1 칸표를하나더만듭니다. 그리고첫째셀에셀간격이라고적습니다. 그리고두번째표에서이전과같이표속성을클릭하여대화상자를엽니다. 셀간격부분을 5 로증가시킵니다. 13
셀간격이조정된모습입니다. 테두리가굵어진것을알수있습니다. 셀과셀사이간격이넓어졌기때문입니다. 지금까지배운것들을활용하여리본공예웹페이지를제작해보겠습니다. 일단이전에있던문서 biz_01.html 을실행시킵니다. 14
본문부분에새표명령을이용해서표속성대화상자를만들고, 줄은 1 로, 칸은 2 로지정하고너비는 500 으로지정한후, 픽셀단위에체크합니다. 모양 항목에서셀안쪽여백을 0, 셀간격을 0 으로지정한뒤, 테두리항목에서선두께를 0 으로합니다. 1 줄 2 칸표가완성되었습니다. 왼쪽셀의너비를좀줄여보겠습니다. 15
첫번째셀을블록설정하고, 셀속성을클릭합니다. 표속성대화상자에서셀탭의너비부분을조정해줍니다. 왼쪽셀너비를줄였습니다. 16
이번엔오른쪽셀을 CTRL 키를이용하여셀속성을클릭해, 왼쪽셀을설정했던방식으로셀속성을이용하여, 너비를알맞게줄입니다. 17
오른쪽셀안에표를하나더만들어보겠습니다. 커서를오른쪽셀에맡겨두고 [ 표 ] 에서새표항목을클릭합니다. 표속성에서줄은 2 로칸은 1 로지정하고너비는 419, 셀안쪽여백 0, 셀간격 0, 테두리를 0 으로하고 [ 확인 ] 버튼을클릭합니다. 표가만들어졌습니다. 18
두번째셀에서만든표의색깔을표속성대화상자를이용해바꿉니다. 19
오른쪽셀윗부분셀에리본장식상자포장이라고적고가운데정렬을서식도구모음에서찾아클릭합니다. 아랫부분셀은셀속성으로들어가표속성대화상자에서배경의색깔부분을상아색으로바꿔줍니다. 20
커서를아랫부분셀에두고도구모음에서그림삽입하기를클릭합니다. 그림속성대화상자가나타나면, 그림경로에원하는그림파일을찾아주고, 확인버튼을클릭합니다. 21
그림이들어가있는것을확인할수있습니다. 이번에는그림이들어간표에가로줄을삽입해글자를써보겠습니다. 메뉴표시줄의 [ 표 ] 를클릭하고표메뉴에서 [ 줄삽입하기 ] 를클릭합니다. 22
줄삽입하기대화상자가나타납니다. 가로줄을삽입하기를클릭하고, 가로줄개수를 7 줄정도설정합니다. 위치는현재셀의아래쪽으로설정합니다. 확인하면줄이표밑으로생겼음을알수있습니다. 리본상자상자포장에관한글을만든 7 줄중첫줄에적습니다. 23
쓴글부분을깔끔하게보이기위하여, 글을모두블록설정한후, [ 서식 ] 의목록항목을클릭합니다. 스타일대화상자가나타나며, 형식, 모양등을설정해주고, 확인버튼을클릭합니다. 24
다음줄에는다시그림을붙이도록하겠습니다. 이전그림을넣었던방법과똑같이그림삽입하기버튼을클릭한후, 그림속성대화상자에서원하는그림을설정해넣었습니다. 25
남은부분도같은공정을거쳐서웹페이지를완성시킵니다. [ 파일 ] 의다음이름으로저장버튼으로이번문서이름을 food.html 으로만들어저장합니다. 기존이름으로저장하지않는이유는같은형태로음식과관련된웹페이지를만들기위해서입니다. 26
자그럼 food.html 을작성해봅시다. 본문내용을지웁니다. 표를전부블록지정하여삭제시킵니다. 크기항목에서 12 줄 2 칸으로하고 너비 는 700 단위는픽셀, 셀간격 과 셀안쪽여백 을 0, 테두리 를 0 으로하고 [ 확인 ] 버튼을클릭합니다. 27
설정대로표를완성시켰습니다. 이어서표모든왼쪽셀을 CTRL 키로블록설정하고, 오른쪽클릭후, 팝업메뉴에서표속성대화상자를연뒤에, 너비를좁혀줍니다. 28
그러면리소스관리자대화상자가나오게됩니다. 웹구성요소부분의블릿폴더를클릭합니다. 그럼여러가지클립보드가나오게되는데, 임의로하나를클릭한후, 확인버튼을클릭합니다. 29
첫번째줄을한셀로합치도록하겠습니다. 첫번째줄을블록설정한후, 표의셀합치기를클릭합니다. 첫줄이한셀로바뀌었습니다. 30
스마트클립아트삽입하기로김치만들기에관한버튼을만들고자합니다. 스마트클립아트삽입하기버튼을도구상자에서클릭합니다. 그러면리소스관리자가나타납니다. 원하는버튼모양을클릭하고확인합니다. 31
더블 Click 버튼을원하는형태로만들어보겠습니다. 만들어진버튼을더블클릭하면스마트클립아트대화상자가나타납니다. 스마트클립아트는나모웹에디터편집창에삽입한이후에도언제든지버튼을더블클릭하여그림에사용된글자나그림의색깔, 크기등을손쉽게바꿀수있습니다. 32
김치만들기단추를만든과정처럼또하나의버튼을만듭니다. 이름은재료로만들어줍니다. 해당텍스트파일내용을복사하여원하는셀에붙이기합니다. 33
현재까지한과정을반복하여웹사이트를만들어갑니다. 이번엔김치만드는과정옆에그림을넣겠습니다. 도구모음에서그림삽입하기버튼을클릭하고그림속성대화상자에서그림경로에원하는그림을찾고, 정렬은오른쪽정렬을시킵니다. 확인버튼을눌러그림을삽입합니다. 34
그림도아까와같은방법으로원하는자리에김치만들기및모든단추들은가운데정렬을클릭하여가운데정렬시킵니다. 35
이번엔셀배경색을지정합니다. 지정셀에서셀속성을클릭하여배경의색깔부분을노란색으로바꾸어줍니다. 셀배경색이지정되었습니다. 36
지금까지홈페이지의테두리를 1 로주고하였습니다. 실제인터넷에서보면테두리가있어보기가좋지않습니다. 따라서홈페이지의테두리를 0 으로바꾸는방법에대해살펴보겠습니다. Family.html 파일을열어봅니다. 우리가족이란부분뒤에커서를두고태그셀렉터를클릭합니다. 37
태그셀렉터에서 <table> 을클릭합니다. 표전체가선택되는모습을볼수있습니다. 누른후엔바로보기창에서바로보기 - 표라는창이보여집니다. 테두리부분을 0 으로지정합니다. 38
편집창아무것이없는빈곳을클릭하면테두리가없어진메뉴를볼수가있습니다. 39
학습정리 1. 표내의내용정렬지정하기 (1) [ 셀속성 ] 의 모양 항목에서 수평 / 수직정렬 을할수있음. (2) [ 바로보기 - 셀 ] 에서 수평 / 수직정렬 을할수있음. (3) 수평 / 수직정렬은셀안에있는그림이나글자의가로와세로의위치를정렬함. 2. 셀배경색사용하여효과내기 (1) [ 셀속성 ] 의 배경 항목에서 색깔 을지정할수있음. (2) [ 바로보기 - 셀 ] 에서 색깔 을지정할수있음. 3. 셀간격, 셀안쪽여백바꾸기 (1) [ 표속성 ] 의 모양 항목에서 셀안쪽여백 과 셀간격 을지정. (2) [ 바로보기 - 표 ] 에서 셀안쪽여백 과 셀간격 을지정할수있음. (3) 셀간격 : 셀과셀의경계선두께를픽셀단위로설정. (4) 셀안쪽여백 : 셀의폭설정 4. 스마트버튼 (1) 스마트클립아트는웹문서를작성할때편리하게사용할수있도록개발된그림임. (2) 일반그림과달리스마트클립아트는나모웹에디터편집창에삽입한이후에도언제든지버튼을더블클릭하여그림에사용된글자나그림의색깔, 크기등을손쉽게바꿀수있음. 40