Download presentation
Presentation is loading. Please wait.
1
예제모음
2
[예제모음_01] 잡지 기사 만들기 예제설명 실행결과 테이블과 목록 테이블을 활용하여 이미지와 텍스트를 배치해보자.
사용 이미지 : s1.jpg, s2.jpg, s3.jpg 실행결과
![[예제모음_01] 잡지 기사 만들기 예제설명 실행결과 테이블과 목록 테이블을 활용하여 이미지와 텍스트를 배치해보자.](http://slidesplayer.org/slide/14122873/86/images/2/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_01%5D+%EC%9E%A1%EC%A7%80+%EA%B8%B0%EC%82%AC+%EB%A7%8C%EB%93%A4%EA%B8%B0+%EC%98%88%EC%A0%9C%EC%84%A4%EB%AA%85+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC+%ED%85%8C%EC%9D%B4%EB%B8%94%EA%B3%BC+%EB%AA%A9%EB%A1%9D+%ED%85%8C%EC%9D%B4%EB%B8%94%EC%9D%84+%ED%99%9C%EC%9A%A9%ED%95%98%EC%97%AC+%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%99%80+%ED%85%8D%EC%8A%A4%ED%8A%B8%EB%A5%BC+%EB%B0%B0%EC%B9%98%ED%95%B4%EB%B3%B4%EC%9E%90..jpg "사용 이미지 : s1.jpg, s2.jpg, s3.jpg. 실행결과.")
3
[예제모음_01] 소스 01 <HTML><HEAD><TITLE>예제모음2</TITLE></HEAD> 02 <BODY> 03 <TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0> 04 <TR> <TD align=right width=260><IMG hspace=3 src="s1.jpg"> </TD> <TD width=3 bgColor=#7b928a> </TD> <TD width=327> <DIV align=justify><B>☆ 꼭 실천해야 할<br> 대화의 테크닉</B> </TD></TR> 09 <TR> <TD colSpan=2> <OL> <LI>말을 할 때는 이성적이고 논리적인 사고를 하고 <LI>말을 시작하기 전에 먼저 3초간 요점을 가다듬고 정리할 것. <LI>불만이나 푸념 또는 부정적인 말을 가급적 자제할 것.
![[예제모음_01] 소스 01 <HTML><HEAD><TITLE>예제모음2</TITLE></HEAD> 02 <BODY> 03 <TABLE cellSpacing=0 cellPadding=0 width=600 align=center border=0>](http://slidesplayer.org/slide/14122873/86/images/3/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_01%5D+%EC%86%8C%EC%8A%A4+01+%3CHTML%3E%3CHEAD%3E%3CTITLE%3E%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C2%3C%2FTITLE%3E%3C%2FHEAD%3E+02+%3CBODY%3E+03+%3CTABLE+cellSpacing%3D0+cellPadding%3D0+width%3D600+align%3Dcenter+border%3D0%3E.jpg "04 <TR> 05 <TD align=right width=260><IMG hspace=3 src= s1.jpg > </TD> 06 <TD width=3 bgColor=#7b928a> </TD> 07 <TD width=327> 08 <DIV align=justify><B>☆ 꼭 실천해야 할<br> 대화의 테크닉</B> </TD></TR> 09 <TR> 10 <TD colSpan=2> <OL> 12 <LI>말을 할 때는 이성적이고 논리적인 사고를 하고. <LI>말을 시작하기 전에 먼저 3초간 요점을 가다듬고 정리할 것. 14 <LI>불만이나 푸념 또는 부정적인 말을 가급적 자제할 것.")
4
[예제모음_01] 소스 15 <LI>목소리의 속도와 높이, 그리고 크기를 변화있게 잘 조절해서 말할 것.
</OL></TD> 17 <TD><IMG src="s2.jpg"> </TD></TR> 18 <TR> 19 <TD align=right colSpan=2><IMG src="s3.jpg"> </TD> 20 <TD> <OL start=5> <LI>간결하고 명확한 문장구사를 하도록 할 것. <LI>평소에 대중 앞에 서는 연습을 자주할 것. <LI>보다 넓고 깊은 안목으로 세상을 관찰하여 이야기거리를 많이 만들어 둘 것. <LI>심각한 이야기에도 때로는 유머를 섞어 긴장을 없애는 여유를 가질 것. </LI></OL></TD></TR> 27 </TABLE></BODY></HTML>
![[예제모음_01] 소스 15 <LI>목소리의 속도와 높이, 그리고 크기를 변화있게 잘 조절해서 말할 것.](http://slidesplayer.org/slide/14122873/86/images/4/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_01%5D+%EC%86%8C%EC%8A%A4+15+%3CLI%3E%EB%AA%A9%EC%86%8C%EB%A6%AC%EC%9D%98+%EC%86%8D%EB%8F%84%EC%99%80+%EB%86%92%EC%9D%B4%2C+%EA%B7%B8%EB%A6%AC%EA%B3%A0+%ED%81%AC%EA%B8%B0%EB%A5%BC+%EB%B3%80%ED%99%94%EC%9E%88%EA%B2%8C+%EC%9E%98+%EC%A1%B0%EC%A0%88%ED%95%B4%EC%84%9C+%EB%A7%90%ED%95%A0+%EA%B2%83..jpg "16 </OL></TD> 17 <TD><IMG src= s2.jpg > </TD></TR> 18 <TR> 19 <TD align=right colSpan=2><IMG src= s3.jpg > </TD> 20 <TD> 21 <OL start=5> 22 <LI>간결하고 명확한 문장구사를 하도록 할 것. 23 <LI>평소에 대중 앞에 서는 연습을 자주할 것. 24 <LI>보다 넓고 깊은 안목으로 세상을 관찰하여 이야기거리를 많이 만들어 둘 것. 25 <LI>심각한 이야기에도 때로는 유머를 섞어 긴장을 없애는 여유를 가질 것. 26 </LI></OL></TD></TR> 27 </TABLE></BODY></HTML>")
5
[예제모음_02] 음악 다운로드 사이트 만들기 예제설명 실행결과
하이퍼링크와 테이블을 이용하여 음악을 다운로드받는 페이지를 만들어보자. 사용 이미지 : love5.jpg, bullet2.gif 실행결과
![[예제모음_02] 음악 다운로드 사이트 만들기 예제설명 실행결과](http://slidesplayer.org/slide/14122873/86/images/5/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_02%5D+%EC%9D%8C%EC%95%85+%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C+%EC%82%AC%EC%9D%B4%ED%8A%B8+%EB%A7%8C%EB%93%A4%EA%B8%B0+%EC%98%88%EC%A0%9C%EC%84%A4%EB%AA%85+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC.jpg "하이퍼링크와 테이블을 이용하여 음악을 다운로드받는 페이지를 만들어보자. 사용 이미지 : love5.jpg, bullet2.gif. 실행결과.")
6
[예제모음_02] 소스 01 <html><head><title>예제모음3</title></head> 02 <body text=#191970><center><h3>SG 워너비</h3> 03 <table width="700" border="0" cellspacing="0" cellpadding="0" align="center" > 04 <tr> <td rowspan="2"><img src="love5.jpg"></td> 05 <td valign="top" bgcolor="#a9a9a9”height="25"> </td> 06 </tr> 07 <tr> 08 <td valign="middle" align="left" bgcolor="#F7FAFD"> 09 <table width=350 align=center> 10 <tr><td> 광<br><br> 한 여름날의 꿈<br><br> 아리랑<br> <br> 비틀즈의 노래보다<br> <br> TIMELESS<br><br> 살다가<br> <br> 내사람<br> 18
![[예제모음_02] 소스 01 <html><head><title>예제모음3</title></head> 02 <body text=#191970><center><h3>SG 워너비</h3>](http://slidesplayer.org/slide/14122873/86/images/6/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_02%5D+%EC%86%8C%EC%8A%A4+01+%3Chtml%3E%3Chead%3E%3Ctitle%3E%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C3%3C%2Ftitle%3E%3C%2Fhead%3E+02+%3Cbody+text%3D%23191970%3E%3Ccenter%3E%3Ch3%3ESG+%EC%9B%8C%EB%84%88%EB%B9%84%3C%2Fh3%3E.jpg "03 <table width= 700 border= 0 cellspacing= 0 cellpadding= 0 align= center > 04 <tr> <td rowspan= 2 ><img src= love5.jpg ></td> 05 <td valign= top bgcolor= #a9a9a9 height= 25 > </td> 06 </tr> 07 <tr> 08 <td valign= middle align= left bgcolor= #F7FAFD > 09 <table width=350 align=center> 10 <tr><td> 광<br><br> 한 여름날의 꿈<br><br> 아리랑<br> <br> 비틀즈의 노래보다<br> <br> TIMELESS<br><br> 살다가<br> <br> 내사람<br> 18.")
7
[예제모음_02] 소스 19 </td><td> 20 <a href="http://~~~~">
링크는 사용자가 임의로 지정 19 </td><td> <a href=" <img src=”bullet2.gif”border=0></a><br><br> <a href=" <img src="bullet2.gif" border=0></a><br><br> <a href=" <img src="bullet2.gif" border=0></a><br><br> <a href=" <img src="bullet2.gif" border=0></a><br><br> <a href=" <img src="bullet2.gif”border=0></a><br><br> <a href=" <img src="bullet2.gif" border=0></a><br><br> <a href=" <img src="bullet2.gif" border=0></a><br><br> 34 <br></td></tr></table> 35 </td></tr></table> 36 </body> 37 </html>
![[예제모음_02] 소스 19 </td><td> 20 <a href= >](http://slidesplayer.org/slide/14122873/86/images/7/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_02%5D+%EC%86%8C%EC%8A%A4+19+%3C%2Ftd%3E%3Ctd%3E+20+%3Ca+href%3D+++%3E.jpg "링크는 사용자가 임의로 지정. 19 </td><td> 20 <a href= > 21 <img src= bullet2.gif border=0></a><br><br> 22 <a href= > 23 <img src= bullet2.gif border=0></a><br><br> 24 <a href= > 25 <img src= bullet2.gif border=0></a><br><br> 26 <a href= > 27 <img src= bullet2.gif border=0></a><br><br> 28 <a href= > 29 <img src= bullet2.gif border=0></a><br><br> 30 <a href= > 31 <img src= bullet2.gif border=0></a><br><br> 32 <a href= > 33 <img src= bullet2.gif border=0></a><br><br> 34 <br></td></tr></table> 35 </td></tr></table> 36 </body> 37 </html>")
8
[예제모음_03] 사이트 맵 만들기 예제설명 실행결과
웹 페이지의 전체 구조를 나타내는 사이트 맵을 테이블과 목록 태그를 이용하여 작성해보자. 글자 색상 : #ff5500, 셀 음영 색상 : #f0e68c 각 행의 너비 : 200px, 셀 안 여백: 10px 1, 3행 높이 : 60px 실행결과
![[예제모음_03] 사이트 맵 만들기 예제설명 실행결과](http://slidesplayer.org/slide/14122873/86/images/8/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_03%5D+%EC%82%AC%EC%9D%B4%ED%8A%B8+%EB%A7%B5+%EB%A7%8C%EB%93%A4%EA%B8%B0+%EC%98%88%EC%A0%9C%EC%84%A4%EB%AA%85+%EC%8B%A4%ED%96%89%EA%B2%B0%EA%B3%BC.jpg "웹 페이지의 전체 구조를 나타내는 사이트 맵을 테이블과 목록 태그를 이용하여 작성해보자. 글자 색상 : #ff5500, 셀 음영 색상 : #f0e68c. 각 행의 너비 : 200px, 셀 안 여백: 10px 1, 3행 높이 : 60px. 실행결과.")
9
[예제모음_03] 소스 01 <html><head><title>예제모음4</title></head> 02 <body text=#ff5500> 03 <h3 align=center>사이트 맵</h3> 04 <table border=0 width=600 cellpadding=0 cellspacing=0 align=center> 05 <tr><td> 06 <table border="1" cellpadding="10" cellspacing="1" align="center"> <tr height="60" align="center" bgcolor="#f0e68c"> 08 <th width="200">회사소개</th><th width="200">주문하기</th><th width="200">장바구니 </th> </tr> <tr valign="top"> <td> <ul><li>회사 역사<li>회사 위치<li>회사 연락처</ul></td> <td> <ul><li>음악 <li>영화<li>공연 </ul></td> <td> <ul><li>내정보<li>장바구니담기<li>구입 목록 </ul></td> </tr> <tr height="60" align="center" bgcolor="#f0e68c"> 13 <th width="200">배송확인</th><th width="200">게시판</th><th width="200">Q&A</th> </tr> <tr valign="top" > <td> <ul><li>배송일<li>배송업체<li>배송상태</ul></td> <td> <ul><li>자유게시판<li>방명록<li>묻고답하기 </ul></td> <td> <ul><li>자주하는 질문<li>매니아그룹 </ul></td> </tr> 18 </table> 19 </td></tr> </table></body></html>
![[예제모음_03] 소스 01 <html><head><title>예제모음4</title></head> 02 <body text=#ff5500> 03 <h3 align=center>사이트 맵</h3>](http://slidesplayer.org/slide/14122873/86/images/9/%5B%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C_03%5D+%EC%86%8C%EC%8A%A4+01+%3Chtml%3E%3Chead%3E%3Ctitle%3E%EC%98%88%EC%A0%9C%EB%AA%A8%EC%9D%8C4%3C%2Ftitle%3E%3C%2Fhead%3E+02+%3Cbody+text%3D%23ff5500%3E+03+%3Ch3+align%3Dcenter%3E%EC%82%AC%EC%9D%B4%ED%8A%B8+%EB%A7%B5%3C%2Fh3%3E.jpg "04 <table border=0 width=600 cellpadding=0 cellspacing=0 align=center> 05 <tr><td> 06 <table border= 1 cellpadding= 10 cellspacing= 1 align= center > 07 <tr height= 60 align= center bgcolor= #f0e68c > 08 <th width= 200 >회사소개</th><th width= 200 >주문하기</th><th width= 200 >장바구니. </th> </tr> 09 <tr valign= top > <td> <ul><li>회사 역사<li>회사 위치<li>회사 연락처</ul></td> 10 <td> <ul><li>음악 <li>영화<li>공연 </ul></td> 11 <td> <ul><li>내정보<li>장바구니담기<li>구입 목록 </ul></td> </tr> 12 <tr height= 60 align= center bgcolor= #f0e68c > 13 <th width= 200 >배송확인</th><th width= 200 >게시판</th><th width= 200 >Q&A</th> </tr> 14 <tr valign= top > <td> 15 <ul><li>배송일<li>배송업체<li>배송상태</ul></td> 16 <td> <ul><li>자유게시판<li>방명록<li>묻고답하기 </ul></td> 17 <td> <ul><li>자주하는 질문<li>매니아그룹 </ul></td> </tr> 18 </table> 19 </td></tr> </table></body></html>")
Similar presentations
