글 작성 팁 번역

wariua의 이미지

지맘대로프로젝트인 "KLDP 접근성 향상 프로젝트"의 두 번째 작업으로 작성 팁 페이지를 번역해 봅니다. 양이 방대해서 아직 한글화가 안된 것 같은데, Druapl Korea에서 가져다 쓰신다면 쌍수로 환영합니다.

* 아래 내용 중 bbcode의 code 태그는 2006년 5월 중순 현재 다소 비정상적으로 동작합니다. 당분간은 코드를 입력하실 때 <code></code> 태그를 사용해 주시면 되겠습니다. 더불어 cinsk님"KLDP(drupal)에 글 쓸 때, 프로그램 소스 붙이기." 글타래에서 고난이도의 코드 올리기 기법을 보실 수 있습니다.


작성 팁

입력 형식:

  • 간단한 HTML:
    • 사용 할 수 있는 HTML 태그: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
    • 줄과 단락은 자동으로 인식됩니다. <br /> 줄바꿈, <p> 단락 및 </p> 단락 끝 태그가 자동으로 추가됩니다. 만약 단락이 자동으로 인식되지 않으면 두 개의 빈줄을 추가합니다.
    • 웹 주소와 이메일 주소는 자동으로 링크로 바뀝니다.
    • 코드를 올리려면 <code>...</code> 태그로 감싸 주십시오. PHP 코드의 경우 <?php ... ?>를 이용할 수 있으며 문법에 따라 색깔도 입혀집니다.
    • BBCode 길잡이

      소개

      BBCode를 이용하면 게시물에서 HTML을 사용하지 않고도 글의 형식을 지정해 줄 수 있습니다. BBCode는 PHPBB라는 포럼 소프트웨어에서 유래한 것이며, 이 사이트에서는 이를 나름대로 구현하고 있습니다.

      BBCode 용어로 하자면, "태그"를 이용해서 글에 형식을 지정해 줄 수 있습니다. 모든 태그는 [] 꺽쇄로 둘러싸여 있습니다. 글의 어떤 일부에 표시를 해 주려면 열기 태그와 닫기 태그를 써주어야 합니다. 아래에서 보게 되겠지만, 닫기 태그는 [/으로 시작합니다. 태그를 잘못 입력하거나 닫아 주는 걸 깜빡하면 원했던 형식을 얻지 못하게 됩니다.

      간단한 글 형식 주기

      BBCode를 이용하면 [b](볼드)나 [i](이탤릭), [u](밑줄), [s](가로줄) 태그를 더해 줘서 글의 일부를 강조할 수 있습니다. [color][size], [font] 태그를 이용하면 태그로 둘러싼 부분의 글씨 색깔, 크기, 폰트를 바꿀 수 있습니다. 셋 모두 태그의 이름에 걸맞는 매개변수(어떤 색깔로, 얼마나 크게, 어떤 폰트로)를 등호를 이용해 지정해 주어야 합니다 (예는 아래에). 닫는 태그에서 매개변수를 다시 입력해 주면 안 됩니다!

      [color] 태그의 매개변수로는 잘 알려진 색깔 이름(red, blue, green, white, 등등)을 지정해 줄 수도 있고 십육진수 색깔값(#CDCDCD, #FFFFFF, 등등)을 지정해 줄 수도 있습니다. [size] 태그로는 6에서 48 사이의 폰트 크기를 정해 줄 수 있으며, 6이 최소 크기입니다. 주의할 것은, 너무 큰 글씨는 여러 사람에게 짜증을 일으킬 수 있기에 이 방법을 이용해서 자기 글타래가 관심을 끌게 하는 건 별로 좋을 생각이 아니라는 점입니다. [font] 태그에는 Arial이나 Arial Black, Courier, Courier New, Helvetica, Impact, Times New Roman, Verdana 등과 같은 모든 유효한 폰트를 설정할 수 있습니다.

      사용법 표시 결과
      이 작업을 주말까지 [b]꼭 끝내야 돼요[/b]. 이 작업을 주말까지 꼭 끝내야 돼요
      김 과장 얘기로는 그녀에게 확인을 [i]해 봐야 된다고[/i] 하네요. 김 과장 얘기로는 그녀에게 확인을 해 봐야 된다고 하네요.
      이런 얘기 [u]진짜로 안 하려고[/u] 했는데 말이죠. 이런 얘기 진짜로 안 하려고 했는데 말이죠.
      다 함께 이렇게 [s]오파[/s] 오타 난 글자를 고쳐 보아요. 다 함께 이렇게 오파 오타 난 글자를 고쳐 보아요.
      박실장은 [color=blue]바닷가[/color]에 놀러 갔다죠. 박실장은 바닷가에 놀러 갔다죠.
      김대리는 [color=#FF0000]수목원[/color]으로 휴가를 갔죠. 김대리는 수목원으로 휴가를 갔죠.
      그때 그랬지, [size=30]어이![/size]라고. 그때 그랬지, 어이!라고.
      심부장이 그러던데, [font=Courier]뭐시기?[/font]라고. 심부장이 그러던데, 뭐시기?라고.

      링크 만들기

      글에서 다른 곳으로 가는 링크를 지정하는 여러 가지 방법이 있습니다.

      (www.example.com 처럼) "www"나 "ftp"로 시작하는 URL(Uniform Resource Locator)은 자동으로 인식해서 링크로 바꿔 줍니다. 그리고 [url] 태그에 매개변수를 줘서 링크 주소 대신 의미 있는 문구를 표시할 수도 있습니다. 매개변수 없이 url 태그를 쓰면 둘러싼 부분을 URL이라고 가정하고 그 목적지로 가는 링크를 만듭니다.

      글에 포함된 이메일 주소 역시도 자동으로 이메일 링크로 바뀝니다. 일반적인 BBCode 구현 방식과의 호환성을 위해 [email] 태그도 지원합니다.

      사용법 표시 결과
      더 많은 사례를 보려면 www.example.com 에 들르세요. 더 많은 사례를 보려면 www.example.com 에 들르세요.
      더 많은 사례를 보려면 http://example.com 에 들르세요. 더 많은 사례를 보려면 http://example.com 에 들르세요.
      질문할 게 있으면 joe@example.com 으로 문의하세요. 질문할 게 있으면 joe@example.com 으로 문의하세요.
      질문할 게 있으면 [email]joe@example.com[/email]으로 문의하세요. 질문할 게 있으면 joe@example.com으로 문의하세요.
      이번 예제에서는 [url=http://example.com/]예제 사이트[/url]를 이용합니다. 이번 예제에서는 예제 사이트를 이용합니다.
      이번 예제에서는 [url]http://example.com/[/url]를 이용합니다. 이번 예제에서는 http://example.com를 이용합니다.

      이미지 표시하기

      [img] 태그를 이용하면 글에서 이미지를 표시할 수 있습니다. 이미지에 대한 URL을 지정해 주어야 하며, 따라서 그 이미지는 인터넷 상의 접속 가능한 어딘가에 있어야 합니다. 글 내에 굉장히 큰 이미지를 추가하는 건 비추입니다. 그러면 페이지가 무진장 느리게 뜹니다!

      [img] 태그로 URL을 감싸 주면 이미지를 표시하는 코드로 바뀌게 됩니다. 예를 들어, "괜찮은 스샷: [img]http://example.com/screenshot.png[/img]"이라고 하면 그 스크린샷을 보여주게 됩니다 (물론 스크린샷 파일이 존재한다면요).

      [img] 태그에 크기 매개변수를 추가해 주면 원하는 표시 크기를 지정할 수도 있습니다. "괜찮은 스샷: [img=640x480]http://example.com/screenshot.png[/img]"이라고 하면 이미지를 640x480 크기로 표시합니다 (단, 이 경우에도 전체 이미지를 내려받습니다). 이걸 이용해서 이미지의 썸네일을 표시하지는 마십시오!

      [img] 태그를 [url] 태그로 감싸서 이미지에 외부 목적지로 가는 링크를 걸어주는 것도 얼마든 가능합니다. "참고: [url=http://example.com][img]http://example.com/screenshot.png[/img][/url]"

      목록

      가장 단순한 목록 형태는 순서 없는 목록인데, 이는 항목에 번호를 붙이지 않는 걸 뜻합니다. 목록의 항목들을 [list] 열기 및 닫기 태그로 감싸 주면 그런 목록을 만들 수 있습니다. 각 항목의 시작은 [*] 목록 항목 표시로 시작해 주어야 하며, 이건 닫는 태그가 없습니다.

      순서 있는 목록을 만들려면 [list] 목록 태그에 매개변수를 추가해 줘서 원하는 목록의 종류를 지정해 주어야 합니다. 가능한 매개변수로는 "i", "I", "1", "a", "A", "c", "d", "s" 등이 있는데, 이 모두는 첫 번째 목록 항목의 표시와 일치하게 됩니다.

      사용법 표시 결과
      좋아하는 것들
       [list]
        [*]오렌지
        [*]사과
        [*]바나나
       [/list]
      
      좋아하는 것들
      • 오렌지
      • 사과
      • 바나나
      좋아하는 것들
       [list=I]
        [*]오렌지
        [*]사과
        [*]바나나
       [/list]
      
      좋아하는 것들
      1. 오렌지
      2. 사과
      3. 바나나
      좋아하는 것들
       [list=1]
        [*]오렌지
        [*]사과
        [*]바나나
       [/list]
      
      좋아하는 것들
      1. 오렌지
      2. 사과
      3. 바나나

      고정폭 글씨와 블럭 형식 주기

      [code] 태그를 이용해서 문장 중간의 고정폭 형식 부분을 추가하거나 (일반적으로 프로그램의) 코드 블럭을 추가해 줄 수 있습니다. 여는 태그와 닫는 태그 사이에 줄바꿈이 있으면 블럭으로 표시됩니다.

      마찬가지로 [php] 태그를 이용하면 PHP 코드를 올릴 수 있습니다. PHP 코드는 자동으로 읽기 좋게 문법 강조가 됩니다.

      사용법 표시 결과
      [code]robots.txt[/code] 파일을 편집해 주시면 됩니다. robots.txt 파일을 편집해 주시면 됩니다.
      HTML 제목 다는 방법:
      [code]
      <head>
       <title>페이지 제목</title>
      </head>
      [/code]
      HTML 제목 다는 방법:

      <head>
       <title>페이지 제목</title>
      </head>
      어떤 PHP 코드:
      [php]
      <?php
      function hello()
      {
        echo "Hello World!";
      }
      ?>
      [/php]
      어떤 PHP 코드:

      <?php
      function hello()
      {
        echo
      "Hello World!";
      }
      ?>

      글과 블럭 정렬하기

      [left], [right], [center] 태그를 이용해서 글 정렬 방식을 지정할 수도 있습니다. [float] 태그를 이용하면 글 중간에 떠 있는 상자를 집어넣을 수 있습니다 (특히 이미지에 대해 쓸만함). [float=left][float=right]이라고 하면 떠 있는 방향을 지정해 줄 수 있습니다. [justify] 태그를 이용하면 페이지의 양쪽 모두에 맞게 글의 간격을 조절해 줍니다.

      기타 지원 태그

      이미 게시한 어떤 내용을 인용하는 것이 가능한데, 그 주위에 [quote][/quote] 태그를 둘러 주기만 하면 됩니다. 특정인을 인용하고 싶다면 [quote=철수] 같이 쓰면 됩니다. 인용 태그는 여러 단계로 사용할 수 있습니다.

      [sub][sup] 태그를 이용하면 아랫첨자 및 윗첨자 문구를 추가할 수 있습니다. 예를 들면 "H[sub]2[/sub]O"는 H2O가 되고, "X[sup]3[/sup]"는 X3가 됩니다.

      [acronym] 태그를 이용해서 단어가 두문자어임을 알려주고, 사용자가 태그에 마우스를 올릴 때 보이는 설명을 지정할 수 있습니다. 예를 들어 "[acronym=Structured Query Language]SQL[/acronym]"이라고 하면 SQL이 나옵니다.

      [abbr] 태그를 이용해서 단어가 줄임말임을 알려주고, 사용자가 태그에 마우스를 올릴 때 보이는 설명을 지정할 수 있습니다. 예를 들어 "[abbr=World Wide Web]WWW[/abbr]"이라고 하면 WWW이 나옵니다.

      [notag] 태그는 태그 내의 글을 분석해서 처리하지 않도록 해줍니다. 이를 이용하면 BBcode의 예를 들 때 태그가 HTML로 바뀌지 않게 할 수 있습니다. 예를 들면 "[notag]이 [b]태그[/b]는 그대로 나타남[/notag]"이라고 하면 "이 [b]태그[/b]는 그대로 나타남"이 나옵니다.

      [hr] 태그는 페이지를 가로지르는 수평선을 긋습니다. 글의 뭉치들을 분리할 때 유용합니다.

      복수의 형식 태그 사용하기

      어떤 글의 일부에 하나 이상의 형식 지정이 가능합니다. "난 [b][i]해수욕장[/i][/b] 갔다왔지롱"이라고 하면 "해수욕장 갔다왔지롱"으로 표시됩니다.

      열고 닫는 태그들의 순서를 올바르게 맞춰 주는 데에 신경을 써 주십시오. 열었던 것과 반대의 순서로 태그를 닫아주어야 합니다. 그렇지 않으면 상당히 이상한 표시 결과가 나올 수 있습니다. 그리고 잘못된 BBCode 사용으로 인한 형식 지정 오류가 있을 수 있으니 글을 올리기 전에 꼭 미리보기 기능으로 확인을 해보시기 바랍니다.

  • 전체 HTML:
    • 줄과 단락은 자동으로 인식됩니다. <br /> 줄바꿈, <p> 단락 및 </p> 단락 끝 태그가 자동으로 추가됩니다. 만약 단락이 자동으로 인식되지 않으면 두 개의 빈줄을 추가합니다.

댓글

hey의 이미지

생각보다 기능이 많군요. 일반적인 BBCode에는 이렇게 많은 기능이 없었던거 같은데 확장 기능일까나?

May the F/OSS be with you..



----------------------------
May the F/OSS be with you..


ed.netdiver의 이미지

오마나, 정리하시느라 수고많으셨습니다.
앙~ 정말 유용한 정보들!
+1점 했습니당.^O^//

\(´∇`)ノ \(´∇`)ノ \(´∇`)ノ \(´∇`)ノ
def ed():neTdiVeR in range(thEeArTh)

--------------------------------------------------------------------------------
\(´∇`)ノ \(´∇`)ノ \(´∇`)ノ \(´∇`)ノ
def ed():neTdiVeR in range(thEeArTh)

inshine의 이미지

KLDP에 나름 익숙해 지기 위해 여러 글들을 읽어보는 중입니다..^^
좋은정보 감사..^^!!

END &

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.