무더운 여름이 왔습니다.
시원한 여름풍경 사진...
불러와 볼까요?



위 사진은 네이버 사이트의 <이미지 계정>에서 불러왔습니다.
<계정>이란 말은 은행으로 치자면 <계좌>란 말에 해당되겠습니다.
계좌... 내 명의로 저금이 되는 가상의 공간
계정... 각자의 명의로 컴퓨터 파일들을 저장해둘 수 있는 컴퓨터내 가상의 공간



▶첫 번째 이야기- 그림의 주소 찾기 및 복사, 붙이기
위 바다풍경은 네이버 회사의 계정에 있는 파일자료지요.
그렇다면, 그 계정주소는 무엇이고 경로는 어떻게 되며 그림파일의 이름은 무엇일까...
위 그림에 마우스를 갖다대고 마우스의 오른쪽 버튼을 눌러보세요.
아래의 그림처럼 창 하나가 뜹니다.


"다른이름으로그림저장"이나 "다른이름으로대상저장"을 누르면,
위 바다풍경사진은 여러분들 컴퓨터로 다운로드되도록
폴더 경로창을 띄웁니다.
그림을 저장하고 싶은 곳을 선택하고 새파일명을 주고난 후
저장 버튼만 누르면 그림은 바로 다운로드가 되는 거지요.
우리는 그림의 주소를 알고 싶은 것이므로, 
<등록정보> 혹은 <속성>이란 옵션을 선택하겠습니다.
선택하자마자 아래 그림과 같이 창 하나가 뜨면, <주소>란 부분을 찾을 수 있을 거예요.




"http://bingoimage.naver.com/data2/bingo_2/imgbingo_46/myfamily1255/16645/myfamily1255_5.jpg"
이게 바로 그림이 있는 곳의 주소입니다.
bingoimage.naver.com은 계정명(=계정 이름)이구요.
이 계정 안에 data2란 폴더 안에 bingo_2란 폴더가 들어있구요.
또 이 폴더 안에 imgbingo_46, 이 폴더 안에 myfamily1255, 이 안에 16645....
이 폴더 안에 바다풍경 파일인 myfamily1255_5.jpg가 있네요.
우리 눈에 보여지는 바다풍경사진의 컴퓨터내 파일 이름은 "myfamily1255_5.jpg"입니다.
이 이름이야 만드는 사람 마음이지요.
1-1로 이름짓든 50006으로 이름짓든...
하지만, 마침표 뒤의 확장자명은 반드시 존재해야합니다.
보통 인터넷 상의 그림파일 확장자명은 "jpg" 혹은 "gif"가 많이 쓰입니다.



위 그림처럼 <주소>란을 블럭설정(파란부분)하시고,
▶<주소>란 글자 바로 옆 h 코앞에다 마우스포인트(화살표모양)를 가져가면
  마우스포인트가 커서표시(로마숫자 1 표시)로 바뀌게 됩니다.
  이 때, 왼쪽 마우스를 꾹 누르고 끝까지 밀고나가시면 블럭설정이 된답니다.◀
블럭 설정이 끝난 파란부분 위에 마우스를 조심스레 갖다놓고,
오른쪽 버튼을 누르면 옵션창이 뜨지요.


<복사>를 선택하시고, 옵션창을 닫으세요.
여러분들의 컴퓨터는 바다풍경 사진의 주소를 기억하고 있습니다.


저 사진자료를 저는 어디서 찾았냐면요.
네이버 사이트로 가세요. 가셔서...






검색창에다 "여름풍경"을 치시고 우측 옆의 초록색 검색버튼을 눌러보세요.
그리고, 아래그림과 같이 빨간색으로 체크된 곳 2를 선택하시고,
앞에서 보았던 바다풍경사진을 클릭합니다.


그 다음엔 그림 위에다 마우스를 갖다댄 후, 오른 쪽 버튼을 누르세요.



어때요, 주소가 똑같이 나오죠?
이걸 두고, <링크> 했다, 혹은 <링크> 걸었다...라고 표현한답니다.
사진에서 주소를 복사하실 때 주의점은 작은그림의 주소를 복사하시면 안되고,
꼭 작은그림을 클릭해서 불러온 큰 사진의 주소를 복사하셔야 한다는 점...
웃지마세요, 실수할 때가 있으실 거예요.
'어라? 내 홈페이지에선 왜 쬐끄만하게 나오는 거지?'
이러실 땐 버튼역할을 하는 작은그림의 주소를 불러왔다는 걸 기억하세요.^^


자, 그럼 여기까지 배운 것들을 활용해보겠습니다.
익스플로어를 열었을 때 바로 아래그림처럼 나오게 
메모장에다 html태그를 이용하여 html문서를 만들까합니다.


메모장을 여시구요, (시작→프로그램→보조프로그램→메모장)
메모장의 새파일(빈 백지)에다 아래와 같이 문자들을 입력해보세요.
이런 < (꺽쇠), " " (따옴표) 하나라도 빠지면,
익스플로어는 제대로된 그림과 글들을 보여주지 않습니다.
꼭, 아래와 같이 토시하나 빠뜨리지 마시고 그대로 치세요.
(그렇다고 그림의 주소를 일일이 타자치는 분은 없으시겠죠?^^;
그림의 주소를 카피해서 주소를 칠 곳에 복사해서 붙이세요.)







