산행기사진붙이기1

바탕액자 만들기(뽀대 맹글기) 

산행기나 사진을 올릴때 바탕으로 쓰는 뽀대에 대하여

그동안 몇차례 설명드린바 있으나 아직 이해가 되지 않는다는 분이 계셔서

최신버전으로 다시 설명을 드리려고 합니다.

사진찍기도우미-방에 보시면 바탕액자-에 대하여 설명한 게시물이

있으니 참고 하시고요. 오늘은 종합적으로 설명드리겠습니다.

지금 흐르는 곡은 스모키 종합판이구요.

사진은 어제 아침 출근길에서 집 대문앞과 길가에서 찍은 것 입니다.

뽀대 설명에 앞서 게시물에 관한 얘기부터 시작하겠습니다.

예전에 부언하였듯 저도 사진을 넣은 게시물을 만든지가

그리 오래되지 않았고 처음엔 버벅대기 일쑤였구요

지금도 그리 세련되지는 않았다고 스스로 생각합니다.

따라서 저의 설명은 정답이 아닐수도 있다는 점을 감안하십시오.

~잘뜨는 게시물~

인터넷 게시물은 작성자만 보는 보존판이라 하더라도 그렇고

나눔을 위한 게시물은 더더욱 가급적 빨리 뜨는게 좋다고 봅니다.

빨리 뜨게하는 방법은 사진의 장수를 줄이거나 사진 한장당

파일의 용량을 줄이는 방법이 있겠습니다.

사진도 크며 파일용량도 큰데다가 사진장수도 많으면 가장 악조건이 되겠습니다.

땀을 뻘뻘 흘려가며 고생하여 얻은 사진이라는 점을 서로 잘아는

산꾼들 간에도 잘 안뜨는 게시물은 호응을 얻기가 힘들거라 생각합니다.

사실 제 게시물도 만만치는 않습니다만 예전에 비해 나아지고 있습니다.

또하나의 방법은 게시물을 경우에 따라 편수를 나누는 것 입니다.

상-하 또는 전-후 이런식이죠..

사진 파일용량을 줄이는 방법은 이미 권장 해드린 "와우이미지에디터" -에서

폴더전체를 10% ~ 20% 정도 줄여도 화질에는 영향이 없더라구요.

이 방법을 이용하면 포토웍스에서와 같이 폴더의 사진 전체를 줄여서

경우에 따라 용량을 절반이하로 뚝 떨어뜨리는 효과가 있습니다.

물론 사진장수가 많지 않으면 하지 않아도 되는거구요.

~멋진뽀대~

멋진뽀대는 계절이나 사진의 색감 등에 따라 분위기에 맞는 것이라고

하겠지요. 사진을 위주로 한다면 사진이 최대한 색감이 잘 나타나게 한다든지

하는 그 바탕의 색이 중요하다고 봅니다.

물론 사진이 개별적으로 잘 보이는 역할도 하지만 전체적인 분위기도 좌우 하지요.

아래에 가서 계속하겠습니다.

 

 

~뽀대넣기~

★게시물 만드는 순서★

제가 게시물 만드는 순서를 설명드리면

디카에서 내컴으로 사진저장→포토웍스로 싸이즈줄이기 및 후보정→

와우이미지에디터로 용량줄임→올릴 사진추출→다음블로그에 사진저장→

다음카페 작업실에서 HTML작성기에 이미 기본으로 만들어진 뽀대소스를 넣고→

창을 2개를 열어놓고→블로그 사진을 클릭하여 큰사진의 주소를 복사→

뽀대에 사진주소 넣기및 사진크기도 같이 써넣음→사진 사이에 글쓰기 작업→

ok등 싸이트에 소스를 복사해서 붙여넣기를 함.

제 경험으론 이미지를 띄워놓고 작업하는 것보다는 태그소스로 작업을 하는것이

원칙적이고 확실한 방법이 되겠습니다.

태그소스가 처음엔 복잡해 보이지만 알고보면 몇가지 안되기에

몇번 반복하면 쉽게 익힐 수 있으리라 봅니다.

★그럼 지금 보고계신 이 게시물의 기본 태그소스를 설명드리겠습니다.★

영문으로 된 소스들은 대,소문자를 구별하지 않습니다.

모든 소스의 양쪽에는 각진 괄호 표시가 있구요

*표를 넣은 이유는 안넣으면 실행 되기 때문에 설명드리기 위해

넣은것 뿐이구요. 일단 보시지요.

