그림 위에 글 올리기
[그림 불러오기 두 가지 방법] 인테넷 여기저기를 다니다 보면 좋은그림을 만나게됩니다. 그런것을 보게되면 다른 사람에게 보여주고싶은 마음이 들지요. 제가 올렸던 '달맞이꽃' 그림을 이용해서 두가지 방법을 설명 드려봅니다. ★ 그림 불러오기 첫번째...<img src="http://washing.co.kr/su/su053-1.jpg"> 위 태그문서(영문) 중에서 http://washing.co.kr/su/su053-1.jpg 은 그림의 위치를 나타내주는 주소입니다. 그리고 img src 은 오른쪽의 그림의 주소를 찾아서 모니터에 나타나게 하라는 명령어 입니다. 우리가 편지를 보내게 되면 받는사람의 주소를 정확히 써줘야 되는것 처럼 이곳의 그림 주소도 정확하게 써줘야 모니터상에 나타나게 되는것이지요. 자 그럼 위 문서를 실행시켜 보겠습니다.
이렇게 나타나게 되는거지요.. 너무 쉽나요? 태그 별거 아닙니다. 두번째가 중요합니다. 왜냐하면 다음에 그림불러오는 방법은 님들께서 영상작품을 만드실때 꼭 필요한 부분이기 때문입니다.
★그림 불러오기 두번째..</font></pre> <table background="http://washing.co.kr/su/su053-1.jpg" width=620 height=480 style="line-height:150%; margin-top:0; margin-bottom:0;"><td> <p style="line-height:150%; margin-top:0; margin-bottom:0;"> 위 태그문서 중에서 http://washing.co.kr/su/su053-1.jpg 은 첫번째와 같이 그림의 위치를 나타내주는 주소입니다. 그리고 table background 은 오른쪽의 그림의 주소를 찾아서 모니터에 나타나게 하라는 명령어 인데요... 여기 두번째 에서는 첫번째와 그 의미가 약간 차이가 있습니다. 그럼 첫번째와 비교해 보겠습니다. 1. http~~~~~~jpg 양쪽에 반드시 큰따옴표 " " 를 붙인다. (첫번째는 넣어주지 않아도 된다) 2. width=620 height=480 이와같이 그림의 사이즈를 반드시 넣어 주어야 한다. (첫번째에서는 사이즈를 넣지 않아도 무관하다) 3. td 라는 새로운 문서가 나타났습니다. 이 문서는 중요합니다. 나중에 영상 제작시 무지하게 요긴하게 쓰일겁니다. 이번에도 위 태그문서를 실행시켜 보겠습니다.
이렇게 첫번째와 다를바 없이 모니터에 나타나게 됩니다. 그러나 위에서 지적한 몇가지 다른점이 있습니다. 첫번째와 두번째를 각각 한두번씩 연습하시기 바랍니다. 지금까지 알아본 글자와 그림에대한 태그를 이해하시면 영상물 제작에 아무런 문제가없습니다.
**2)그림위에 글씨 넣기 이제 그림위에 글씨를 올려보겠습니다. 1. 아래에서 배운 그림불러오기 두번째 방법으로 이곳으로 그림을 불러옵니다.</font></pre> <table background="http://washing.co.kr/su/su053-1.jpg" width=620 height=480 style="line-height:150%; margin-top:0; margin-bottom:0;"><td> <p style="line-height:150%; margin-top:0; margin-bottom:0;"> 2. 그다음 먼저배우신 글자태그를 적용하여 내용을 적어넣으시구요. 예)<font color="white" size="3" face="굴림체">반갑습니다<br> 저는 초등학교 4학년입니다<br> 언제나<br> 행복하시길 바랍니다.<br> ★ 위 내용중에 새로운 단어가 나타났지요??..<br>이라는것... 이 명령어는 줄을 띄우라는 명령어 입니다, <br> 을 한번하면 엔터를 한번치는효과... 두번치면 엔터를 두번치는효과입니다. 3. 이제 마감을 해야 합니다. 즉 위 태그문서중에 명령어를 넣은 단어들은 모두 마감을 해주어야 아래 계속되는 다른 내용들이 변형이 되지않습니다. 명령을한 역순으로.... </font> </td> </tr> </table> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font size=3> 이렇게 하시면 되는겁니다. 그럼 정리하겠습니다. 아래 점선안에 내용처럼 태그문서를 만들어 보시기 바랍니다. .................................................................</font> <table background="http://washing.co.kr/su/su053-1.jpg" width=620 height=480 style="line-height:150%; margin-top:0; margin-bottom:0;"><td> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font color="white" size="3" face="굴림체">반갑습니다<br> 저는 초등학교 4학년입니다<br> 언제나 <br> 행복하시길 바랍니다.<br> </font> </td> </tr> </table> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font size=3> ................................................................ 위와같이 점선안에 내용처럼 태그문서를 (명령어) 만들어 주시면 되는거지요. 그럼 위 문서를 게시판같은곳에 실행시키면 아래와 같이 나타나게 됩니다.
반갑습니다
저는 초등학교 4학년입니다
언제나
행복하시길 바랍니다.
다들 되셨나요? 반드시 게시판 하단에 "HTML 포함"에 체크하시구요... 이것만 하시게되면 태그 끝입니다 나머지는 님들 각자 응용을 하시면서 만드시면 모든 영상물을 만드실수 있습니다.
3)그림위에 글 올리기 글씨를 위로 올려보겠습니다. 아주 쉽습니다. 위의 소스를 그대로 적용해 보지요........................................................................</font></font></pre> <table background="http://washing.co.kr/su/su053-1.jpg" width=620 height=480 style="line-height:150%; margin-top:0; margin-bottom:0;"><td> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font color="white" size="3" face="굴림체">반갑습니다<br> 저는 초등하교 4학년입니다<br> 언제나 <br> 행복하시길 바랍니다.<br> </font> </td> </tr> </table> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font size=3><font size=3>................................................................. 그럼 글씨를 위로 올라가게 하려면 어떻게 할까요?? 글씨를 지정한 태그문서(명령어)위에 글씨를 올라가게 하는 명령어.. 즉 <marquee direction="up" scrollamount=2 height="100"> 을 넣어주시면 되는겁니다. ★ marquee direction="up" 은 글씨를 올리라는 명령어.. ★ scrollamount=1 은 올라가는 글씨의 속도.. (낮게하면 느려집니다.) ★ height="100" 은 글씨가 나타나는 곳에서 사라질때 까지의 간격.. 그럼 문서를 만들어 보겠습니다. .......................................................</font></font> <table background="http://washing.co.kr/su/su053-1.jpg" width=620 height=480 style="line-height:150%; margin-top:0; margin-bottom:0;"><td> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><marquee direction="up" scrollamount=1 height="100"> <font color="white" size="3" face="굴림체">반갑습니다<br> 저는 초등학교 4학년입니다<br> 언제나 <br> 행복하시길 바랍니다.<br> </font></marquee> </td> </tr> </table> <p style="line-height:150%; margin-top:0; margin-bottom:0;"><font size=3><font size=3>............................................................. 위와같이 만들어 주시면 되겠지요? 여기서 주의할점은 명령어가 하나 더 늘었습니다. 바로 marquee 이것인데요. 그러니까 마감할때도 하나더 해주시면 되는겁니다. </marquee> 이렇게요.... 다들 이해되시지요? 그럼 위에 만든 문서를 실행시켜 보겠습니다.
이제는 잘 되겠지요?