SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2017/05   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      

블로그, HTML 글쓰기의 기술.

관련된 내용을 여쭤 오시는 분들고 있고해서 HTML 글쓰기에 대해서 간단히 적어 보려 합니다. 제목을 HTML 글쓰기의 기술이라 할지, 기본 으로 해야 할지 한참 고민했습니다. 어줍잖은 녀석이 기본이 어쩌네 왈가왈부하는것 보단, 거창하게 대단한 기술인양 하기로 했습니다. 깔깔.. 보다 더 정확히 표현하자면 '스타일을 분리한 HTML의 구조적인 글쓰기' 정도랄까? 네, 그렇습니다. 이 글은 HTML 문법에 대해 익숙하지 않은 분들을 위한 글입니다. HTML 태그에 대해서 잘 알고 계시는 분들에겐 별로 영양가가 없어요. :)

위지윅(WYSIWIG) 에디터

어떤 블로그 툴을 이용하든, 글을 쓰는데 직접 HTML 편집기에서 작성하는 것을 요구하지는 않습니다. 저마다 특색있는 웹 위지윅(WYSIWYG, what you see is what you get,) 에디터를 제공하기 마련이에요. 네, 위지윅 에디터는 HTML 문법에 대해서 익숙하지 않은 사람에게, 마우스로 버튼을 클릭하는 것 몇 번으로, HTML 문법을 대신해서 만들어 줍니다.

하지만 위지윅 에디터가 항상 만능 일수는 없습니다. 우선 위지윅은 모든 HTML 문법을 포함하고 있지 않습니다. 주로 자주 사용하는 기능만을 담고 있는 경우가 많고, 각각의 위지윅 에디터마다 만들어 주는 HTML 태그도 조금씩 다르니까요. 게다가 때로는 불필요한 HTML 문법 찌꺼기를 남기기도 하고, 잘못된 마크업을 하기도 합니다. 겉보기엔 멀쩡해 보이지만, 같은 태그를 몇번이고 반복해서 속은 엉망인 경우도 많습니다. 다시말해, HTML에 대해서 조금이라도 알고 있는 사람에겐 오히려 불편을 초래 할수도 있다는 거죠. :)

때문에 저는 블로그 글쓰기를 하면서 위지윅과 HTML 편집창을 왔다 갔다 하면서 적습니다. 위지윅이 만들어 준 화면을 보고, HTML 코드를 확인해 보고, 위지윅에서 지원하지 않는 부분을 직접 HTML 로 작성하기도 하고 말예요. 불편하지만 어쩔 수 없습니다. 훌륭한 위지윅 에디터는 많지만, 완벽한 위지윅 에디터는 있을 수 없으니까요. :)

잘 짜여진 구조를 갖고, 제대로 된 HTML 문법으로 구성된 글을 쓰기 위해서는, HTML 문법에 대한 어느 정도의 이해가 필요합니다. 적어도 글쓰기에 관련된(Phrase 문법)에 대해선 확실히 짚고 넘어갈 필요가 있습니다! 자 그럼, 위지윅에서 부족한 부분을 채워 줄 수 있도록, 그리고 HTML 글쓰기 기술을 향상 시킬 수 있도록, 블로그 글쓰기에 유용한, 그리고 이미 알게 모르게 사용하고 있는 몇 가지의 HTML 태그의 의미에 대해서 적어 보겠습니다.

  • 각 내용에서 처음 등장하는 태그마다 W3 SchoolReferences 페이지로 링크했습니다.1 브라우저 지원여부, 자세한 사용예와 결과 등은 링크한 페이지로 대신합니다.
  • 저 역시 모든 위지윅 에디터에 대해서 알지 못합니다. 많이 아는 것도 아닙니다. 주로 텍스트큐브와 티스토리의 웹 위지윅 에디터를 사용하며 느낀 것에 대해 적겠습니다. 티스토리를 다음에서 운영하게 되면서 티스토리의 에디터는 다음의 에디터가 되었습니다. 네이버의 위지윅은 다음의 위지윅과 거의 차이가 없더군요.

문단 Paragraph <p>

우리는 글을 쓸때, 관련 주제에 따라 혹은 문서 구조에 따라 문단을 나누어 적습니다. HTML 에서 문단을 나누는 태그는 <p> 입니다. 문단의 시작에서 <p> 를 적고, 문단의 마지막에 </p> 라 적어서 문단의 끝을 알립니다. 사실 문단 닫힘태그를 적지 않아도, 대부분의 현대 브라우저에서는 문단의 끝을 잘 파악합니다. 하지만, 닫아주는 것이 올바른 방법입니다. 또한 XHTML 에서는 명확하게 닫힘태그를 표시할 것을 요구합니다. 2

아쉽게도 우리나라 서비스형 블로그의 위지윅에디터의 경우, 대부분이 이러한 문단처리를 해주지 않습니다. 설치형인 텍스트큐브의 위지윅 역시 현재는 그렇습니다. 단순히 줄바꿈 태그인 <br>을 두번 적는 것으로 처리합니다. <br> 은 문단내에서 특별하게 줄바꿈이 필요한 경우, 강제로 줄바꿈을 해주는 라인 브레이크 태그 입니다. 3 예를 들어 시나 노래가사 따위를 적을때 유용할 수 있을 겁니다.