▶두 번째 이야기 - pre 와 img src(그림 불러오기 명령어)
첫째날과 html 구조가 달라진 점이 있다면,
img src라는 새로운 태그명령어가 삽입되었고,
br 대신에 pre란 단어가 아래 위로 추가되었다는 점입니다.
br태그 아시죠?
문장과 다음 문장을 줄바꿈시켜주는 명령어...
한데, 이 br은 문장을 줄바꿈시킬 때마다 삽입해야 한다는 
불편한 점이 있습니다.
일일이 br을 넣지 않고, 문장을 줄바꿈시키거나 줄 간격을 벌일 수 있는 방법은???
이런 불편함을 해소시켜주는 html태그가 바로 "pre"입니다.



pre태그는 pre와 /pre 사이에 친 모든 글과 간격, 띄워쓰기까지 그대로 보여줍니다.
눈에 보이는 그대로를 익스플로어에서 띄워주죠.
그러므로, pre 바로 다음 줄에 글을 쓰지 않고,
세 칸 띄워쓰면, 익스플로어창을 열었을 때 
처음 글은 메뉴바에서 세 칸 떨어진 곳에서부터 시작하게 됩니다.

img src란 태그는 사진을 불러올 때 쓰는 html 명령어입니다.
img src= 해놓구선 그 뒤부터는 사진이 인터넷상에 위치해있는 주소를 몽땅 쓰는 거지요.


어찌됐든 메뉴장을 저장하겠습니다.
파일명을 "board.html"로 하세요.
그리고, 익스플로어에서 "board.html" 파일을 열어보세요.
아니면, 바탕화면에서 "board.html" 파일을 클릭해서 바로 여시든지요.


그런데, 이게 웬일입니까???
그림이 너무 크지 않으세요?
글도 중앙정렬이 아닌 좌측으로 몰렸구요.^^;



먼저 그림크기(=이미지 사이즈)를 줄여보겠습니다.
"board.html" 파일을 메모장으로 여세요.
줄이는 태그는 아래 빨간색으로 체크된 곳입니다.
메모장에 그 부분을 첨가하세요.

weight는 가로길이, height는 세로길이를 말하구요.
그 옆의 수치 480, 320은 말그대로 그림의 가로와 세로 수치가 되겠습니다.
나중에 수치는 자유롭게 임의대로 조정해보세요. 
이제 그림과 글을 중앙정렬할 차례입니다.


 
center.... 센터군요.
센터는 중앙을 뜻하죠. 여기서도 중앙입니다.^^
글과 그림을 중앙정렬시키는 html태그명은 center.....
여기까지 배운 것을 메모장으로 연 
"board.html" 파일에다 계속 저장하시길 바랍니다.



▶세 번째 이야기 - bgsound src 와 embed (음악파일 불러오기 명령어)
지금부터는 음악파일을 링크해서 "board.html" 파일에다 첨가해보겠습니다.
음악파일도 그림파일처럼 주소가 있습니다.
음악파일은 재생과 정지버튼이 있는 컨트롤러가 
사진처럼 우리 눈에 보이도록 짜여진 것도 있지만,
컨트롤러는 보이지 않는데, 음악이 흘러나오게끔 짜여진 것도 있습니다.
먼저, 배경음악의 컨트롤러를 숨기는 태그부터 시작하겠습니다.
다음에 보이는 배경음악의 컨트롤러 위에 마우스를 갖다댄 후,
오른 쪽 버튼을 눌러보세요.
<속성>이나 <등록정보> 옵션을 클릭하시면, 음악의 주소(혹은 위치)가 보일겁니다.
주소를 복사하시구요.



음악태그까지 넣은 "board.html"파일의 소스는 다음과 같습니다.

메모장으로 "board.html" 파일을 열어, 위 그림의 소스처럼 그대로 타자칩니다.
음악태그 bgsound src는 반드시 head와 /head 사이에 집어 넣어야 합니다.
이것은 컨트롤러를 보이지 않고 배경음악이 흘러나오게 만드는 태그 명령어입니다.
다음은 컨트롤러가 눈에 보이는 태그명령어입니다.
컨트롤러를 보이게 만드는 음악태그 명령어는 embed src입니다.
이 명령어는 head와 /head 사이가 아닌, body와 /body 사이에 넣습니다.



volume은 소리크기를 조정하는 명령어구요,
width는 컨트롤러의 가로, height는 컨트롤러의 세로 크기를 조정하는 명령어입니다.
  (그림의 가로, 세로 크기를 조정하는 명령어 중
   height는 같은데, weight와 width 이게 좀 다르지요.
   나도 헷갈린다...ㅇ 
   음악태그에 weight를 적용해도 컨트롤러 창이 나오긴 하나
   수치는 무시되는 듯 합니다.)