-----------------------------------------------------------------------------

↓여기부터↓

<*TABLE borderColor=0 cellSpacing=0 cellPadding=20 bgColor=0 border=30>
<*TBODY><*TR><*TD>
<*BR><*BR><*BR><*BR><*BR>
<*FONT style="FONT-SIZE: 13pt" face=돋움체 color=red>
<*BR>

<*CENTER><*B>뽀대 맹글기<*/B>
<*BR><*BR>
<*FONT style="FONT-SIZE: 11pt" face=돋움체 color=#999999>
<*CENTER>산행기나 사진을 올릴때 바탕으로 쓰는 뽀대에 대하여
<*CENTER>그동안 몇차례 설명드린바 있으나 아직 이해가 되지 않는다는 분이 계셔서
<*CENTER>최신버전으로 다시 설명을 드리려고 합니다.

.

.

중략

.

.
<*CENTER>1
<*CENTER>
<*TABLE width=800 height=532
background="http://cfs2.blog.daum.net/upload_control/download.blog?
fhandle=MDRKN2dAZnMyLmJsb2cuZGF1bS5uZXQ6L0lNQUdFLzExLzExMTYuanBn&filename=1116.jpg">
<*TBODY><*TR><*TD><*/TABLE>
<*BR><*BR><*BR><*BR><*BR>
<*CENTER><*IMG src="http://icon.sie.net/image/man/bow/bow24.gif"엎드려절>
<*BR><*BR>
<*CENTER>향적봉 올림.
<*BR><*BR>
<*EMBED style="FILTER: gray()" src=http://myhome.naver.com/hihik12/song6.asx
width=200 height=25 autostart="true" loop="true" volume="0">
<*/FONT><*/CENTER><*/TD><*/TR><*/TBODY><*/TABLE><*/TBODY>

↑여기까지↑

-----------------------------------------------------------------------------

설명드리기 위해 사진소스는 한개만 넣었구요.

그럼 위의 소스를 분석하며 설명하겠습니다.
<*TABLE borderColor=0 cellSpacing=0 cellPadding=20 bgColor=0 border=30>
<*TBODY><*TR><*TD>

맨위의 이 소스와
<*/FONT><*/CENTER><*/TD><*/TR><*/TBODY><*/TABLE><*/TBODY>

맨아래의 이 소스가 핵심입니다.

이것이 바탕을 구성하는 것이구요 가운데 나머지는 사진과 글을 구성하는 것입니다.

위의 것은 뽀대의 구성을 지정하는 것이고

아래의 것은 뽀대를 끝내겠다는 뜻으로 단어 앞에 / 가 들어갑니다.

TABLE
테이블을 구성하는 단어
borderColor=0
가운데 바탕색 지정(0은 검정색)
cellSpacing=0
바깥테두리 안에 또하나의 안쪽테두리의 두께(0 이면 없음)
cellPadding=20
바깥테두리와 바탕과의 거리(숫자가 크면 바탕색 화면이 넓어짐)
bgColor=0
바깥테두리의 색상(마찬가지로 0은 검정색)
border=30
바깥테두리의 두께(숫자가 커지면 테두리의 폭이 넓어짐)

색상은 아래쪽에 색상을 찾는 싸이트를 두겠으니

찾아서 써 넣으시면 되는데요. 색상의 이름을 영문으로 써 넣어도 되고

색상번호를 써 넣어도 됩니다.

바탕의 색상과..테두리의 색상..그리고 그 폭을 지정하는 숫자를

변경함으로써 다양한 분위기의 바탕 뽀대를 만들수가 있겠습니다.

만약 테두리만 어떤 색상으로 만들고 바탕을 그냥 하얗게 하려면

바탕색을 white로 지정하면 되고, 테두리나 바탕을 모두 하얗게 하려면

바탕 테두리 색상을 모두 white로 하면 될 것입니다.

그러나 폭을 지정하는 숫자로 인하여 화면폭이 넓어지기도 좁아지기도 하겠지요.

오늘 제가 쓴 뽀대는 바탕색상도 0 테두리색상도 0 이었기에

바탕폭을 20으로 테두리 폭을 30으로 지정하였음에도 모두 검정색으로

보이는 것입니다. 어느 한쪽에만 50으로 써도 같은 결과가 되겠지요.

맨 위쪽에 바탕을 지정하고 아래쪽에는 지정했던 것을 그만 마치겠다는

/표시가 든 소스들을 한번씩만 쓰면 테이블은 완성이 됩니다.