문단 태그(<p>) 대신 줄바꿈 태그(<br>) 로 문단처리를 해서 인지, 우리 웹상에서의 글들은, 직접 손으로 적는 글에 비해, 문단내에서의 줄바꿈을 너무나도 자유롭게 하고 있습니다. 주제가 변하지 않았는데도, 문단의 내용이 계속 이어 지는데도 너무 자유롭게 줄바꿈을 해버리는 건 좋은 글쓰기 습관은 아닙니다.

티스토리의 글쓰기 환경설정

티스토리의 글쓰기 환경설정

얼마전 새관리 페이지를 선보인 티스토리에는 다행스럽게도 익숙한 <br> 과 익숙하진 않지만 바른 표현이라 할수 있는 <p> 를 선택하는 옵션이 제공되었습니다.

그럼 텍스트큐브에선 어떤 대안이 있을까요? 그래도 설치형인데, 티스토리 보다 못할 수는 없잖아요. :) 아무래도 텍스트큐브 위지윅 에디터가 워드프레스 위지윅 에디터의 뺨을 칠수 있을 때까진, 대안 에디터를 사용해야겠습니다. 이 훌륭한 대안 에디터에 대해선 글의 말미에 언급하겠습니다.

제목 Heading <h1> ~ <h6>

그림으로 표시한 제목(Heading) 예제

Heading

문단이 있기 전에 적절한 중간 제목을 적을 필요가 있을때는 <h1> ~ <h6> 헤딩태그 를 사용해서 중간 제목을 적으면 됩니다. 헤딩 태그는 <h1> 에서 <h6> 까지 쓸 수 있습니다. 대부분의 텍스트큐브 혹은 티스토리 테마(스킨)의 경우, 블로그 이름(제목)에 <h1> 을 사용하고, 각각의 글 제목에 <h2> 를 사용하고 있습니다. (HTML 한 페이지에서 <h1> 태그를 몇 번 쓸 수 있는지에 대해서는 약간의 논란이 있습니다. 페이지의 제목은 이미 <title> 태그 안에 있으니, 몇 번이고 자유롭게 쓸 수 있다는 사람도 있고, 페이지의 큰 제목으로 <h1> 은 한번만 적어야 한다는 사람도 있습니다.) 아무튼, 글 제목이 <h2> 라면, 글 본문에서는 <h3> 부터 나오는 것이 구조적으로 맞습니다.

워드프레스의 위지윅 에디터

하지만 문제는, 이 Heading 에 대해서 지원하고 있는 위지윅 에디터가 많지 않다는 겁니다. 외국에서 블로깅 툴로 가장 선호된다 할 수 있는 Wordpress4 의 위지윅에는 있군요 헤딩.. :)

텍스트큐브의 위지윅 에디터

다행 스럽게도 텍스트큐브 위지윅 에디터 역시 잘 보이지 않는 곳에 있긴 하지만 Heading을 지원하고 있습니다. 하지만 그림의 제목 위의 크기 부분은 사용하지 않는 것이 좋겠습니다. 아쉽게도 글꼴의 크기부분에서 만들어주는 태그는 이제는 버려진(Deprecated) <font> 태그입니다.

<font size="4">font 태그는 버려진 Deprecated 태그입니다.</font>

티스토리 위지윅은 Heading을 지원하지 않습니다. 위지윅 상에서 헤딩을 직접 사용하지는 못하지만 글꼴 스타일과 속성을 줘서 제목 처럼 표시 할 수는 있습니다. 티스토리 위지윅 에디터는 아래와 같이 만들어 주는 군요.

<span style="font-size: 24pt;">제목</span>

하지만 이것은 좋은 방법이 아닙니다. 이런식의 표현이 만들어 주는 결과물은 적어도 사람 눈으로 보기에는 꽤 제목 처럼 보일수 있습니다. 그렇지만 이것은 문서의 구조를 말해주지는 못합니다. 흔히들 말하는 검색엔진 최적화는 별개 아닙니다. 기계도 알아 볼수 있도록 문서의 구조를 표시해 주는 것부터가 시작이죠. :)

위지윅에서 Heading 태그를 지원하지 않는다면, 에디터의 HTML 모드에서 아래와 같이 직접 작성하는 수 밖엔 없겠습니다.

<h3>Heading 3</h3>

인용 Quotation <blockquote><q>

글을 쓰다 보면 다른 사람의 글을 인용해야 할 때가 있습니다. HTML 에서는 인용글을 표현할때 <blockquote><q>를 사용합니다. <blockquote>는 긴 문단 혹은 긴 문장을 인용할때 사용하는 블럭 엘리먼트 이고, <q>는 짧은 문장 혹은 단어 따위를 인용하는 인라인 엘리먼트 입니다. (블럭과 인라인 엘리먼트는 줄바꿈이 되느냐 되지 않느냐로 간단히 생각하시면 쉽습니다.) 적어도 <blockquote> 만큼은 대부분의 위지윅에서 잘 지원해주는 듯 합니다. 한때 <blockquote>는 인용이 아닌 들여쓰기용 태그로 잘못 사용되기도 했습니다. <blockquote>를 사용하면 대부분의 브라우저가 왼쪽에 어느정도 여백을 두고 들여쓰기를 하니까요. :)

