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

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


 

212A4C3354C37AC402 ([클로저스] 클로저스 자유게시판 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

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

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

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

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

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

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

widthheight 는 동영상의 화면 크기를 뜻합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 로 직접 붙여넣습니다. (성공 적용될 경우 바로 편집창에 결과가 나타납니다.)

 


<iframe> 소스코드가 사용 가능한 것을 감안하면 이를 통해 사실상 모든 html 소스코드(태그)를 사용할 수 있음을 알 수 있습니다. 다만 지나친 소스코드의 사용은 자유게시판 운영자의 글 삭제 또는 제재를 불러올 수 있으니 참고하시기 바랍니다.

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

Reply