자 그럼 이제 안쪽에 있는 소스들을 볼까요.
<*CENTER>
가운데 위치하게 하는 것입니다.

왼쪽이면 left 오른쪽에 위치하려면 right로 쓰면 되겠지요.
그러나 CENTER를 윗부분에서 쓰고나면 잘 안되는 경향이 있습니다.
이때는 가장 윗부분부터 CENTER를 쓰지 않고 <*PRE>를 쓰고나서
글씨를 쓴다음 <*UL>을 쓰면 좌측부터 간격을 안쪽으로
밀려나게 하여 갯수를 많이 쓸수록 안쪽으로 위치하게 합니다.
<*BR>
위아래 간격을 띄라는 지정입니다. 글씨 쓰다가 줄바꾸기를 할때도 씁니다.
많이 쓰면 쓰는 만큼 위아래가 벌어집니다.
<*P>와 같이 쓰기도 하는데요 P는 여러개를 써도 한줄만 띄어져서 BR을 쓰는게 좋습니다.
<*FONT style="FONT-SIZE: 13pt" face=돋움체 color=red>
이것은 글씨를 지정합니다. pt앞의 숫자로 글씨크기를 지정하구요. face로 글씨체를 그리고
글씨 색상도 색상표를 보고 지정하면 됩니다. 참고로 바탕색과 같은 글씨 색상을
지정하면 글씨가 안보이지만 마우스로 드래그를 하면 보입니다.
퀴즈문제를 내고 여기를 긁어보세요..라고 하는 건 다 이런 방법입니다.
<*B>뽀대 맹글기<*/B>
글씨를 써 넣고 그 앞에 B를 쓰면 굵은글씨가 됩니다. 글씨뒤에 /를 안하면
이 후의 모든문장에 적용되기에 /를 합니다.

여기까지 이해 되셨나요?

이제 가장 중요한 사진넣기를 하겠습니다.

일반적으로 사진을 넣은 소스는
<*img src="사진주소">
이렇습니다. 그런데 저는
<*TABLE width=800 height=532 background="사진주소">
이렇게 쓰고 있습니다.

다른데는 상관없는데 이곳 ok의 게시판에 가로폭 600 이상의 사진을

온전하게 보이게 하려면 사진 한장마다 TABLE을 만들어야 합니다.

그래서 쓰고 있습니다만 산행기쪽에만 올리려면 img 로 올리셔도 됩니다.

다만 TABLE을 만들면 원래 폭을 제한하는 곳이 아니면 어디든 사용해도 되는

잇점이 있습니다. 번거로운 것은 사진싸이즈를 숫자로 지정하여야 하는 것입니다

사진 숫자는 사진주소를 복사하기 위해 우측마우스로 속성-을 클릭하면 주소와

싸이즈가 같이 뜨기에 쉽게 알수 있습니다.

그리고 반드시 사진소스 뒤에
<*TBODY><*TR><*TD><*/TABLE>
을 붙여주면 됩니다.

사진주소 위쪽에
<*CENTER>1
을 붙이는건 글쓰기 작업이나 사진순서를 지정할때

사진을 직접 볼수 없는 상태에서 작업을 하기에 편의상 써넣고 작업 후 지우던지

아님 바탕색상과 같은 글씨색상을 지정하면 안보이게 되지요.

CENTER를 2번 쓰는것은 세로시진의 경우는 사진이 중간에 위치하라고 지정하기 위함입니다.

사진과 사진 사이를 띄는 공간도 BR의 갯수로 지정합니다.

정리하자면 사진소스는 아래와 같습니다.
<*CENTER>1
<*CENTER>
<*TABLE width=800 height=532
background="사진주소">
<*TBODY><*TR><*TD><*/TABLE>
<*BR><*BR><*BR><*BR><*BR>

사진과 사진사이에 글씨를 써 넣고 줄바꾸기를 할때도 BR을 쓰면 되구요.

아니면 사진앞이나 문장의 줄 앞에 CENTER를 쓰면 가운데 위치하면서 자동으로 줄바꾸기가 됩니다.

최근 계백님의 산행기속에 작은 사진이 썸네일처럼 붙어 있는것을 볼 수 있는데요.

이것은 사진주소를 이어붙이기 한 것입니다.

BR을 쓰지 않을 뿐더러 주소를 연이어 붙인다는 것입니다.

샘플과 이 소스를 보겠습니다.

 

 

아래와 같은 배치를 한 것입니다.