<q> 태그는 짧은 글을 줄바꿈 없이 인용하는 데에 사용하시면 좋습니다. 따로 인용부호(따옴표 따위)를 적지 않더라도, 브라우저가 알아서 그려주니까요. :) 다만 <q> 태그는 IE 6~7 버젼에서는 제대로 지원되지 않아서, 인용한 글에 큰따옴표(")를 렌더링하지 않습니다.

목록 List <ul> <ol> <dl>

일반목록 <ul> <ol>

ul과 ol의 지원

일반적인 HTML 목록에는 위 열거된 2개의 태그를 사용합니다. <ul><ol>은 숫자 번호가 붙느냐 안 붙느냐의 차이가 있습니다. <ul>은 순서 없는 리스트(unordered list), <ol>은 순서가 있는 리스트(ordered list) 입니다. 목록의 성격에 맞게 사용하시면 됩니다. 리스트의 내용은 <li> 태그 안에 적습니다. 다행스럽게도 이 두 일반적인 리스트 태그는 대부분의 위지윅 에디터에서 훌륭히 지원해 주고 있습니다. :)

정의 Definition 목록 <dl>

<dl> 은 정의 목록입니다. <dl> 리스트를 선언하고, <dt>(정의할것의 이름)와 <dd>(내용정의)를 적습니다. 대개의 경우 위지윅에서는 빠져 있는 경우가 많습니다. 정의 내리거나 설명해야 할 것들이 많다면 유용한 리스트가 될 수 있습니다. 아무튼 <dl> 리스트 만큼, 사람들마다 재미 있게(?), 그리고 다양한 용도로 활용되는 태그도 드물겁니다. :)

정의 목록의 예시
엄친아
엄마 친구 아들, 언제나 나보다 잘난 우리 엄마의 비교 대상.
쩐다
좋아도 쓰고 나빠도 쓰는 아니, 좋다는 건지 나쁘다는 건지 알수 없는 꼬꼬마들의 외계어.

코드 Code <code> <pre>

<code> 는 문서상에서 컴퓨터 코드를 나타낼때 쓰이는 태그입니다. 흔히틀 컴퓨터 프로그래밍 코드나 HTML, CSS, JS 따위의 웹언어를 나타낼때 사용합니다. 코드 처럼 보이도록 고정폭 Monospace 형태의 글꼴로 보이게 됩니다. 일단 <code>는 인라인 요소입니다. 때문에 한줄 이상의 코드를 써야 할때는 따로 스타일쉬트(CSS,Cascading Style Sheets)code { display: block } 을 선언해서 쓰거나, <pre> 태그 안에 쓰기도 합니다. pre는 preformatted text를 말하는데, <pre> 태그안의 내용은 사용자가 적어 놓은 그대로, 공백 줄바꿈 탭 등이 그대로 출력됩니다. 하지만 HTML 언어의 경우, 코드 그대로 보여주지 않고, 렌더링하는 경우도 있기에 <pre>만 이용해서 쓰는것은 문제가 있을 수 있습니다. 아무튼 code 와 마찬가지로, 대부분의 브라우저에서 고정폭 글꼴로 표시 됩니다.

강조 삭제 따위의 Phrase 문법

강조 Emphasized <em> <strong>

글을 쓰다가 특별히 강조해야 할 부분이 있을 수 있습니다. 어느 한 부분을 강조하는 방법은 여러가지가 있을 수 있습니다. 글꼴을 두껍게(bold) 표현하거나, 기울여서(italic) 표현 합니다. 혹은 글자색을 다른색으로 표현하거나 밑줄을 긋기도 하지요. 어느 것이 가장 강조하는데 효과적인 방법일지는 글 적는 사람이 판단 해야 합니다. 다만 색상을 다르게 하거나, 밑줄을 긋는 방법의 경우, 링크와 확실하게 구별되지 못한다면, 사용자에게 혼동을 주는 불편을 초래할 지도 모릅니다. 가장 좋은 방법은 <em> 태그와 <strong> 태그를 이용하는 것입니다.

<em> 태그는 emphasize 의 약자로 강조 태그입니다. 대부분의 브라우저에서 <em> 태그를 이탤릭체로 표현합니다. 결과만 놓고 보면, <i> 태그와 같습니다. 하지만, <i> 태그는 단순히 글자를 이탤릭체로 표현하라는 태그이지, 문서에서 이부분이 강조되고 있음을 말해 주지는 못합니다. <strong> 태그는 글자를 굵게 표현합니다. <em> 보다 더 강한 강조가 필요할때 사용할 수 있습니다. 마찬가지로 <b> 태그와 결과는 같지만, 구조를 말해 주지는 못합니다.

그렇다고 <em> 이나 <strong><i>, <b>, <tt> 따위의 font style 태그보다 항상 우월하다고 할 수는 없습니다. 이것은 단순 꾸밈의 요소인가 강조의 요소인가에 따라 구분해서 사용하는 것이 좋겠습니다.

삭제와 삽입 Delete <del>

때로는 기존의 내용을 완전히 삭제하지 않고, 지웠다는 흔적만 남기고 싶을 때가 있습니다. 이럴때 사용할 수 있는 태그는 <del> 입니다. <del> 태그는 글자 가운데로 삭제선을 긋습니다. 한때는 <strike> 혹은 <s> 태그5 도 사용했지만, 이제 이 두 태그는 버려진(Deprecated) 태그입니다.

