- 다양한 주제에 대해 자유롭게 글을 작성하는 게시판입니다.
Date 15/11/04 01:04:57
Name   April_fool
Subject   외부 HTML 편집기로 글을 써서 홍차넷에 올리는 방법

일전에 제가 쓴 글에서 어떤 분이 댓글로 HTML 링크 거는 법을 물어보셨던데, 이 참에 외부 온라인 HTML 편집기를 이용해서 글을 써서 홍차넷에 올리는 법을 다뤄보고자 합니다.

※ 주의 : 이 글에서 소개하는 내용 중 일부는 차후 홍차넷의 기능 변경에 따라 쓸모없는 내용이 될 수도 있습니다. 참고하시기 바랍니다.

먼저, HTML 편집기를 열어야 합니다. 저는 CKEditor라는 것을 써보도록 하겠습니다.
http://ckeditor.com/demo#full
위 주소를 클릭해서 접속하세요. 이곳을 자주 쓸 것 같다면, 위 주소를 즐겨찾기(Bookmark)에 저장해두는 것이 좋을 것입니다. 접속하면 다음과 같은 화면이 나타납니다.
CKEditor full version
이미 영어로 된 내용이 잔뜩 쓰여 있습니다. 편집기 화면 맨 위 왼쪽의 [소스]라는 버튼 바로 오른쪽에 있는 종이 모양의 버튼을 누르면 적혀 있는 모든 내용이 한꺼번에 사라집니다. 이제 글을 쓸 준비가 되었습니다. 빈 글상자에 글을 채워넣으면 됩니다.

이 편집기는 많은 기능들을 갖추고 있습니다. 대부분의 기능은 워드프로세서와 유사하기 때문에 적응하기가 그리 어렵지 않을 것입니다. 버튼들에 마우스 커서를 갖다대어보면 툴팁 도움말로 해당 버튼의 이름이 나타나니까, 직접 버튼을 하나하나 눌러보면 금방 적응할 수 있을 겁니다. 몇몇 자주 쓰는 기능들은 간단히 소개하도록 하겠습니다.

  • 링크를 거는 버튼은 4번째 줄 맨 첫번째 것입니다.
  • 그림을 삽입하는 버튼은 4번째 줄 4번째 버튼입니다. 옆으로 두 칸 더 가면 표를 넣는 버튼도 있네요.
  • 3번째 줄 가운데의 큰따옴표 모양 버튼을 누르면 인용문을 넣을 수 있습니다.
  • 5번째 줄 맨 끝에 있는 물음표 바로 옆의 버튼을 누르면, 글의 각 문단들이 점선으로 표시됩니다. 문단 내부에서 줄바꿈을 하고 싶다면 Shift+Enter를 누르면 됩니다. 문단을 표시해두고 보면 그냥 Enter와 Shift+Enter의 차이점을 금방 알 수 있습니다.
  • 내용을 모두 선택할 때는 Ctrl+A를 누르거나, 맨 첫번째 줄 가장 오른쪽에서 두 번째에 있는 버튼을 클릭합니다.

글을 다 썼으면, 글을 HTML 소스로 옮겨와야 합니다.

  1. 맨 첫줄 첫번째에 있는 [소스] 버튼을 누릅니다. 그러면 HTML 코드가 뜹니다.
  2. 위에서 설명한 방법을 이용하여, [HTML 코드를 전부 선택한 다음 복사]합니다.
  3. 홍차넷의 글쓰기 화면으로 이동합니다.
  4. 글쓰기 화면 오른쪽 위에 있는 [TEXT/HTML]을 누릅니다. 이미 눌러져 있으면 안 눌러도 됩니다.
  5. 카테고리 화면 옆에 있는 [HTML] 버튼에 체크 표시를 합니다. 이미 체크가 되어 있으면, 풀었다가 다시 체크합니다.
  6. “자동 줄바꿈을 하시겠습니까?”라고 묻는 대화 상자가 뜹니다. [취소] 버튼을 누릅니다.
  7. 이제 글쓰기 화면에다가 복사해 온 HTML 코드를 붙여넣습니다.

이제 끝났습니다. 나머지는 홍차넷에서 그냥 글을 쓸 때와 똑같습니다.
카테고리를 설정하고, 제목을 입력한 다음 [글쓰기] 버튼을 눌러주면 됩니다.

이 과정이 조금 복잡해 보일 수도 있겠지만, 숙달되면 아주 쉽습니다. 장담합니다.
그리고, 이 방법을 알고 있으면 다른 웹사이트에서 글을 쓸 때도 이 방법을 사용할 수 있습니다. 그 웹사이트에서 글을 쓸 때, 어떻게 HTML 코드를 삽입하는지만 알면 거의 같은 식으로 사용할 수 있습니다.

