[클로저스] 클로저스 자유게시판 html 소스코드 사용 (태그, 프로필 사진 바꾸기, 배경음악, 유튜브)

클로저스를 하면서 주로 하게 되는 컨텐츠 중 하나는 바로 클로저스 홈페이지 내 자유게시판입니다(??)
여기서 최근 복사 붙여넣기만으로 몇몇 html 코드(태그) 적용이 된다는 점을 이용해서 여러 가지 꾸미기(?)가 유행하고 있는데, 이 게시글은 그러한 것들의 적용 방식을 설명하고 있습니다.
이 글에서는 예시로 클로저스 자유게시판 글에서 프로필 사진 바꾸기, 배경음악, 유튜브(youtube) 영상 띄우기 등을 설명합니다.

※ 주의 : 홈페이지 개편 또는 구조 수정 등으로 인해 이 방법은 언제든지 막힐 수 있다는 점 유의하시기 바랍니다.

※ 1월 29일 홈페이지 개편으로 인해 아래 단계 중 3-1. 단계의 방법은 정상 적용이 되지 않을 가능성이 높습니다. 3-2 방법을 시도하시기 바랍니다.

[적용 방법]

1. 원하는 기능을 하는 html 코드(태그) 작성

이 1번째 단계에서 자신이 적용하고 싶은 코드 설명을 찾습니다. 원하는 코드를 작성한 후 2번째 단계로 진행합니다.

1-1. 프로필 사진 바꾸기(이미지 덧씌우기)

프로필 사진 부분을 자신이 원하는 이미지로 교체하는 코드는 아래와 같습니다.

<img width=135 height=132 style="margin-right: 1058px; margin-bottom: 24px;" src="(이미지 주소)" class="comm_char1_r">

이 소스코드 다운로드 ▶ img_change.txt

– 다음과 같이 적용됩니다.

– 위 코드의 옵션이 뜻하는 의미는 아래와 같습니다.

※ (이미지 주소)에 사용될 이미지는 적절한 곳에 업로드되어야 합니다. 예를 들어 네이버같은 곳에 업로드할 경우, 외부링크가 제한되어 있어 정상적으로 표시되지 않는 경우가 생길 수 있습니다.

– width, height 옵션을 위 코드에서 뺀다면, 표시되는 이미지의 크기는 원래 이미지의 크기와 같아집니다.

1-2. 배경음악 넣기

배경음악을 넣을 때 사용되는 코드는 아래와 같습니다.

<p>&nbsp;</p><audio autoplay="true" loop="true"><source src="(음악 파일 주소)"></audio>

이 소스코드 다운로드 ▶ bgm.txt

– autoplay는 자동 재생이기 때문에 true 상태로 두어야 합니다.

– loop는 반복 재생 옵션으로 반복 재생을 원하지 않을 경우 통째로 지워주시면 됩니다.

※ 이미지와 마찬가지로 (음악 파일 주소)에 사용될 음악 파일은 적절한 곳에 업로드되어야 합니다.

(※ 주의 : 위 코드의 경우, 글 작성 브라우저에 따른 제한이 있는 것으로 보입니다. 예를 들어 제 경우에는, 익스플로러로 글 작성을 할 경우에 글 쓰는 곳에 이 코드를 적용하면 잘 되지만, 파이어폭스로 글 작성시에 이 코드를 적용하면 정상적으로 적용되지 않습니다. 이 점 필히 확인하시기 바랍니다)

1-3. 유튜브(youtube) 동영상 넣기

유튜브 동영상을 넣을 때 사용되는 코드는 아래와 같습니다.

<iframe width="560" height="315" src="http://www.youtube.com/v/(동영상 고유 번호)" frameborder="0" allowfullscreen></iframe>

이 소스코드 다운로드 ▶ youtube.txt

– width 와 height 는 동영상의 화면 크기를 뜻합니다.

– (동영상 고유 번호)란, 동영상 재생 페이지의 주소에서 확인할 수 있는 그 동영상을 식별하는 번호를 뜻합니다.
동영상을 보는 페이지에서 아래와 같이 동영상 고유 번호를 확인할 수 있습니다.

http://www.youtube.com/watch?v=(동영상 고유 번호)

ex) 동영상을 재생하는 유튜브의 주소가 http://www.youtube.com/watch?v=ydXHuM9aduc 라면, 고유 번호는 ydXHuM9aduc

2. 복사하기 위한 소스 만들기

– 완성된 소스코드를 메모장에 붙여넣고(위에서 나눠진 기능별로 파일을 따로따로 만들 것을 권함), 다른 이름으로 저장에서 확장자를 .htm 으로, 파일 형식을 ‘모든 파일’로 합니다.

3. 소스로 구현된 html 문서 파일에서 자유게시판 글 작성 부분으로 복사하기

3-1. 첫 번째 방법 (이 방법이 되지 않을 경우 3-2. 로 이동)

– 저장된 파일을 자신이 글을 쓸 브라우저로 엽니다.

– Ctrl+A 를 눌러 모두 선택한 후, Ctrl+C 를 눌러 복사합니다. (물론 직접 드래그로 원하는 부분 선택이 가능하나, 경우에 따라 까다롭다)

– 자유게시판의 글 작성란에 내용을 모든 작성한 후, [Shift + Insert] 키를 사용하여 (Ctrl + V 는 불가능!) 적절히 붙여넣습니다.

– 소스코드의 내용이 적용된 것을 알 수 있습니다.

3-2. 다른 방법 : 개발자 도구 활용하기

– 클로저스의 게시글 쓰기 글에 들어가서, 원하는 게시글 내용을 모두 적은 후 F12를 누릅니다(단 브라우저마다 다를 수 있음).

– 위와 같은 개발자 도구의 소스 트리 화면에서, 다음의 경로를 따라 들어갑니다.

<html>
 <body>
  <form id="form1" ~~>
   <div class="c_comm" id="wrap">
    <div id="innerwrap">
     <div class="c_c">
      <table class="board_write">
       <tbody>
        <tr> (<tr> 두 개가 있는데, 여기선 두 번째 <tr>)
         <td class="content">
          <div class="editor_sec">
           <div class="edSec">
            <div class="edWSec">
             <iframe name="editWindow" ~~>
              <html>
               <body>
                <p></p> (되도록이면 여러 것들 중 맨 마지막에 있는 '<p></p>')

– 위쪽의 2. 단계에서 만든 메모장의 소스 코드(즉 ‘<img ~~~>’, ‘<iframe ~~~>’ 등)를 Ctrl+C 로 복사한 후, 위의 빨간 <p></p> 부분을 클릭 또는 더블클릭해서(브라우저 따라 다름) 편집 가능 상태로 만듭니다. 그리고 복사했던 코드를 이 <p></p> 부분에 Ctrl+V 로 직접 붙여넣습니다. (성공 적용될 경우 바로 편집창에 결과가 나타납니다.)

끝으로 다시 한 번, 이 내용은 클로저스 홈페이지의 개편이나 수정 등에 의해 막힐 수 있는 방법임을 유의하시기 바랍니다.