많이 사용되는 태그는 아니지만, <del> 과 짝 지을 수 있는 태그로 <ins> 가 있습니다. ins는 insert 의 약자로 <del>로 지우고, 지운 부분에 다른 대체 내용을 삽입하거나, 기존의 내용을 그대로 두고 새로운 내용을 추가 삽입해야 하는 경우에 사용합니다. <ins> 태그안의 글은 밑줄로 표현됩니다. 많은 양의 글을 추가하는 경우 밑줄이 부담 스럽다면, 역시 스타일시트(CSS)에서 따로 밑줄을 그리지 않도록 선언할 수도 있습니다.

<del><ins>에는 datetime 이라는 속성을 줄 수 있습니다. 삭제하거나 삽입한 날짜와 시간을 나타낼수 있도록 말입니다. 아직까진 대부분의 브라우저에서 지원하지 않지만, 아마도 검색엔진에게는 영향을 줄 수 있겠지요. :)

티스토리 위지윅에서의 표현

텍스트큐브 위지윅 에디터는 위의 phrase 문법 태그들을 그럭저럭 잘 표현해 줍니다! 하지만 이에 반해 티스토리의 위지윅은 좀 재밌습니다. 글자 크기만 <span> 안에 style을 인라인으로 지정하는 줄 알았는데, 이제 보니 모든 경우에 똑같은 방법으로 넣는군요!

<span style="font-weight: bold;">강조</span>
<span style="text-decoration: underline;">밑줄</span>
<span style="font-style: italic;">기울임</span>
<span style="text-decoration: line-through;">삭제</span>

물론 이 방법이 명확하게 틀렸다고는 말할수 없습니다. 그리고 이런식의 활용은 사용하기에 따라 글을 더 보기 좋게 만들어 줄 수도 있습니다. 일단 눈으로 보기에는 동일한 결과물 이기도 하구요. font style 태그를 직접 사용한것 보다는 세련된 방법이긴 하지만, 적절한 Phrase 태그를 쓰는 것보단 좋지 않은 방법입니다. 아무튼, 어떤 브라우저에서도 동일하게 보이게 하고, html 문법에 익숙치 않은 보통의 사용자에게도 쉽게 사용할 수 있게 하려면 위의 방법으로 통일하는것이 최선이었는지도 모를 일입니다. :p

브라우저별 차이

위에서 살펴본 글쓰기에 유용한 HTML 태그들은 대부분의 브라우저에서, 브라우저의 기본값에 맞추어 비슷하게 표현됩니다. 물론 지원하는 브라우저 마다 표현하는 기본 방법은 조금씩은 차이가 날 수 있습니다. 예를 들어 헤딩의 글꼴 크기가 IE(인터넷익스플로러)와 FF(파이어폭스)가 서로 다르다든지, 각각 가지고 있는 기본 여백의 크기가 브라우저별로 다르다든지, 목록의 여백을 margin과 padding으로 다르게 처리한다든지.... 이러한 브라우저별 차이를 없애려면 CSS 에 각각의 요소에 명확하게 그 처리 내용을 선언하면 됩니다. 물론 다양한 CSS 설정을 통해서 각각의 요소에 좀 더 특별한 효과를 줄 수도 있습니다.

HTML 요소별 CSS 작성 예시

.article ol,
.article ul {
    margin: 10px 20px;
    padding: 0 20px;
}
.article ol { list-style: decimal; }
.article ul { list-style: disc; }
.article dl { margin: 15px 0; }
.article dt { font-weight: bold; }
.article dd { padding-left: 25px; }
.article blockquote {
    background: url(../images/bg_quotation.gif) no-repeat top left;
    font-family: Georgia, "Times New Roman", serif;
    margin: 10px;
    padding: 10px 15px 10px;
    min-height: 70px;
}
이하생략...

이것은 곧, 구조를 표현한 HTML 만 남기고 스타일은 CSS로 분리해 내는 것을 말하기도 합니다.

CSS에 대한 관련지식이 없다고, 너무 걱정할 필요는 없습니다. 따로 CSS 를 작성하지 않아도 그 차이가 글읽기에 방해가 될 만큼, 눈에 띄게 차이가 나지도 않을 뿐더러, 사실 이것은 사용하는 블로그 툴의 책임이거나, 테마(스킨) 디자이너의 영역에서 처리되어야 할 문제 이니까요. :)

Markdown 포매터의 활용

아~ 힘들게 돌고 돌아서 여기까지 왔습니다. 간단히 쓴다고 해 놓고선, 쓰다 보니 이거야 원... 줄어들진 않고 늘어만 갑니다.. 암튼 지금이라도 각설하고(?)앞서 언급했던 그 괜찮은 대안에 대해 말해보죠. :)

앞서 언급했던, 텍스트큐브 위지윅 대안 에디터는 '마크다운포매터' 입니다. 그저 함께 포함된 플러그인 중에서 찾아서 활성화 하고, 글쓰기 창 포매터 고르는 곳에서 Markdown 을 선택하기만 하면 됩니다. 사실 Markdown은 위지윅과는 거리가 먼 마크업 언어입니다.6 마크다운이 왜 쓸만한지, 그리고 그 사용법에 대해선 제가 답답하게 설명하기 보다는, 아래 링크의 글을 읽어 보시는게 훨씬 좋겠습니다. :)

