鶴山의 草幕舍廊房

다양한 도우미

아름다운 글 올리는 방법

鶴山 徐 仁 2009. 9. 9. 14:13

아름다운 글 올리는 방법 14신(글자의 효과 )

 

 

아름다운글 올리는 방법 11 신



사랑한다는 것

안도현



 길가에 민들레 한송이 피어나면
꽃잎으로 온 하늘을 다 받치고 살듯이
이 세상에 태어나서
오직 
한 사람을 사무치게 사랑한다는 것은
이 세상을 전체를
비로소 받아들이는 것입니다.
차고 맑은 밤을 뜬눈으로 지새우고
우리가 서로 뜨겁게 사랑한다는 것은
그대는 나의 세상을
나는 그대의 세상을
함께 짊어지고
새벽을 향해 걸어가겠다는 것입니다.



오늘은 배경 그림위에 글이 올라 가게 해보겠읍니다.
10신에서 보신건 단순히 그림만 올릴때 사용하는것이고
배경위에 글을 나타내는건 또 다른 명령을 사용해야해요.
전번에 table에 대하여 배우셨읍니다
배경 그림은 table 이나 td 에서 주소를 넣어주면 됩니다
명령어는 background 입니다
그리고 font를 넣어주면 되죠
배운데로 한번 해보겠읍니다
위의 그림의 등록 정보를 보시고 주소를 복사 하세요 그리고 그림의 크기도 적어 놓아야 합니다
그런 다음 이렇게 하세요
<table background="그림 주소" "width="넓이" height="높이" border=10>
이렇게 나오겠죠
<table background=http://mysesang.com/buty/img/bs2.jpg width=518 height=362 border=10>
그다음엔 <tr><td>를 넣어 가로와 세로를 만들어 줍니다.
잘모르시겠으면여기를 다시 한번 보세요
이제 부터는 글자의 명령을 넣어 줍니다
글자는 색을 흰색으로하고 크기는 3정도로 해볼까요
<font color=white size=3>
그리고 넣고 싶은 글을 여기에 넣어요
그다음엔 위의 모든 명령을 마무리 한다고 해줘야지요
명령의 역순으로 
</font></td></tr></table>
예를 볼까요
예제보기

정리를 해보면 이렇게 되죠

<table background="http://mysesang.com/buty/img/bs2.jpg" width="518" height="362" border=10>
<tr><td>
<font color=white size=3>
홀로서기 1 <br><br>
지은이 : 서정윤<br><br> 기다림은<br>
만남을 목적으로 하지 않아도 좋다.<br>
가슴이 아프면<br>
아픈채로,<br>
바람이 불면<br>
고개를 높이 쳐들면서,<br>
아득한 미소.<br>
</font></td></tr></table> 이렇게 하면 밑의 그림이 나옵니다

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

글이 움직이지 안으니 좀 그렇죠
글을 움직일려면 marquee를 넣어서 글을 위로 움직이게하고
속도는 좀 느리게 해볼까요 
또 글이 너무 왼쪽으로 치우쳤죠
중앙 정열 할려면 center을 넣어 줘야 하고
글자가 너무 가느니깐 좀 굵게 할려면 b도 넣어야 겠어요
자 한번 해보죠 
예제보기

최종적으로 정리 하면 이렇게 됩니다

<table background="http://mysesang.com/buty/img/bs2.jpg" width="518" height="362" border=10>
<tr><td>
<marquee direction=up scrollamount=1>
<font color=white size=3><center>
<b>
홀로서기 1 <br><br>
지은이 : 서정윤<br><br> 기다림은<br>
만남을 목적으로 하지 않아도 좋다.<br>
가슴이 아프면<br>
아픈채로,<br>
바람이 불면<br>
고개를 높이 쳐들면서,<br>
아득한 미소.<br>
</b></center> </font> </marquee> </td></tr></table> 이렇게 하여 결과를 한번 보죠

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

시가있는집에 올린것과 같은 모양이 되었죠

여러분도 이제 멋지게 구상하여 한번 올려 보세요

알아 둬야 할것들

1. 바탕에 그림없이 색만 표시할때는 background를 하면 안되고 반드시 bgcolor="원하는 색"하여야하고 바탕에 그림을 넣을때는 지금 배우신대로 해야합니다

2. img src="그림주소" 하여 width와 height를 조절하면 그림 크기를 마음대로 해도 되었지만 table 의 background로할때, 다시말하면 바탕그림으로 할때는 크기조절을 하면 원본에 손상이 갑니다

예를들어 설명하죠

예제보기

원본의 그림 크기가 width=518 height362 인데 그림의 크기를 몰라서 원본의 크기보다 크게해봅시다 width=600 height450 쯤 해볼까요

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

크기가 늘어 나는게 아니라 중복되어 나타나지요

img src 에서는 크기를 조절하면 원본 그대로 확대 축소가 되지만 바탕으로 설정하여 확대 하면 원본이 중복되고 축소하면 그림이 축소한만큼 없어집니다

이 속성을 이용할수도 있죠.
필요 없는 부분을 잘라내는 효과를 볼수있어요

예를 보죠

예제보기

원본의 그림 크기가 width=518 height362 인데 그림의 크기를 몰라서 원본의 크기보다 조금 작게 해봅시다 width=480 height300 쯤 해볼까요

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

밑 부분의 배가 보기 싫군요.없에버리죠

예제보기

조금 더작게 해봅시다 width=400 height250 쯤 해봅니다

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

예제보기

오른쪽 나무가지가 좀 지저분해보이죠. 이건 잘라내고 밑의 배를 넣어 볼까요.그림이 옆으로 긴것보다 상하로 길게해봐요width=300으로 줄이고 height=362 는 원본 그대로 해보죠 글 크기를 조금 줄여야겠네요

