클로저스를 하면서 주로 하게 되는 컨텐츠 중 하나는 바로 클로저스 홈페이지 내 자유게시판입니다(??)

여기서 최근 복사 붙여넣기만으로 몇몇 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




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


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

동영상을 보는 페이지에서 아래와 같이 동영상 고유 번호를 확인할 수 있습니다.


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









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




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

저작자 표시 비영리
신고

설정

트랙백

댓글