autostart는 자동재생을 뜻하구요, 
autostart=0으로 했을 때는 익스플로어창을 열었을 때, 
음악 컨트롤러는 보여도 음악이 저절로 흘러나오지는 않습니다.
컨트롤러의 재생버튼을 눌러줘야 하지요.
하지만, autostart=1로 했을 때는 자동재생, 즉 음악이 저절로 흘러나온답니다.



▶네 번째 이야기 - embed (동영상 불러오기 명령어)
지금부터는 동영상태그 명령어에 대해 알아보겠습니다.
동영상명령어는 음악명령어와 같습니다.
먼저 동영상의 주소를 알아낸 후, 음악명령어 삽입과 같이 embed src를 쳐주면 되지요.
동영상 태그까지 삽입한 최종 "board.html" 파일의 소스는 다음과 같습니다.

그림 안의 글이 잘 안보이시는 분은 ☞여기를 눌러주세요.



빨간색으로 테두리쳐진 곳이 동영상에 관련된 태그명령어입니다.
음악과 같죠. 단지, 주소만 다를 뿐...
위 최종 명령어를 저장하고 익스플로어로 "board.html"을 열면 아래 그림과 같이 나옵니다.



음악이든 동영상이든 컨트롤러의 크기를 지정해주는 태그명령어,
width와 height가 없으면 원본 그대로의 창크기가 나오게 되지만,
width와 height의 명령어가 들어가게 되면,
제어창, 즉 컨트롤러의 사이즈는 원본보다 줄어들 수도 있고 커질 수도 있습니다.
동영상의 수치는 720*640(720의 640.. 이라고 읽어요-이것은 VCD용 고화질),
640*480, 480*320, 320*240 이런 모니터 사이즈의 비율로 나가게 되며,
확장자명은 음악 같은 경우, wav, wma, mp3 등이고,
동영상은 avi, wmv, asx, vod 등등 많습니다.
위 동영상의 원래 원본 사이즈는 480*320인데, 일부로 120*120으로 작게 잡아봤습니다.
수치명령어없이 embed src="http://daniella.zc.bz/movie/cell.asx" autostart=0 를 해주면,

이렇게 원본 사이즈대로 크게 나오게 되겠지요.
한 번 시험해 보세요.
음악과 사진, 동영상의 순서는 만드는 사람 마음입니다.
명령어를 원하는 위치 아무곳에다 막 집어넣어 보세요.



▶다섯 번째 이야기 - 게시판에 글 올리기
이제 마지막으로 위 "board.html"의 소스를 교리신학원 홈페이지 게시판에 올려보겠습니다.
이 곳 종교교육과 홈페이지 게시판은,
head 부분에 들어가는 음악태그 명령어, bgsound src가 먹히지 않으므로,
눈에 가시적으로 보이는 embed src 명령어를 써서
최종적으로 저장해두었던 "board.html"의 소스를 
아래 그림의 순서를 따라 몽땅 복사합니다.


이제 위 복사된 것을 신학원 홈페이지 게시판으로 가지고 가 보겠습니다.


종교교육과 카페로 로그인하셨겠지요?
자유로운글 게시판으로 가볼게요.
글쓰기 버튼을 누르면 아래와 같은 그림이 뜹니다.
<편집> 상태인 것을 <소스보기> 버튼을 눌러 아래 그림과 같이
html 문서편집 상태로 만드세요.



빨간색 테두리내의 html태그 및 문자들을 몽땅 깨끗이 지우세요.
 
빈 곳에 마우스를 갖다대고 오른쪽 버튼을 누르면 <붙여넣기> 옵션이 보일거예요.
만약 붙여넣기가 안된다면, "board.html" 메모장 문서의 소스를 다시 복사해서
바로 붙여넣기를 합니다.
 


소스가 복사됐지만, 줄이 다닥다닥 붙어나오죠?
 
그림 안의 글이 잘 안보이시는 분은 ☞여기를 눌러주세요.


꼼꼼이 살펴보시고, 그림과 동영상, 음악 등이 위치할 줄 사이를 
자판기의 <엔터키>를 쳐서 보기좋게 줄 간격을 벌여놓습니다.
여기서 손을 충분히 보신 다음 글을 등록하셔야지
등록 후에 재수정하는 건 좀 까다롭더군요.
그래서 저같은 경우엔 등록 후에 발견되는 오타나 재수정할 곳이 생길 경우엔
아예 글을 삭제한 후, 다시 복사해서 붙이기를 한답니다.
이건 자유예요. 
등록 후 재수정을 깔끔이 하실 수 있으신 분은
재수정 계속 해들어가면 되지요, 뭐.^^;


 
그림 안의 글이 잘 안보이시는 분은 ☞여기를 눌러주세요.


제목 쓰시구요...
쓰기 버튼 누르시면 글이 등록되겠습니다.
축하합니다.^^



위의 명령어 들은 모두, 
타인의 계정에 있는 사진과 음악, 동영상 자료를 링크하는 방법들입니다.
세 번째 시간에는 각자 자기 계정을 만들어 
김쌍구 세례자요한 형제님의 이집트 여행기 자료로 계정에 업다운로드하고
게시판에 기재하는 방법에 대해 알아보겠습니다.


행복한 하루, 감사한 하루 되시길 바라며...

^__________^*