soo8155

<a href="http://cafeevent.daum.net/_event/0407_ballgame/" target="new"><img src="http://cafeimg.hanmail.net/event/0407_cafeopen3/684x118_cafeopen3.gif" width="684" height="118" border="0" align="absmiddle" alt="Daum 카페 공튀기기 리그전!" style="margin-bottom:6px;"></a><br><br> <img src="http://cafeimg.hanmail.net/cf_img2/txt_allmail_preview_to.gif" width="20" height="15" border="0" align="absmiddle" alt="To">  <font color="#000000">회원전체</font><br><br> <b>Table강좌[3]복수의 쎌합치기/색상표</b><br><br> <CENTER><span style="COLOR:#FFCC00;FILTER:shadow(color=#006600);height:20px"><FONT SIZE="5" face=궁서체><B>TABLE (3)</B></FONT></span></CENTER><br> <br> <TABLE width=90% height=50 align=center cellpadding=0 cellspacing=0 border=2 bordercolor=#FFCCCC bgcolor="#FEF1FA"> <TR> <TD align=center xxxxon-MouseOver="this.style.backgroundColor="#FFFF99"" xxxxon-MouseOut="this.style.backgroundColor="#CCFFFF"" width=25%> <A HREF="#1"> <FONT COLOR="#9900FF"> <p style=font-size:15><B>복수의 셀 합치기</B> </p> </FONT> </A> </TD> <TD align=center xxxxon-MouseOver="this.style.backgroundColor="#FFFF99"" xxxxon-MouseOut="this.style.backgroundColor="#CCFFFF"" width=25%> <A HREF="#2"> <FONT COLOR="#9900FF"> <b> <p style=font-size:15>셀의 크기 및 데이터의 위치 </p> </b> </FONT> </A> </TD> <TD align=center xxxxon-MouseOver="this.style.backgroundColor="#FFFF99"" xxxxon-MouseOut="this.style.backgroundColor="#CCFFFF"" width=25%> <A HREF="#3"> <FONT COLOR="#9900FF"> <b> <p style=font-size:15>웹과 색채 </p> </b> </FONT> </A> </TD> </TR> </TABLE><br> <br> <CENTER><span style="color:#FFFFFF;filter:glow(color=#9933CC);height:40px"><FONT SIZE="5"><B><A name="1">1. 복수의 셀 합치기</A></B></FONT></span></CENTER><br> <TABLE width=800 align=center border=1 bordercolor="#6A2F5F" cellpadding=10 cellspacing=0> <TR> <th bgcolor="#6A2F5F" height=80 align=center colspan=2><B><FONT SIZE="4" COLOR="#FFFFFF"><br> <TD rowspan="n" colspan="n">...</TD> </FONT></B> </th> </TR> <TR> <TD bgcolor="#F7EEFF"> <TABLE width=700 align=center style="border-width:8px;background-color:#009900;border-color:#FFCCCC;border-style:ridge;padding:5px;" cellpadding=10> <TR> <TD background="http://www.truesky.net/image/data/bdrose03.gif"><br> TABLE을 만들고 이미지나 텍스트를 삽입하여 정렬하다 보면 셀들을 합쳐야 할 경우가 자주 있습니다. 이럴 경우에 Rowspan과 Colspan 속성을 사용하면 간단하게 <B><FONT COLOR="#FF0000">여러 개의 셀을 하나로 합칠 수 </FONT></B>있습니다. <br> <OL> <LI><B><FONT SIZE="4" COLOR="#FF0000">Colspan</FONT></B>:가로의 셀들을 합칠 때 사용하는 속성으로 속성값은 합칠 개수(n)를 말합니다. <LI><B><FONT SIZE="4" COLOR="#FF0000">Rowspan</FONT></B>:세로의 셀들을 합칠 때 사용하는 속성으로 속성값은 합칠 개수(n)를 말합니다. </OL> <TABLE width=600 bgcolor=#DDEEFF cellpadding=4 align=center border=2 bordercolor=#FF6699 cellspacing=0> <TR> <TD><br> <FONT SIZE="2" COLOR="#990000"><OL> <LI>colspan의 경우 가로셀을 합치는 것이므로 합치고 싶은 가로셀 수 만큼 합치고 나서 오른쪽 셀이나 아래 셀을 만들면 되겠습니다. 새로운 줄이 시작 될때는 (TR)이 오면 되겠죠? <LI>rowspan은 세로로 셀이 합쳐지므로 다소 까다롭습니다. 셀을 정리할 때 우선순위는 현재 셀을 먼저 해결하고, 그 다음이 오른쪽입니다. 한 줄이 마무리되고 나면 새로운 줄이 시작되는 (TR)을 써주고, 셀이 합쳐진 부분은 제외 한 나머지 셀들을 채워갑니다. <LI>아래의 예제에서 번호 순서대로 차근차근 만들어 보시면 되겠습니다. <LI>가장 쉬운 방법은 일단 테이블이 합쳐진 여러가지 모양을 메모지에 그려서 그 메모지를 참고하여 실제로 한번씩 만들어 보는 수 밖에 없습니다. 몇 번을 해보고 나시면.. 그 다음엔 감이 오실겁니다. <LI>복잡하게 얽힌 셀은 다소 혼동이 올 수 있으니,, 연습하세요. 연습이 대가를 만든대요.^^ </FONT> </TD> </TR> </TABLE> </TD> </TR> </TABLE><br> <TABLE align=center cellpadding=5 cellspacing=0 border=2 bordercolor=#6A2F5F width=700> <TR> <Th colspan=3 bgcolor=#AAD5D5 height=50><B><FONT SIZE="6" COLOR="#FF0000">Colspan</FONT></B></Th> <TR> <Th Width=30%>colspan=2</Th> <Th Width=30%>colspan=3</Th> <Th Width=30%>colspan=4</Th> </TR> <tr> <td valign=top><FONT SIZE="4" COLOR="#FF6600"><TABLE border=1> <TR> <TD clospan=2>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> </TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">2</FONT></B>개의 셀을 합치려면<B><FONT COLOR="#FF00CC"> colspan=2</FONT></B>를 적용합니다. 그 다음은 줄이 바뀌니 (/TR)이 오고, 새로운 줄이 시작되니 (TR)이 오면 되겠죠?</FONT> </TD> </TR> </TABLE></TD> <td valign=top><FONT SIZE="4" COLOR="#009900"><TABLE border=1> <TR> <TD clospan=3>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">3</FONT></B>개의 셀을 합치려면<B><FONT COLOR="#FF00CC"> colspan=3</FONT></B>를 적용</FONT> </TD> </TR> </TABLE></TD> <td valign=top><FONT SIZE="4" COLOR="#990000"><TABLE border=1> <TR> <TD colspan=4>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> </TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">4</FONT></B>개의 셀을 합치려면 <B><FONT COLOR="#FF00CC">colspan=4</FONT></B>를 적용</FONT> </TD> </TR> </TABLE></TD> </TR> <tr> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD align=center colspan=2>1</TD> </TR> <TR> <TD align=center>2</TD> <TD align=center>3</TD> </TR> </TABLE> </td> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD align=center colspan=3>1</TD> </TR> <TR> <TD align=center>2</TD> <TD align=center>3</TD> <TD align=center>4</TD> </TR> </TABLE></td> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD align=center colspan=4>1</TD> </TR> <TR> <TD align=center>2</TD> <TD align=center>3</TD> <TD align=center>4</TD> <TD align=center>5</TD> </TR> </TABLE></td> </tr> <tr><td colspan=3> <TABLE align=center cellpadding=5 cellspacing=0 border=0 width=700> <TR> <Th colspan=2><FONT SIZE="5" COLOR="#FF0000"><B>복수의 셀 합치기</B></FONT></Th> </TR> <TR> <TD bgcolor=#FFFF99><br> <FONT COLOR="#0000FF"><table border=1> <tr> <td colspan=4>내용1</td> </tr> <tr> <td colspan=2>내용2</td><td>내용3</td><td>내용4</td> </tr> <tr> <td>내용5</td><td>내용6</td><td colspan=2>내용7</td> </tr> </table> </FONT></TD> <TD bgcolor=#DCF3E0 valign=top align=center><br> <br> <table border=1 bordercolor=red cellspacing=0 width="250" height="150"> <tr> <td colspan=4>내용1</td> </tr> <tr> <td colspan=2>내용2</td><td>내용3</td><td>내용4</td> </tr> <tr> <td>내용5</td><td>내용6</td><td colspan=2>내용7</td> </tr> </table></TD> </TR> </TABLE> <TABLE align=center cellpadding=5 cellspacing=0 border=0 width=700> <TR> <TD bgcolor=#FFCC66><br> <CENTER><span style="background-color:#FFFFFF"><FONT SIZE="4" color=#993399><B>만드는 방법</B></FONT></span></CENTER><br> <OL> <LI>우선, table이 시작하니까 (table)을 써줍니다. <LI>첫번째 줄(tr)을 만듭니다. 첫번째 셀(td) "내용 1"은 그 아래 셀들을 가만히 보시면.. 한 줄이 모두 최대 4개의 셀로 구성되어 있죠? 이 4개의 셀을 모두 한 줄로 합친 셀이므로 (td) 옆에 "colspan=4"를 써줍니다. <I><FONT COLOR="#0000FF">(td colspan=4)내용 1(/td)</FONT></I> <LI>그 다음, 두번째 줄로 넘어가서, "내용 2"셀은 셀 2개를 합쳐 놓은 것이므로 "colspan=2"를 넣어주시고 바로 옆의 "내용 3", "내용 4"셀을 만들어 나갑니다. <LI>마지막 줄도 마찬가지!! "내용 5", "내용 6"셀을 만드시고.. 마지막 "내용 7" 셀도 셀 2개가 합쳐진 것이므로 <I><FONT COLOR="#0000FF">(td colspan=2)내용 7(/td)</FONT></I>을 써줍니다. <LI>이제 table을 닫아야겠죠? ☞ (/table) </OL> </TD> </TR> </TABLE> </td></tr> </TABLE> <TABLE align=center cellpadding=5 cellspacing=0 border=2 bordercolor=#6A2F5F width=700> <TR> <Th colspan=3 bgcolor=#AAD5D5 height=50><B><FONT SIZE="6" COLOR="#FF0000">Rowspan</FONT></B></Th> <TR> <Th Width=30%>rowspan=2</Th> <Th Width=30%>rowspan=3</Th> <Th Width=30%>rowspan=4</Th> </TR> <tr> <td valign=top><FONT SIZE="4" COLOR="#FF6600"><TABLE border=1> <TR> <TD rowspan=2>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">우선순위는 현재 셀</FONT></B>을 먼저 해결합니다. 즉, 먼저 해결할 부분은 현재 셀, 즉 "1"을 먼저 합치고... 그 다음, 오른쪽으로 넘어가야 합니다.</FONT> </TD> </TR> </TABLE></TD> <td valign=top><FONT SIZE="4" COLOR="#009900"><TABLE border=1> <TR> <TD rowspan=3>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> </TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">3</FONT></B>개의 셀을 합치려면<B><FONT COLOR="#FF00CC"> rowspan=3</FONT></B>를 적용</FONT> </TD> </TR> </TABLE></TD> <td valign=top><FONT SIZE="4" COLOR="#990000"><TABLE border=1> <TR> <TD rowspan=4>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> <TR><TD>5</TD></TR> </TABLE></FONT><TABLE align=center> <TR> <TD bgcolor=#CCFFFF> <FONT SIZE="1"><B><FONT COLOR="#FF00CC">4</FONT></B>개의 셀을 합치려면 <B><FONT COLOR="#FF00CC">rowspan=4</FONT></B>를 적용</FONT> </TD> </TR> </TABLE></TD> </TR> <tr> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD rowspan=2>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> </TR> </TABLE> </td> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD rowspan=3>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> </TR> </TABLE></td> <td><TABLE width=150 height=100 border=1 bordercolor=#FF0000 align=center cellspacing=0> <TR> <TD rowspan=4>1</TD><TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> <TR><TD>5</TD></TR> </TABLE></td> </tr> <tr><td colspan=3> <TABLE align=center cellpadding=5 cellspacing=0 border=0 bordercolor=#6A2F5F width=700> <TR> <Th colspan=2><FONT SIZE="5" COLOR="#FF0000"><B>복수의 셀 합치기</B></FONT></Th> </TR> <TR> <TD bgcolor=#FFFF99><br> <FONT COLOR="#0000FF"><table border=1> <tr> <td rowspan="2">내용1</td><td>내용2</td><td>내용3</td> </tr> <tr> <td>내용4</td><td rowspan=2>내용5</td> </tr> <tr> <td>내용6</td><td>내용7</td> </tr> </table></FONT></TD> <TD bgcolor=#DCF3E0 valign=top align=center><br> <table width=200 height=180 border=1 bordercolor=#FF0000 align=center cellspacing=0> <tr> <td rowspan="2">내용1</td><td>내용2</td><td>내용3</td> </tr> <tr> <td>내용4</td><td rowspan=2>내용5</td> </tr> <tr> <td>내용6</td><td>내용7</td> </tr> </table><br> <CENTER><FONT SIZE="2">★ 번호 순서대로 셀을 만들어 봐요.</FONT></CENTER> </TD> </TR> </TABLE> </td></tr> </TABLE> </td></tr> </table><br> <br> <CENTER><span style="color:#FFFFFF;filter:glow(color=#9933CC);height:40px"><FONT SIZE="5"><B><A name="2">2. 셀의 크기 및 데이터의 위치</A></B></FONT></span></CENTER><br> <br> <TABLE width=800 align=center border=1 bordercolor="#6A2F5F" cellpadding=10 cellspacing=0> <TR> <th bgcolor="#6A2F5F" height=80 align=center colspan=2><B><FONT SIZE="4" COLOR="#FFFFFF"><br> <TD width="셀의 넓이" height="셀의 높이">...</TD> </FONT></B> </th> </TR> <TR> <TD bgcolor="#F7EEFF"> <TABLE width=700 align=center style="border-width:8px;background-color:#009900;border-color:#FFCCCC;border-style:ridge;padding:5px;" cellpadding=10> <TR> <TD background="http://www.truesky.net/image/data/bdrose03.gif"><br> <OL> <LI>셀의 넓이와 높이를 지정할 때 width속성과 height속성을 이용합니다. <LI>크기는 픽셀 단위로 계산하며, 입력한 숫자만큼 높낮이를 조절할 수 있습니다. <LI>height는 거의 이용하지 않는 편입니다. </OL> </TD> </TR> </TABLE><br> <TABLE align=center cellpadding=5 cellspacing=0 border=2 bordercolor=#6A2F5F width=700> <TR bgcolor=#AAD5D5 height=40> <Th Width=30%><B><FONT SIZE="4" COLOR="#FF0000">width=50 height=70</FONT></B></Th> <Th Width=30%><B><FONT SIZE="4" COLOR="#FF0000">width=100 height=50</FONT></B></Th> <Th Width=30%><B><FONT SIZE="4" COLOR="#FF0000">width=50 height=100</FONT></B></Th> </TR> <tr> <td> <TABLE border=2 bordercolor=red cellspacing=0 align=center> <TR align=center> <TD width=50 height=70><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> <TD width=50 height=70><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> </TR> </TABLE> </td> <td> <TABLE border=2 bordercolor=red cellspacing=0 align=center> <TR align=center> <TD width=100 height=50><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> <TD width=100 height=50><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> </TR> </TABLE> </td> <td> <TABLE border=2 bordercolor=red cellspacing=0 align=center> <TR align=center> <TD width=50 height=100><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> <TD width=50 height=100><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fpinkheart.gif"></TD> </TR> </TABLE> </td> </tr> </table> </td></tr></table> <TABLE width=800 align=center border=1 bordercolor="#6A2F5F" cellpadding=10 cellspacing=0> <TR> <th bgcolor="#6A2F5F" height=80 align=center colspan=2><B><FONT SIZE="4" COLOR="#FFFFFF"><br> <TD align="left/right/center" valign="top/middle/bottom">...</TD> </FONT></B> </th> </TR> <TR> <TD bgcolor="#F7EEFF"> <TABLE width=700 align=center style="border-width:8px;background-color:#009900;border-color:#FFCCCC;border-style:ridge;padding:5px;" cellpadding=10> <TR> <TD background="http://www.truesky.net/image/data/bdrose03.gif"><br> 셀에 들어가는 <B><FONT COLOR="#FF0000">이미지나 텍스트의 위치를 지정</FONT></B>할 때 <B><FONT COLOR="#0000FF">align</FONT></B>과 <B><FONT COLOR="#0000FF">valign</FONT></B> 속성을 이용합니다. <OL> <LI><B><FONT SIZE="4" COLOR="#FF0000">align</FONT></B>의 속성 값은 <span style="background-color:#FFFF00"><FONT COLOR="#FF0000"><B>좌(left), 우(right), 중앙(center)</B></FONT></span>으로 이미지나 텍스트를 배치합니다. <LI>align속성을 사용하지 않을 경우 <I><FONT COLOR="#0000FF">기본 값은 left</FONT></I>가 적용됩니다. <LI><B><FONT SIZE="4" COLOR="#FF0000">valign</FONT></B>의 속성 값은 <span style="background-color:#FFFF00"><FONT COLOR="#FF0000"><B>상(top), 중(middle), 하(bottom)</B></FONT></span>로 이미지나 텍스트를 배치합니다. <LI>valign의 속성을 사용하지 않을 경우 <I><FONT COLOR="#0000FF">기본 값은 middle</FONT></I>이 적용됩니다. </OL> </TD> </TR> </TABLE><br> <TABLE align=center cellpadding=5 cellspacing=0 border=2 bordercolor=#6A2F5F width=700> <TR> <Th colspan=2 bgcolor=#AAD5D5 height=50><B><FONT SIZE="6" COLOR="#FF0000">Align, Valign</FONT></B></Th> <TR> <Th width=370>TEXT</Th> <Th width=340>IMAGE</Th> </TR> <tr> <td> <TABLE width=340 height=250 border=2 bordercolor=#CCCC66 bgcolor=#FFFF99 cellspacing=0 cellpadding=6 align=center> <TR> <TD align=left><B><FONT COLOR="#006600">align=left</FONT></B></TD> <TD align=center><B><FONT COLOR="#FF0000">align=center</FONT></B></TD> <TD align=right><B><FONT COLOR="#9900FF">align=right</FONT></B></TD> </TR> <TR> <TD valign=top><B><FONT COLOR="#3399FF">valign=top</FONT></B></TD> <TD valign=middle><B><FONT COLOR="#FF9900">valign=middle</FONT></B></TD> <TD valign=bottom><B><FONT COLOR="#990000">valign=bottom</FONT></B></TD> </TR> </TABLE> </td> <td> <TABLE width=300 height=250 border=2 bordercolor=#CCCC66 bgcolor=#FFFF99 cellspacing=0 cellpadding=6 align=center> <TR> <TD align=left><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fc05.gif"></TD> <TD align=center><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2F1991016_492.gif" width=50 height=50></TD> <TD align=right><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2F4_40.gif" width=50 height=50></TD> </TR> <TR> <TD valign=top><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2F1990302_378.gif" ></TD> <TD valign=middle><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Fcd.gif" ></TD> <TD valign=bottom><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fwww.truesky.net%2Fimage%2Fdata%2Faniduke.gif" width=40 height=50></TD> </TR> </TABLE> </td> </tr> </table> </td></tr></table> <TABLE width=800 align=center border=1 bordercolor="#6A2F5F" cellpadding=10 cellspacing=0> <TR> <th bgcolor="#6A2F5F" height=80 align=center colspan=2><B><FONT SIZE="4" COLOR="#FFFFFF"><br> <TD nowrap>...</TD></FONT></B></th> </TR> <TR> <TD bgcolor="#F7EEFF"> <FONT COLOR="#000000"><B><FONT COLOR="#FF0000">nowrap</FONT></B>은 테이블 내부 셀(cell)에서 자동으로 줄바꿈 되는 텍스트들을 <I><FONT COLOR="#0000FF">줄바꿈 하지 못하게 하는 속성</FONT></I>입니다.</FONT></B><br> <br> <TABLE align=center cellpadding=5 cellspacing=0 border=2 bordercolor=#6A2F5F width=700> <TR bgcolor=#AAD5D5 height=40> <Th width=50%><B><FONT COLOR="#FF0000">자동 줄바꿈 금지를 적용 안한 경우</FONT></B></Th> <Th width=50%><B><FONT COLOR="#FF0000">자동 줄바꿈 금지가 적용된 경우</FONT></B></Th> </TR> <tr> <td bgcolor=#FFFFCC> <table border width="200"> <tr> <td>저자</td><td>안철수</td> </tr> <tr> <td>내용</td> <td>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table> </td> <td bgcolor=#FFFFCC> <table border width="200"> <tr> <td nowrap>저자</td><td>안철수</td> </tr> <tr> <td nowrap>내용</td> <td nowrap>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table> </td> <tr> <td> <table border=1 bordercolor=red cellspacing=0 cellpadding=5 width="200" align=center> <tr> <td>저자</td><td>안철수</td> </tr> <tr> <td>내용</td> <td>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table> </td> <td> <table border=1 bordercolor=red cellspacing=0 cellpadding=5 width="200" align=center> <td nowrap>저자</td><td>안철수</td> </tr> <tr> <td nowrap>내용</td> <td nowrap>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table> </td> </tr> </table> </td></tr></table><br> <br> <CENTER><span style="color:#FFFFFF;filter:glow(color=#9933CC);height:40px"><FONT SIZE="5"><B><A name="3">3. 웹과 색채</A></B></FONT></span></CENTER><br> <TABLE width=90% align=center> <TR> <TD> 앞 강좌에서 body bgcolor, table bgcolor 등 color에 대한 언급을 많이 했었습니다. 일반적으로 웹에서 쓰는 칼라명은 영자로 적을 수 있는 색상명과 16진수 헥사코드를 사용합니다. 그러면... 도대체 16진수 칼라가 무엇인가에 대하여 한번 알아보기로 할까요? Internet은 처음 UNIX SYSTEM 에서 출발했습니다. UNIX에선 color를 표현할 때 16진수를 사용한다고 하네요.<FONT SIZE="2" COLOR="#990000">(As you see and realize, Those above stuffs means the Color of things.Probably the numberic expression‎ came from UNIX operating System. Because the UNIX used the Hexadecimal Number.)</FONT><br> <br> </TD> </TR> </TABLE> <TABLE width=800 align=center border=1 bordercolor="#6A2F5F" cellpadding=10 cellspacing=0> <TR> <TD bgcolor="#F7EEFF"><br> <TABLE width=700 align=center style="border-width:8px;background-color:#009900;border-color:#FFCCCC;border-style:ridge;padding:5px;" cellpadding=10> <TR> <TD background="http://www.truesky.net/image/data/bdrose03.gif"><br> 여러분들은 "빛의 삼원색", "색의 삼원색"에 대하여 들어보신 적이 있으실 겁니다. 우리가 모니터를 통해서 보는 색상은<B><FONT COLOR="#FF0000"> 빨간색(Red), 초록색(Green), 파란색(Blue)</FONT></B> 세가지 색을 가산혼합원리에 의해 혼합하여 만들어진 색입니다. 빛의 3 원색을 섞어 만드는 컬러 방식을 RGB 컬러 방식이라고 합니다. 이 세가지 색의 비율을 각각 다르게 하여 여러가지 색상을 만들어냅니다.<br> 그러나 우리가 그림을 그릴때에는 <B><FONT COLOR="#0000FF">빨간색(Margeta), 파란색(Cyan), 노란색(Yellow)</FONT></B>을 가지고 색을 혼합하여 색상을 만듭니다(<FONT SIZE="2" COLOR="#990000">참고로 CMYK 컬러 방식은 Cyan, Magenta, Yellow, Black 이 네가지 색을 혼합하여 색을 표현하는 방식을 말합니다.</FONT>)<br> 색은 기본색들의 조합으로 만들어 지는데 그 기본이 되는 색이 다르기 때문에 모니터와 출력해서 보는 색상이 달라지게 됩니다. 같은 색처럼 보이는 색일지라도 모니터를 통해서 보여지는 색과 실제 색의 조합은 달라지게 되죠. </TD> </TR> </TABLE><br> <br> <CENTER><span style="color:#FFFF00;filter:glow(color=#FF6600);height:40px"><FONT SIZE="4"><B>16진수 색상코드(Hexadecimal Color Codes) </B></FONT></span></CENTER> <TABLE width=700 bgcolor=#FFFF99 align=center border=0 cellpadding=12> <TR> <TD><br> <OL> <LI>보통 화면출력을 위해 이미지 작업을 할 경우 웹에서는 <I><FONT COLOR="#FF0000"><B>헥사코드(Hex Code)</B></FONT></I>라는 16진수의 값이나 색이름을 사용합니다.<br> <br> <TABLE border=1 align=center cellpadding=4> <TR> <TD><FONT SIZE="2" COLOR="#990000"><B>※ 참고 (<FONT COLOR="#FF0000">hexadecimal</FONT>)</B><br> 16진 (hexadecimal) 표기는 16을 기수로 사용한다: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 이러한 체계가 처음에는 좀 혼동을주지만, 컴퓨터 환경에는 매우 잘 들어맞는다. 예를들어 한 바이트의 정보는 8 비트로 (10011101) 로 표기할 수 있고, 십진법의 수로 (913) 으로 쓸 수 있지만 16진수로는 간단히 (9D) 로 표기된다. 16진수에서 한 바이트는 두자리 숫자로 나타낼 수 있다</FONT></TD> </TR> </TABLE><br> <br> <LI><span style="background-color:#CCFFCC"><B><FONT COLOR="#0000FF">헥사 코드란 RED(빨간색), GREEN(녹색), BLUE(파란색) 세가지 색상을 16진수로 표현한 값</FONT></B></span>을 말합니다.<br> <br> <LI><span style="background-color:#FFF7FF"><B><FONT COLOR="#FF0000">16진수는 1에서 0까지의 10개의 숫자와 A에서 F까지의 6개의 문자를 조합한 16개의 기호, 즉 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F로 각각의 색상을 00에서 FF까지 256색으로 표현</FONT></B></span>할 수 있습니다. 16 진수의 값은 <B>#<FONT COLOR="#FF0000">(RED)</FONT><FONT COLOR="#00FF00">(GREEN)</FONT><FONT COLOR="#0000FF">(BLUE)</FONT></B> 각각 두자리 숫자로 되어 있습니다<br> <br> <LI><B>16진수</B>로 사용할 경우 원리는 다음과 같습니다. <br> <TABLE > <TR> <TD> <FONT COLOR="#0000FF">① 6자리 수를 사용합니다. <br> ② #xxxxxx 앞쪽에 수(Number)를 뜻하는 #기호를 넣습니다.<br> ③ 6자리수를 2자리씩 나눠서 앞자리부터 "Red" "Green" "Blue"의 값을 줍니다.<br> ④ 각 2자리 수는 16진수 이며, 00 ~ FF의 값을 갖게 되죠.<br> </FONT><TABLE align=center> <TR> <TD><FONT SIZE="2" COLOR="#006600">예를 들어 #000000이면 세가지 색이 모두 없으므로 검정색입니다.<br> 또 #0000FF 이면 파란색만 값이 최대이므로 파란색이 됩니다.<br> 또 #FF00FF 이면 파란색과 빨간색의 값이 최대이므로 보라색이 됩니다.<br> </FONT></TD> </TR> </TABLE><br> <table border=3 cellspacing=0 cellpadding=5 bgcolor=#CCCC99 align=center> <caption align=top><b class="alert">The sixteen basic color-mapped names <br> and corresponding RGB hexadecimal values.</b></caption> <tr> <td align=center><b class="magicword">Black</b><br> 000000<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=BLACK><tr><TD><FONT COLOR=BLACK>.</FONT></TD></TR></TABLE> </td> <td align=center><b class="magicword">White</b><br> FFFFFF<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=WHITE><tr><TD><FONT COLOR=WHITE>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Red</b><br> FF0000<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=RED><tr><TD><FONT COLOR=RED>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Yellow</b><br> FFFF00<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=YELLOW><tr><TD><FONT COLOR=YELLOW>.</FONT></TD></TR></TABLE> </td> <td align=center><b class="magicword">Lime</b><br> 00FF00<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=LIME><tr><TD><FONT COLOR=LIME>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Aqua</b><br> 00FFFF<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=AQUA><tr><TD><FONT COLOR=AQUA>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Blue</b><br> 0000FF<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=BLUE><tr><TD><FONT COLOR=BLUE>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Fuchsia</b><br> FF00FF<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=FUCHSIA><tr><TD><FONT COLOR=FUCHSIA>.</FONT></TD></TR></TABLE></td> </tr> <tr> <td align=center><b class="magicword">Gray</b><br> 808080<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=GRAY><tr><TD><FONT COLOR=GRAY>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Silver</b><br> C0C0C0<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=SILVER><tr><TD><FONT COLOR=SILVER>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Maroon</b><br> 800000<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=MAROON><tr><TD><FONT COLOR=MAROON>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Olive</b><br> 808000<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=OLIVE><tr><TD><FONT COLOR=OLIVE>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Green</b><br> 008000<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=GREEN><tr><TD><FONT COLOR=GREEN>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Teal</b><br> 008080<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=TEAL><tr><TD><FONT COLOR=TEAL>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Navy</b><br> 000080<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=NAVY><tr><TD><FONT COLOR=NAVY>.</FONT></TD></TR></TABLE></td> <td align=center><b class="magicword">Purple</b><br> 800080<br> <TABLE WIDTH=15 HEIGHT=15 BGCOLOR=PURPLE><tr><TD><FONT COLOR=PURPLE>.</FONT></TD></TR></TABLE></td> </tr> </table> </TD> </TR> </TABLE><br> <LI>이러한 조합으로 만들수 있는 색상은 <FONT COLOR="#FF0000"><B>16,777,216색(256*256*256)</B></FONT>이나 됩니다. 하지만 이러한 색들이 위에서 언급한 색의 불안정성을 유발하는 요인 때문에 모든 컴퓨터에서 동일하게 보여지지 않습니다. HTML 색상표는 인터넷에 들어가면 쉽게 구할 수 있습니다 </OL> <B><FONT COLOR="#003300">★ REFERENCE : FOR MORE DETAILED COLOR</FONT></B><br> <br> <TABLE width=500 align=center> <TR> <TD>▣ <A HREF="http://developer.netscape.com/docs/manuals/communicator/jsguide4/colors.htm" target="_blank">Nescape Color Values</A><br> <br> ▣ <A HREF="http://www.lynda.com/hex.html" target="_blank">Non-Dithering Colors in Browsers</A><br> <br> ▣ <A HREF="http://www.webdiner.com/annexe/hexcode/hexcode.htm" target="_blank">Web Diner"s Hexcode Color Chart</A><br> <br> ▣ <A HREF="http://www.lib.uiowa.edu/proj/webbuilder/nondither.html" target="_blank">The 216 Non-Dithering Colors Chart</A><br> <br> ▣ <A HREF="http://the-light.com/netcol.html" target="_blank">The Browser Safe Palette (BSP) </A></TD> </TR> </TABLE><br> </TD> </TR> </TABLE> </td></tr> </table><br> <center><a href="http://cafe.daum.net/kic3629" target="_blank"> <font color="blue" size="4" face="돋음"> <center><img src=http://myhome.naver.com/suk1237/cha/10.gif></center> <br> <center> <embed src="http://61.109.255.34/stream15/kt_145/020705-143/_asf_/st/gayo/leemija/moumjib/07.asf" width="200" height="25" hidden="false" volume="0" allowNetworking='internal' allowScriptAccess='sameDomain' type='application/x-shockwave-flash'> </center> <br> <br><br> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr><td bgcolor="#D8D8D8" height="1" colspan="4"></td></tr> <tr><td height="10" colspan="4"></td></tr> <tr> <td valign="top" width="60" nowrap> <img src="http://cafeimg.hanmail.net/cf_img2/txt_allmail_preview_from.gif" width="40" height="16" border="0" align="absmiddle" alt="Rrom"> </td> <td valign="top" width="50%"> 카페 이름 : <font class="text_03">＊황혼의 낙원＊</font><br> 카페 주소 : <a href="http://cafe.daum.net/kic3629" target="_blank" class="link_board_02">http://cafe.daum.net/kic3629</a><br> 카페 소개 : <font class="text_03">철마네 자료실 입니다. 즐감 하세요.</font><br> </td> <td width="15" nowrap></td> <td valign="bottom" width="50%" class="text_gray"> ※ 음란/상업/불법내용의 메일일 경우, 스팸신고를 해주세요. </td> </tr> </table>