마크다운 문법은 HTML 문법만큼 어렵지 않습니다. 그저 손으로 혹은 워드프로세서로 글을 작성하듯이 자연스럽게 작성할 수 있는 것이 마크다운의 가장 큰 매력입니다. 때문에 마크다운 문법으로 작성된 보통의 텍스트 문서만 보아도, 웹상에서 보는 것과 크게 다르게 느껴지지 않습니다. 마크다운의 기본 문법만 익혀도, 앞서 언급했던 HTML 태그들을 훌륭히 마크업한 글을 보다 쉽게 작성하실수 있습니다.

게다가, 텍스트큐브의 마크다운 포메터는 기본문법을 넘어서 마크다운 extra 문법도 훌륭히 지원하고 있습니다. 마크다운 extra 문법을 사용하면 정의(<dl>) 태그나 테이블(<table>) 태그, 심지어 각주 기능까지 복잡한 HTML 태그 사용없이 간단히 표현할 수 있습니다. 또한, 텍스트큐브의 마크다운 포매터는 텍스트큐브 위지윅에서 만들어 주는 코드7들도 제대로 표현해 줍니다. 그냥 HTML 문법을 중간 중간 섞어서 써도, 별 문제 없이 의도한 HTML 문법대로 표현해 주는 것은 물론이지요!

위지윅의 도움 없이 <table> 태그 만으로 테이블을 그리는 것은 정말 짜증 나는 일이 아닐 수 없습니다. 그런데 마크다운 extra 문법을 이용하면 문자로 그림 그리듯이 테이블을 그릴수 있습니다.

마크다운 문법이 만들어 주는 테이블 예시

사야할것들 갯수 가격
2개 1000원
우유 1개 550원
호빵 12개 4000원
| 사야할것들     | 갯수 |  가격  |
| -------------- | ---- | ------:|
| 빵             |  2개 | 1000원 |
| 우유           |  1개 |  550원 |
| 호빵           | 12개 | 4000원 |

정말이지 훌륭한 마크업 문법이라 말하지 않을수 없습니다!! 지금 보시고 있는 이 글도 마크다운 문법으로 작성되었음은 물론입니다. :)

마크다운과 비슷하지만, 더 다양한 태그들을 지원하고 있는 Textile 문법 Link1, Link2을 이용하는 Textile 포매터 역시 훌륭한 대안이 될 수 있을 것입니다.

HTML의 본래 목적인 문서 구조를 표현하는 글쓰기

마크다운 이야기를 하느라 결론이 삼천포로 빠질 뻔 했습니다. :) 아무튼, 위지윅 에디터를 사용하든, 오직 HTML 편집상태에서 HTML 문법을 Hand(혹자는 Hard) 코딩하든, 아니면 마크다운 포매터를 이용하든.... 핵심은 이겁니다. HTML 태그를 의미에 맞게 적절히 잘 사용하게 되면, 문서는 보다 잘 짜여진 구조를 갖게 되고, 더욱 풍성한 정보를 가질 수 있다는 겁니다. 웹표준 준수와 시멘틱한 웹도 멀지 않은 곳에 있게 됩니다. (아~ 죄송합니다! 이야기는 두서 없이 제 멋대로 해 놓고, 억지로 결론 내 버리려니 결론이 엉성하기 짝이 없습니다.. 깔깔~)

물론 복잡하게 보일수도 있는 위 태그들을 꼭 사용하라고 강요하는 것은 아닙니다. (티스토리처럼 위지윅에서의 지원도 미비한 경우에는 더더욱 강요하기 힘들겠습니다.) 다만, 확실하게 말씀드릴수 있는 것은, 앞서 언급한 태그들을 의미에 맞게 사용하는 것이 보다 효율적이고 올바른 방법이라는 것입니다. HTML 본래의 목적은 문서의 논리구조를 기술하는 것이라 합니다. 이 목적만 생각해 봐도 어떤식으로 글을 작성해야 하는지는 명확해 집니다. 뭐 이것 저것 따지지 않더라도, 좋은게 좋은거 아니겠습니까? :) 자주 쓰이진 않겠지만, 몇 가지만 더 붙이자면, 아래첨자(subscript) 위첨자(superscript)를 표현해 주는 <sub><sup> 태그, <abbr>, <acronym>, <dfn> 따위의 태그들도 익혀 두면 좋습니다. :)

사실, 저 역시, 글을 쓸때 HTML 구조를 생각하고, <br> 대신 <p>를 쓰고, 마크다운 포매터를 이용해서 글을 작성하게 된 것은 얼마 되지 않았습니다. 그렇기에 이런 글을 적는게 조금은 부끄럽습니다. 처음부터 이렇게 긴 글을 적으려고 했던 건 아닌데, 이 얘기 하다 보면 저 얘기가 나오고, 저 얘기를 하니 이 얘기가 절로 나오는군요. 결국 이 글은 여기 저기 겉만 핧고 있습니다. :P 아무튼, 깊게 알진 못하는 보통내기의 글입니다. 틀리거나 잘못된 내용이 있다면 그냥 지나치지 마시고 꼭 고쳐 주세요~ :)