결과보기

홀로서기 1

지은이 : 서정윤

기다림은
만남을 목적으로 하지 않아도 좋다.
가슴이 아프면
아픈채로,
바람이 불면
고개를 높이 쳐들면서,
아득한 미소.

바로위의 예와 비교해보세요. 느낌이 전혀 틀리죠? 이렇게 응용하면 같은 그림이라도 사용하는 사람에 따라 전혀 다른 느낌으로 나타낼수있어요

그럼 다음까지 안녕히....

아름다운글 올리는 방법 1 신


게시판에 올린 영상시를보시고 문의 해오시는분이 많아 HTML에 대하여 설명의글을 올려봄니다
이글을보시고 여러분들도 아름다운글을 올릴수있기를 바라며 모르는 부분이있으면 질문해 주세요.
시간이 허락하는데로 계속 설명의글을 올리겠읍니다
그럼 오늘 첫시간 순서는 HTML이란 무었인가와 준비물을 설명하겠읍니다

HTML이란 Hyper Text Markup Language의 약자로 웹브라우저에 하이퍼텍스트 기능을 가진 문서를 만드는 언어입니다. 여기서 Hyper Text라고 하는 것은 웹문서의 임의의 위치에서 해당부분을 클릭했을 때 다른 곳으로 이동하는 것이 가능하도록 해 주는 것입니다. 바로 아래의 파란색 밑줄쳐진 부분이 하이퍼텍스트입니다.

HTML은 1.0버전부터 시작해 현재 HTML3.2가 표준으로 있으며 4.0버전이 최근 발표되었습니다. HTML의 표준은 W3C
(http://www.w3.org)에서 발표하고 있는데 Netscape나 Explore는 자사 제품의 우위를 점하기 위하여 W3C의 표준을 벗어나는 확장태그를 일부 사용하고 있는 현실입니다. 그래서 똑같은 HTML 문서라도 브라우저에 따라 화면에 나타나는 것이 차이가 생기게 되고 이것이 우리를 괴롭히는 한 원인이 되고 있습니다. 고래싸움에 새우 등 터지는 꼴이죠..


인터넷에 여러분의 집을 만들기 위해서는 이러한 HTML을 배우는 것이 기초가 됩니다. HTML의 난이도는 C나 JAVA 같은 프로그래밍 언어보다는 훨씬 쉬우며 워드보다는 조금 어렵다고 생각하시면 됩니다. 그런데 이러한 HTML은 무엇을 이용해서 작성할 수 있을 까요?

우리가 문서를 작성하기 위해 워드프로세서를 사용하듯이 HTML을 작성하기 위해서도 필요한 에디터가 있습니다. 가장 기본적인 에디터는 윈도우의 메모장(NotePad)입니다. HTML문법을 모두 알고 있어야 한다는 어마어마한(?) 어려움이 있지만 기초를 튼튼히 해주고 언제 어디서나 HTML문서를 만들 수 있으며 다른 사람의 소스를 분석할 힘을 키운다는 점에서 개인적으로는 가장 추천하고 싶습니다.
~인내는 쓰지만 열매는 달지 않을까요?~

우선준비할것입니다

HTML을 배워도 연습을못한다면 안되겠죠
(메모장): 윈도우에서 기본적으로 제공되는 프로그램으로 간단한 텍스트파일 작성에사용합니다.
자 ..지금부터 따라해봅니다

위의 그림과 같이 하셔서
시작-프로그램-보조프로그램-메모장 을불러옵니다.





위의 그림과 같이 메모장이나왔나요?
메모장에 이렇게 타이핑하세요

<head> <title>HTML연습장 </title> </head> <body> 야호! 드디어 나의 연습장이 완성되었다^^ </body> </html>


되셨나요?
혹 괄호를 빼먹거나 오타가없는지 다시한번 검토하실레요?
아래 그림과 같아야 합니다



모든게 잘되셨어요.. 그럼 이제 저장할 차례입니다 제일위에서 두번째칸을보면 파일(F) 편집(E) 보기(V) 즐겨찾기(A) 라는게 보여요? 파일을 클릭하세요 밑으로 쭉보면 다른이름으로 저장 이있어요 클릭하세요

이렇게 창이뜨죠?

제일위에 위치에 가장찾기쉬운 폴드를 선택하세요 가급적이면 바탕화면에있는 폴드로 예를들면 My Documents 나 내문서등 선택하셨어요? 잘 기억해야해요 위치를.. 저는 바탕화면에 저장 하겠습니다

다음에 파일이름이 있어요. 그곳에 이렇게 적으세요 sample.html 점을 빠트리면 안됩니다 되셨나요? 다음 파일 형식이있죠? 이건 반드시 모든 파일을 선택하셔야해요 옆의 세모꼴 뒤집어진거 클릭하면 나와요 모든 파일을 선택하셨어요? 그럼 바로옆에있는 저장을 누르세요 수고하셨어요^^ 그럼 이제 확인해볼까요 내컴퓨터나 탐색기에서 조금전에 저장한걸 찾아보세요 sample 이라고 있어요? 없으면 다시한번 기억을 더듬어 조금전 저장한곳이 어디인지 생각하고 찾아보세요 찾으셨나요? 저는 바탕화면에 저장하였기에 여기서 바로 더불 쿨릭하면 나옵니다

그럼 그 sample 파일을 더블클릭해보세요 이렇게 나올걸요

제일위 파란부분을 보세요 HTML연습장 이라고 되어있나요? 성공입니다 이제 연습장이생기셨어요 다음부터 여기서 모든 HTML을 연습할거예요 처음의 준비과정이라 조금 복잡하지만 이젠 연습장이 있으니 다음부터는 간단히 연습만 하면 되죠
힘드셨어요? (^^ )//