<*img src=""><*img src="">

<*img src=""><*img src="">

만약 아래와 같이 쓰면 4장이 모두 횡으로 배열 되겠지요.

<*img src=""><*img src=""><*img src=""><*img src="">

경우에 따라 다르겠지만 큰사진과 폭을 같게 하려면 리싸이징을

큰사진 절반으로 해야겠지요..

예제로 한 계백님께서 이해 하시리라 믿습니다^^

그 다음..

사진과 글을 다 넣은 후 맨 아래쪽에는 인삿말과 음악소스를 넣구요 <*/FONT><*/CENTER><*/TD><*/TR><*/TBODY><*/TABLE><*/TBODY>
를 쓰면 끝나는 것 입니다.

제 설명이 지루하셨나요? 복잡한가요?

어차피 한번만 숙지 하면 두고두고 쓰는것이니 익히시길 바라구요.

★ok에서 간단하게 뽀대 넣기★

뽀대(테이블)를 만들고는 싶은데 과정이 복잡하다 싶으면

이것을 응용하여 하는 방법이 있겠습니다.

사진을 저장한 곳에서...

사진 저장을 완료한 후 다시 클릭하여 수정을 클릭하고

소스-를 체크하면 이면의 소스들이 보입니다.

그곳에 테이블을 지정하는 소스를 위 아래에 삽입하고 다시

소스-체크를 지우면 테이블이 생성됩니다.

일단 저장-한 다음 또다시 수정-을 한 후

사진이 보인 상태에서 그 사이에 글쓰기를 하면 되겠습니다.

글씨는 작성기의 윗부분에서 지정을 해가며 쓰시면 되구요.

정리하면..

☞ok산행기에 사진저장

☞수정을 클릭

☞소스 -체크

맨 윗부분에

<*TABLE borderColor=0 cellSpacing=0 cellPadding=40 bgColor=0 border=30>
<*TBODY><*TR><*TD>

☞맨 아래쪽에 <*/FONT><*/CENTER><*/TD><*/TR><*/TBODY><*/TABLE><*/TBODY>

라고 쓴 후(모두 *표를 제거함)

☞소스-체크 없애고

☞수정

이러면 뽀대가 완성됩니다.

바탕과 테두리색상 그리고 폭은 마음대로 지정하시고요.

아~ 그러고 보니 이렇게 간단한걸 넘 복잡하게 설명드렸나요??

"색상표1" 바로가기

"색상표2" 바로가기

"색상표3" 바로가기

"움직이는아이콘" 바로가기

"포토웍스"다운받기-바로가기

"와우이미지에디터"다운받기-바로가기

자~ 그럼 연습삼아 테이블을 하나 만들어 보겠습니다.

<*TABLE borderColor=yellow cellSpacing=5 cellPadding=20 bgColor=red border=10>
<*TBODY><*TR><*TD>
<*BR><*BR><*BR><*BR><*BR>
<*TABLE width=644 height=484
background="http://www.okmountain.com/okcafe/travel/user_img/2006_02/1139318622_113931
8622_d471c08de2292a50c17197546a53875e_0.jpg">
<*TBODY><*TR><*TD><*/TABLE>
<*BR><*BR>
<*CENTER>멋진 뽀대 맹그시길 바랍니다^^
<*BR><*BR><*BR><*BR><*BR>
<*CENTER><*IMG src="http://icon.sie.net/image/man/bow/bow24.gif"엎드려절>
<*BR><*BR>
<*CENTER>향적봉 올림.
<*BR><*BR>
<*EMBED style="FILTER: gray()" src=http://myhome.naver.com/hihik12/song6.asx
width=200 height=25 autostart="true" loop="true" volume="0"스모키종합>
<*/FONT><*/CENTER><*/TD><*/TR><*/TBODY><*/TABLE><*/TBODY>

이 게시물에 썼던 가장 위의 테이블 지정소스에

바탕색을 yellow로 지정하고 테두리를 red로 하였습니다.

cellSpacing=5를 지정하여 안쪽테두리를 하나 생성시켰습니다.

그 사이에 사진을 넣으면 사진의 폭을 양쪽으로 20씩 띄고나서

폭이 10인 테두리가 양쪽에 생성되는 것 입니다.

물론 사진의 크기에 따라서 적당하게 숫자를 조정하시면 되고요.

이제 위의 소스에서 *표를 모두 빼 보겠습니다.

그러면 아래와 같은 뽀대가 됩니다.