더 참고하면 좋을 문서들
각주

  1. W3 School 에서는 웹언어에 대한 많은 정보를 얻을 수 있습니다. 

  2. 적어도 텍스트큐브, 태터툴즈 기반의 서비스형 블로그들의 테마(스킨)들은 대부분이 XHTML 로 작성되었으니, </p> 라고 닫힘태그를 적어 주는 것이 좋습니다. W3C Recommendation 

  3. <br>의 경우도 XHTML 에서는 <br /> 로 닫힘을 표시해서 적어야 합니다. 

  4. 워드프레스(Wordpress)는 설치형 블로그 툴이지만, http://wordpress.com 을 이용하면 서비스형 워드프레스를 만나실 수도 있습니다. 

  5. 대부분의 브라우저에서 아직까지 삭제선을 그어주긴 하지만, <del> 태그를 이용하는 것을 권합니다. 

  6. 오히려 HTML 모드 글쓰기와 더 비슷합니다. HTML 역시 마크업 언어이니까요. :) 

  7. 이를테면 그림 삽입 관련 텍스트큐브 위지윅 코드. 

Trackback

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다

  1. Subject : 중독의 생각

    Tracked from naxer's me2DAY 2008/11/30 00:25 del.

    Markdown. 블로그, HTML 글쓰기의 기술. 위키에나 쓰이는 문법인줄 알았더니, 참 유용하다.

  2. Subject : 중독의 생각

    Tracked from naxer's me2DAY 2008/11/30 00:26 del.

    블로그, HTML 글쓰기의 기술. Markdown - 위키에나 쓰이는 문법인줄 알았더니, 참 유용하다.

  3. Subject : markdown 이야기

    Tracked from Resistan.com 2008/12/01 16:44 del.

    Markdown markdown은 John Gruber와 Aaron Swartz가 만든 간편한 마크업 언어다. 가독성과 텍스트 기반의 쉬운 글쓰기 기능을 중심으로 작성되어 있기 때문에, 위키를 비롯한 많은 프로그램에서 유사한 ...

  4. Subject : 블로그 포스팅에 필요한 HTML 태그 1

    Tracked from String's IT & Science 2009/08/09 12:53 del.

    오늘날 블로그 에디터인 위지윅은 뛰어난 기능을 가지고 있습니다. 글에 링크 뿐만 아니라 인용, 주석, 표, 선, 기호, 등등을 다양하게 삽입할수 있지요. 그러나 위지윅에는 한계가 있습니다. 위지윅은 모든 HTML의 기능을 포함할수 없습니다. 그러면 아마 위의 메뉴칸이 넘쳐서 10줄은 되어 있겠지요. :) 그러므로 블로거는 HTML에 대해서 알 필요가 있습니다. 오늘은 블로그 포스팅에 쓰면 유용한 HTML 태그 10종류를 소개하려고 합니다. 제가 생각..

  5. Subject : HTML이 싫으면 마크다운 문법과 위지윔 에디터로!

    Tracked from String's IT & Science 2009/08/12 13:26 del.

    안녕하세요, 오늘은 마크다운(Markdown)과 위지윔 에디터(The Wysiwym Markdown Editor)에 관해서 쓰겠습니다. 블로거들이 일반적으로 쓰는 위지윅 에디터는 겉보기에는 안정적이게 보이지만 HTML면에서 보면 아주 불안정합니다. 특히 티스토리 위지윅은 <br>태그를 아무데서나 남발하고 <pre> 태그를 제대로 인식을 못하는 등 문제가 많습니다. 마크다운은 HTML보다 훨씬 쉽고 위지윅보다 안정한 문법입니다. 마크다운(Markdow..

  6. Subject : 세계최고의 웹하드 RapidShare 검색 및 관련사이트 모음

    Tracked from Insoo's Story 2009/09/18 00:21 del.

    크리에이티브 커먼즈 라이센스이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다. -->

  7. Subject : Notepad++에서 마크다운 사용하기

    Tracked from 아르의 운이 좋아지는 블로그 2010/04/18 20:41 del.

    왜 마크다운인가? 블로그를 나름 운영한다고는 하지만 , 써야 될 글을 바로 안쓰고 미루는 상황이 계속되면서, 왜 그런지 곰곰히 생각해보니 이제까지 HTML만을 이용해서 너무 힘들게주1 글을 써왔기 때문에 포스팅 울렁증(?)이 생겼구나 결론을 내리게 되었습니다. 좀더 사용하기 쉬운 포매터의 필요성이 절실하여, 블로그를 오래 운영하는 고수들은 어떤 포매터를 사용하는 지 검색 해보니 마크다운 포매터 란 것이 있으며, 예전에 회사에서 위키를 시험삼아 설치...

Comments

Go to write form
  1. 해맑은탱쟈 2008/11/23 23:35

    와.....정말 엄청난 양의 HTML 글쓰기 강좌군여...
    헌데....ㅠㅠ 다 알고 있어야 -_-;
    저 같은 초짜는 그냥 위지윅(?) 에디터를 사용해야 겠군요 ㅠㅠ 고치기 Reply

    • hi8ar~ 2008/11/24 21:18

      강좌라고까지 말하기엔.. 부족합니다. :) 많아 보이지만 실제로는 전혀 많지 않습니다. 조금씩 익혀가면 어느덧 위지윅이 불편하실 날이 있으실 거에요. :) 고치기

  2. fancyydk 2008/11/24 00:24

    언제나 표준에 의거한 문서작성을 하려 하지만 가끔은 일일히 체크하는게 귀찮을때도 있더라구요. 하지만 적시적소에 맞는 태그를 쓰는게 보기에도 깔끔하고 나중에 스타일시트 적용하는것도 편해서 참 좋은데 말이죠.

    좋은 글 감사합니다 ^^ 고치기 Reply

    • hi8ar~ 2008/11/24 21:21

      네.. 표준을 지키면 오히려 편해지는 것이 더 많은데, 지금 당장 익숙하지 않다고, 무시되는 면이 있어서 안타깝습니다. :)

      부족한 글 좋게 봐 주셔서 감사합니다. (__) 고치기

  3. melt-snow 2008/11/24 00:49

    좋은 내용입니다. 이런 글이 많아지고 많은 웹 개발자와 웹 디자이너가 접했으면 합니다.

    시간이 없어서(취침 시간 돌파;) 다 읽어보진 못했지만 대충 훑어봤는데 잘 정리하셨네요.

    단 한 가지 지적을 하자면, “마크다운 문법이 만들어 주는 테이블 예시” 단락에서 밑에 텍스트로 예제를 표시하셨는데요. 파이어폭스에서 글자 간격이 딱 맞지 않고 비뚤어져 보입니다. 스타일로 폰트를 고정폭(굴림체나 돋움체)으로 설정하시면 깔끔하게 표시될 것 같습니다. ^^

    네이버에 하드코더 모임 카페가 있던데 위지위그 에디터의 유용한 기능을 쓰되 역시 html 코드도 보고 쓸 줄 알아야 제대로 된 개발이 될거라는 생각을 하고 있습니다. 고치기 Reply

    • hi8ar~ 2008/11/24 21:35

      감사합니다. 쓰면서도 이렇게 재미 없게 쓰는 제가 안타까웠는데, 칭찬 받으니 기분이... 우쭐하고 있습니다~! :) 암튼, 이 글은 좋은 글을 작성해주시는 보통의 블로거분들이 참고 하셨으면 해서 적었습니다만, 그런 분들에겐 조금 어려운 내용이 되 버린것도 같고... 어찌 보면 HTML의 기본이 생소하게 여겨지게 되 버린건 우리나라 웹 특유의 환경 때문인것도 같고.... 뭐 그렇습니다. :)

      비뚤어져 보이는 부분은 수정했습니다. 감사합니다!
      아 하코사 말씀이시군요. :) 고치기

  4. 아크몬드 2008/11/24 01:08

    <H>태그를 써야 하는 필요성은 잘 알면서도 귀찮음을 핑계로 잘 실행하지 못하고 있습니다.. SEO를 위해서도 참 필수인데 말이죠. 고치기 Reply

    • hi8ar~ 2008/11/24 21:38

      넵.. 관련지식은 하나도 없습니다만, SEO의 시작이라 말해도 되지 않을까요? :) 암튼 Heading 태그는 모든이에게 귀찮지 않도록, 위지윅에서 간편하게 지원되었으면 좋겠습니다! 고치기

  5. 나비 2008/11/24 01:13

    이건 뭐임? 외계어들...먹는 거임??? 고치기 Reply

    • hi8ar~ 2008/11/24 21:40

      ㅇㅇ 먹는거임.. 글지말고 나비씨도 찬찬히 익혀 보삼. 찬찬히 익히면.. 피가 되고 살이 되는 찌개백반~ 응? 고치기

  6. 주성치 2008/11/24 02:33

    워드프레스에서는 <br />을 넣으면 워드프레스가 없애버려서 한국 게시판에 익숙한 분들에게는 문화적 충격을... 고치기 Reply

    • gabal 2008/11/24 10:06

      워드프레스에선 작성할때는 보이지 않겠지만 적절하게 p와 br을 삽입시켜 줍니다. 단지 사용자의 눈에 안보일 뿐 w3c에서 xhtml검사를 하시거나 웹 상에서 소스보기를 해보시면 알 수 있죠 고치기

    • hi8ar~ 2008/11/24 21:44

      문화적 차이.. 깔깔~ 저 역시 워드프레스를 처음 설치했을때가 떠오릅니다! :) 암튼 워드프레스는 참 훌륭한 툴입니다. ^^ 고치기

  7. daewonyoon 2008/11/24 08:34

    정말 공들여 쓰신 글이네요. 이런 글 한 번 쓰고 싶었는데, 너무 잘 정리해 주셨습니다.

    티스토리에 br과 p 선택 옵션이 있다는 건 몰랐네요. 어서 빨딱 가서 p로 바꿔놓아야 겠습니다. 고치기 Reply

    • hi8ar~ 2008/11/24 21:52

      고맙습니다! :) 저 역시 이번에 이 글을 적으면서 발견했습니다. 티스토리에 그런 설정이 있을 줄은..^^ 어서 빨리 텍스트큐브의 설정에도 그런 설정이 생겼으면 좋겠습니다. 고치기

  8. easyOne 2008/11/24 12:47

    아주 좋은 글입니다~!!
    저도 문단 구분을 <br /> 이 아닌 <p>로 해야하는 게 맞다고 생각해요. 근데 우리나라 인터넷 글은 엔터를 하도 많이 쳐서 거기에 익숙해져버린 면도 없지 않은 거 같아요. 고치기 Reply

    • hi8ar~ 2008/11/24 21:54

      아주 고맙습니다~!! ^^
      뭐 이제라도 사람들 마다 조금씩 바꿔 나가면, 우리나라 인터넷 글들도 <p> 를 더 익숙하게 여길 날이 있... 겠죠? :) 고치기

  9. 입명이 2008/11/24 13:59

    저는 위지윅 쓰지 않고 퀵태그 쓰는데;; 고치기 Reply

    • hi8ar~ 2008/11/24 21:56

      아.. 위드프레스 에디터 html 모드에서 보이는 태그 입력 버튼들을 '퀵태그'라고 하나 보군요. :) 너무 편하고 좋은 기능인것 같습니다. 퀵태그~!! 고치기

  10. 밥먹자 2008/11/25 00:16

    좋은 글 잘 읽었습니다. ^^

    워드프레스는 글 쓰면 알아서 <p>태그가 붙어서 편하더군요. 태그 여닫기 귀찮아서 <br />을 사용하고 있는데, 어서 버릇을 바꿔야지요... ^^;;

    마크다운에서 테이블도 만들 수가 있네요~ 꺄아~~~ 고치기 Reply

    • hi8ar~ 2008/11/25 14:43

      마크다운을 사용하고 나서부턴, 텍스트큐브가 만들어 주는 html 태그들에 대해 신경을 거의 안쓰게 됐습니다! 마크다운 만세~!! :) 고치기

  11. silent man 2008/11/25 13:36

    HTML을 이렇게 유용하게도 쓸 수 있군요. 멋집니다아.
    : ) 고치기 Reply

    • hi8ar~ 2008/11/25 14:46

      넵! 혹자는 HTML 구조는 너무 약하다고 말하긴 하지만, 표현할수 있는 만큼이라도 표현하면, 아주 유용할겁니다!! 고맙습니다! :) 고치기

  12. Bangz 2008/11/25 23:01

    "뭐야.. 다 아는 내용이잖아!" 라고 말 할 수 있었음.. T-T
    북마크하고 배워 볼 생각이 쬐끔 생기는 데요.. 낄낄~ :P 고치기 Reply

  13. LieBe 2008/11/29 07:40

    와...정말 피가 되고 살이 되는 포스팅이네요...

    가물가물했던 몇몇 개념들을 확실히 인지하고 갑니다...

    늘 도움만 받는듯...ㅜㅜ 고치기 Reply

  14. 중독 2008/11/30 00:22

    좋은 글 감사합니다.
    웹 에디터를 좀 찾아보면 입력이 참 어렵습니다. (제가 그렇다는게 아니라...)
    특히 웹 접근성의 측면에서도 위지윅은 상당한 문제를 안고있죠.
    국산 설치형 블로그툴에서도 마크다운을 지원하는 건 상당히 고무적인 일이네요.
    뭔가 우리나라 사람들이 쓰기 쉬운 마크업용 간단 문법이 하나쯤 있었으면 좋겠다고 생각하는 오늘입니다. 고치기 Reply

    • hi8ar~ 2008/12/01 18:01

      안녕하세요~! 고수(?)님의 댓글에 왠지 부끄러워만 집니다. ^^;; 접근성에 대해 공부하고 있긴 하지만.. 쉽지만은 않네요. 아무튼 블로그의 좋은 글들 덕분에 많이 배우고 느끼게 되었습니다..^^ 고치기

  15. dh 2008/12/01 20:34

    줄바꿀때 <br />을 썼었는데 <p> 태그 써야겠네요.. ㅎ 고치기 Reply

  16. parrr 2008/12/05 00:25

    초보자가 들어오기 너무 어려운 블로그가 아닌가 싶습니다.
    하지만 빠져보고 싶은 열망을 불러일으키기에 충분하군요.

    역시나 만져서는 안되는 물건들[?]이었는지 바로 스킨 포스트화면이 다 날라간채로 업을해 20시간 내내 ?질을 하고야 말았다는...

    나중에 이때를 회상하고 싶을지 어떨지는 아직 감이 안서지만 열심히는 해볼 생각입니다.

    허튼소리가 많았는데 너무 맘에드는 바라던 스킨이라 손댈수밖에 없었네요. 용서를... ㅎ

    너무너무 초보지만 생각났을때 공부해 보렵니다. 스킨에서 아직 물어보고 싶은게 너무 많지만 당분간 참아보도록 할게요. ㅎ

    연말 마무리 잘하시구요.

    스킨 잘쓸게요... 고치기 Reply

    • hi8ar~ 2008/12/07 22:11

      음, 그런가요? :) 사실 제 블로그에는 그리 어려운 내용이 없는걸요. ^^;; 열망을 느끼신다니, 저까지 뭔가 끓어 오르는데요? 암튼 감사합니다! 즐거운 연말 보내세요! ^^ 고치기

  17. 스트링 2009/07/31 19:34

    저같은 html 초보자에게 정말 필요한 내용이였는데 정말 감사합니다~
    이제부터 귀찮아도 </br> 대신 <p>를 사용해야 겠네요~ :) 고치기 Reply

  18. 스트링 2009/08/09 12:59

    이 글을 보고 제 글에 비슷한 글을 하나 썼습니다~
    그대로 배낀것은 아니고 아이디어만 조금 빌려갔으니 괜찮죠?:) 고치기 Reply

  19. 미자 2010/01/06 00:58

    와.... 기존 제가 알고있던 HTML의 개념에서 벗어나 한 단계 업그레이드할 수 있겠군요 ㅠㅠㅠ 정말 좋은 글입니다, 감사합니다!:) 고치기 Reply

  20. 철수 2011/07/05 20:57

    너무 좋은 정보 감사합니다. 완전 까막눈인데 배우고 갑니다. ^^ :) 고치기 Reply