p.s.
이 글은 CKEditor를 통해 작성한 것입니다.




2


    에디터로 작성한 것과, 사이트의 설정이 충돌하면 어느 것이 우선시 되나요?

    예를 들어 홍차넷엔 [대괄호] 안의 문자는 붉은 글자색 + 바탕색을 가지도록 설정되어 있는데, 이걸 에디터 상에서 다른 속성으로 설정할 경우 어느 것이 우선시 될까요 ?
    그러면... <div style=\"color:blue\">멍멍이가 [노래]를 합니다</div> 라는 문장이

    <div style=\"color:blue\">멍멍이가 <span style=\"color:red\">[노래]</span>를 합니다</div> 로 바뀌면서... [노래]는 빨간색으로 나오겠네요.
    눈부심
    캼쏴함미다!
    이제 연습해봐야겠네요.
    목록
    번호 제목 이름 날짜 조회 추천
    2667 꿀팁/강좌예비군 가이드? 12 김덕배 16/04/21 8106 0
    2663 꿀팁/강좌2030년 경엔 흑인여성이 미국지폐에.. 21 눈부심 16/04/21 9249 0
    2649 꿀팁/강좌출장 세차 서비스 소개 - 페달링 12 Toby 16/04/20 6657 0
    2148 꿀팁/강좌로버트 새폴스키 - 스트레스와 인간 16 눈부심 16/01/31 8256 8
    2147 꿀팁/강좌로버트 새폴스키 - 개코원숭이들을 통해 바라본 인간 8 눈부심 16/01/31 8345 7
    2065 꿀팁/강좌보일러 온수가 안나온 이야기 18 Toby 16/01/20 9679 0
    1997 꿀팁/강좌만장일치의 역설 30 눈부심 16/01/11 6430 10
    1758 꿀팁/강좌남규한의 사진 레시피 - 사진, 찍고 싶다 1 F.Nietzsche 15/12/13 6637 2
    1708 꿀팁/강좌남규한의 사진 레시피 - 새벽의 맨하탄 4 F.Nietzsche 15/12/04 6450 1
    1703 꿀팁/강좌이것이 진화생물학적으로 접근하는 사회브란감? 4 눈부심 15/12/04 6072 1
    1702 꿀팁/강좌페이코 이벤트 꿀빠세요 (티몬 1만원 할인, 벅스 6개월 990원) 5 Toby 15/12/04 9001 1
    1692 꿀팁/강좌홍차넷 게시글에 youtube 영상 삽입하기 + 입맛대로 재생옵션 수정하기 5 Top 15/12/03 8231 3
    1671 꿀팁/강좌남규한의 사진 레시피 - Hot VS Cool 6 F.Nietzsche 15/11/30 6595 3
    1619 꿀팁/강좌남규한의 사진 레시피 - 추상 사진 9 F.Nietzsche 15/11/23 6252 0
    1616 꿀팁/강좌해커 스크립트 6 Toby 15/11/23 13695 5
    1607 꿀팁/강좌남규한의 사진 레시피 - 표지판과 사람 2 F.Nietzsche 15/11/21 6489 3
    1569 꿀팁/강좌셋방 뺄 때, 집주인이 보증금을 안 줄 때의 대처방법 16 April_fool 15/11/16 20789 2
    1567 꿀팁/강좌진지한 취미 사진가를 위한 다섯 가지 팁(스크롤 압박!) 39 *alchemist* 15/11/15 9036 12
    1566 꿀팁/강좌남규한의 사진 레시피 - 잘 찍은 사진 8 F.Nietzsche 15/11/15 6750 3
    1559 꿀팁/강좌남규한의 사진 레시피 - 해안도로의 포장마차 F.Nietzsche 15/11/14 6250 0
    1531 꿀팁/강좌남규한의 사진 레시피 - 까를교의 노인 4 F.Nietzsche 15/11/11 6730 0
    1530 꿀팁/강좌2016에는 불렛 저널(bullet journal)어때요? 15 다람쥐 15/11/11 18575 1
    1525 꿀팁/강좌남규한의 사진 레시피 - 코카콜라 매니아 3 F.Nietzsche 15/11/10 6517 7
    1509 꿀팁/강좌남규한의 사진 레시피 - 액자 속의 나무 8 F.Nietzsche 15/11/09 6739 2
    1499 꿀팁/강좌남규한의 사진 레시피 - 비오는 날의 단풍 4 F.Nietzsche 15/11/08 9043 3
    목록

    + : 최근 2시간내에 달린 댓글
    + : 최근 4시간내에 달린 댓글

    댓글