태그 설명시 기호를 <> 로 사용하면 html로 인식해서 바로 보여지지 않기때문에
()를
사용했습니다. 직접 해 보실땐 <>로 작성하셔야합니다
위의 것은 제홈의 '오솔길'코너의 145번 '그리운 바다'의 html
소스를 화면캡쳐한 화면입니다
태그 뒷부분이 다 안나왔지요?
정확한 태그소스는 따로 올려 놓겠습니다.
그것을 복사하셔서 제홈의
'오솔길 이미지' 코너에 있는 그림들이 크기가 같거든요.
다른 그림들을 넣어 보시면서 연습해 보시기
바랍니다.
멋진 배경위에 좋아하는 시와
음악으로 꾸미시려면 표를 먼저 만들어 그 속에 그림을 넣아야한답니다
지금부터 그림을 보고 순서대로 설명을
드리겠습니다.
(EMBED
SRC="http://www.pops2u.co.kr/music/popsong/p03257.asx" autostart=true loop=-1
hidden=true)
embed 태그는 배경음악을 불러오는 태그입니다
배경음악으로 쓸 주소 http://www.pops2u.co.kr/music/popsong/p03257.asx를 쌍따옴표 안에 넣어
놓았는데 쌍따옴표는 넣어도 되고 안넣어도 됩니다
autostart=true 는 창이 열렸을 때 음악이 자동적으로 실행(바로
들리도록) 되게 하는 옵션입니다.
loop=-1 는 반복적으로 음악이 들리도록 하는 옵션이죠
hidden=true 는
음악을 재생시키면 보통 windows media player 화면이 뜨지요? 그것을 안보이게
하는
옵션입니다.
(table border="3" width="590"
height="370" background="http://mountainbird.com.ne.kr/images2/sunrise31.jpg"
cellspacing="0" bordercolordark="black"
bordercolorlight="black")
표를 만들어 그림을 넣는다고 앞에서 설명을 드렸지요?
그 표 전체와 테두리에 관한 태그내용
입니다.
border="3" 은 테두리를 3 픽셀의 두께로 하는 옵션입니다.
width="590"
height="370" 은 표의 전체 크기를 나타내는 것으로 가로 590 픽셀 세로 370 픽셀 크기의
표라는 뜻입니다
이것은
배경그림의 크기와 같아야 그림이 꽉 차게 보이겠지요
테이블을 만들 때 배경그림의 크기를 확인하고 테이블의 가로와 세로 픽셀을
정해주셔야겠지요
(그림의 크기를 확인 하려면 인터넷에 올려진 그림 위에서 오를쪽 마우스를 눌리면 '등록정보' 가 나오지요?
그
화면에서 그림의 주소도 확인할 수 있고 해상도라고 몇 픽셀이라고 표시 되어 있답니다.)
background="http://mountainbird.com.ne.kr/images2/sunrise31.jpg" 의 background
태그는 배경그림에
관한 태그입니다.
보통 그림을 불러오는 태그로는 img src 가 있지요? 그 태그로
불러왔을땐 물론 그림은 보이겠지만
그 그림위에 글을 올릴 수가 없답니다. 배경그림으로 하시려면 반드시 background 태그를
사용해야합니다.
cellspacing="0" 는 테두리 안쪽에 여백에 관한 옵션으로 그림과 테두리와의 공간을 없애겠다는
뜻이죠.
bordercolordark="black" bordercolorlight="black" 는 테두리 색깔에 관한
옵션인데
전 테두리를 검정색으로 했답니다. 입체적으로 만드시려면 bordercolordark 색깔과 bordercolorlight 색깔을
달리하시면 되겠지요.
tr 은 행 그러니까 가로 셀 관련 태그이고
td는 열 그러니까 세로 셀 관련
태그입니다.
여기선 셀이 한 개로 되어 있으니까 별다른 옵션을 적지 않았답니다
p
align="center" align 태그는 정렬에 관한 태그입니다. 그리운 바다는 제가 중앙으로 글을 정렬해
두었답니다.
배경그림을 보고서 중앙으로 정렬할 것인지 왼쪽 혹은 오른쪽으로 정렬할 것인지를 정해 주셔야겠지요.
왼쪽 정렬은 p
align="left", 오른쪽 정렬은 p align="rightr"로 해야한답니다.
여러분들도 옵션을 바꾸어서 제 홈의 태그연습실 코너에
가셔서 한번 실행 시켜보시죠 아주 재미있을겁니다.
(span
style=color:white;filter:glow(color=black);height:10)(font
size=2)(b)
위 태그는 글자에 관한 태그입니다.
배경그림의 색상이 여러색상일 때는 글자색을 단색으로 넣었을 때는 배경색에 묻혀 잘 안보일
수 있습니다.
그럴땐 글자에 효과를 넣으면 배경색상에 관계없이 선명하게 보이지요 그래서 전 filter를 glow 로
했습니다.
(span style=color:white;filter:glow(color=black);height:10)(font
size=2)(b)
글자색은 white 하얀색으로 했구요 글자테두리 색상은 black 검정색으로 했답니다.
filter를 glow
대신 shadow 효과를 적용해 보세요 그럼 그림자효과를 낼겁니다.
font size=2 는 글자 크기를 정하는 태그입니다. 숫자가
클수록 글자가 크겠지요.
b 태그는 글자를 진하게 하는 효과의 태그입니다.
참고고 u 는 글자에 밑줄이 쳐지고 i는 글자가
비스듬히 기우는 효과는 내지요.
(marquee direction="up"
scrollamount="1" loop="infinite" height="230")
marquee 태그는 글자를 움직이게 하는 태그랍니다.
direction="up" 는 글자를 위로 올라가게 하는
옵션이지요
scrollamount="1" 은 문자가 스크롤 되는 폭을 픽셀단위로 지정하는
옵션입니다.
loop="infinite" loop는 반복횟수를 지정하는 것으로 infinite 는 계속반복을
뜻하지요.
height="230" 은 글자가 움직이는 높이를 지정하는 것으로 제가 바탕화면으로 사용한
그림의 크기를 보면
높이가 370 픽셀입니다. 제목 들어가고 어느정도 공간을 두고
글자가 사라져야 하기 때문에 230 픽셀로 정했습니다.
역시 이 높이도
조금씩 수치를 달리해서 실행해 보시죠.
(span
style=color:white;filter:glow(color=black);height:10)(font size=2)(b)
<그리운
바다>(/font)(br)(br)(br)(br)(br)(br)(/b)(/span)
(marquee direction="up"
scrollamount="1" loop="infinite" height="230")
(p align="center"
style="line-height:200%;")(b)(br)(br)(br)(br)(br)(br)(br)(br)
(br)(span
style=color:white;filter:glow(color=black);height:10)(font
size=2)(b)
내가 돈보다 좋아하는 것은(br)
바다(br)
꽃도 바다고
열매도 바다다(br)
나비도 바다고 꿀벌도 바다다(br)
가까운 고향도
바다고(br)
먼 원수도 바다다(br)
내가 그리워 못 견디는
그리움이(br)
모두 바다 되었다.(br)(br)(br)
끝판에는 나도
바다 되려고(br)
마지막까지 바다에 남아있다.(br)(br)(br)
내가 가장
좋아하는 것은 (br)
바다가 삼킨 바다(br)
나도 세월이
다 가면(br)
바다가 삼킨 바다로(br)
태어날거다.(br)(br)(br)
**이
생진 **
본문 시 의 내용입니다.
(br) 태그는 enter와 같은 역할을 하는 태그입니다 줄 바꾸기
태그이지요.
참고로 (p) 태그라는 게 있는데 그것은 줄을 한줄 띄우는 태그랍니다.
태그는 space 한칸을
띄우는 태그입니다.
어떻게 생각하세요 단어와 단어 사이에 일일이 태그를 쓰고
줄 바뀔 때마다 (br) 태그를 쓰게
되면 작성하기 참 힘들겠지요?
짧은 글이면 그런 태그를 써서 작성하면 되겠지만
길면 너무 힘들겠지요?
이럴 때 pre
라는 태그를 사용하면 아주 편리하답니다.
pre 태그는 보여지는 대로 나타나게 하는 태그입니다.
그러니 시 내용만 쓰면 되는 거지요
이렇게요....
물론 pre 앞에 정렬에 관한 태그를 사용해야겠지요
(p align="center")
이라고요
(p
align="center")(pre)(span
style=color:white;filter:glow(color=black);height:10)(font size=2)(b)
(그리운
바다)
내가 돈보다 좋아하는 것은
바다
꽃도 바다고 열매도
바다다
나비도 바다고 꿀벌도 바다다
가까운 고향도 바다고
먼
원수도 바다다
내가 그리워 못 견디는 그리움이
모두 바다
되었다.
끝판에는 나도 바다 되려고
마지막까지 바다에
남아있다.
내가 가장 좋아하는 것은
바다가 삼킨
바다
나도 세월이 다 가면
바다가 삼킨
바다로
태어날거다.
** 이 생진
**
(/font)(/span)(/pre)(/p)
본문 맨 아래에 보시면 (/font)(/span)(/pre)(/p) 라고 되어 있지요?
반드시 태그를 연 순서의 역순으로 닫아
주셔야합니다.
저 위의 그림에 있는 것처럼 본문이 다 끝나고는 반드시
태그를 연 순서의 역순으로 꼭 닫아
주셔야합니다.
td, tr, table 태그 까지도요.
이렇게.....
(/font)(/b)(/span)(/b)(/p)(/td)(/tr)(/table)
이상 '그리운 바다'의 html 소스 관련 설명을
마칩니다.
제가 태그에 관한 자료들을 체계적으로 정리를 할 수가 없어
예제를 들어 설명을 하고 관련된 태그들을 덧붙여서 설명
하다보니
상당히 길지요?
초보분들은 한번 봐서는 이해하시기 힘드실지 모르겠습니다.
쉽게 풀어 설명 한다고 했는데 설명이
부족한 부분이 있으면
게시판에 질문을 해 주셔도 괜찮습니다.
태그를 조금 아시는 분이시라면 몇 번을 읽어 보시게
되면
이해 하실 수 있으리라 생각되어 집니다.
좋은 작품 많이 만드시기 바랍니다.
