hi8ar.net

081127

2008-11-27T22:33:49+09:00

vs: NOOTO by lassekongo83
wp: Thanksgiving Rocks 2008 by David Lanham
글꼴: 나눔고딕, 나눔고딕 Bold

드디어 lassekongo가 예전 실력을 보여 주는 듯. :) GDI++과 나눔고딕, 그리고 foobar만 있으면 맥도 부럽지 않아... :) 평소 같았으면 Edl 씨가 한글글꼴로 수정해 주길 꾹 참고 기다렸겠지만, 오늘은 유난히 목이 말라서.. 수정해 버렸습니다. @_@'' 나눔고딕과 나눔고딕 Bold 가 꼭 있어야 합지요. 내려받기는 여기서.. 쉘파일도 없고 암것도 없고, 오로지 나눔고딕 글꼴 하나뿐!

스타일 빌더를 열고, 글꼴을 하나씩 수정하다보니, 예전에 메신저에서 날밤까던 시절.. Jays씨가 했던 말이 떠올랐습니다. 대한민국 1%... 깔깔.. :p

예술작품.

2008-11-26T00:54:35+09:00

hi8ar작_무제

나도 할수 있다. 예술작품.... 음, 그러니까 현대사회의 소외, 상실감, 고난 속에 정신놓고 사는 본인의 정신적 쇠퇴, 쇠락을 표현했다고나 할까? 그치만... 아무도 알아주지 않는다...@_@'' 이랬다간... 픕~ 이건 뭐 유머일번지식 유머도 아니고... 따신밥 먹고 쉰소리나 하는놈 소리 듣기 딱 좋겠다! 아하하하하~ 농담. 미안해요. 사실은 오늘 저녁 술자리, 옆테이블분들의 대화가 지금도 귓가에 맴돌아서... :) 예술가.. 너무너무 멋진 사람들... :)

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

2008-11-26T00:30:20+09:00

관련된 내용을 여쭤 오시는 분들고 있고해서 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 School 의 References 페이지로 링크했습니다.¹ 브라우저 지원여부, 자세한 사용예와 결과 등은 링크한 페이지로 대신합니다.
저 역시 모든 위지윅 에디터에 대해서 알지 못합니다. 많이 아는 것도 아닙니다. 주로 텍스트큐브와 티스토리의 웹 위지윅 에디터를 사용하며 느낀 것에 대해 적겠습니다. 티스토리를 다음에서 운영하게 되면서 티스토리의 에디터는 다음의 에디터가 되었습니다. 네이버의 위지윅은 다음의 위지윅과 거의 차이가 없더군요.

문단 Paragraph `<p>`

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

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

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

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

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

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

제목 Heading `<h1>` ~ `<h6>`

Heading

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

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

다행 스럽게도 텍스트큐브 위지윅 에디터 역시 잘 보이지 않는 곳에 있긴 하지만 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>`

일반적인 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> 태그⁵ 도 사용했지만, 이제 이 두 태그는 버려진(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은 위지윅과는 거리가 먼 마크업 언어입니다.⁶ 마크다운이 왜 쓸만한지, 그리고 그 사용법에 대해선 제가 답답하게 설명하기 보다는, 아래 링크의 글을 읽어 보시는게 훨씬 좋겠습니다. :)

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

게다가, 텍스트큐브의 마크다운 포메터는 기본문법을 넘어서 마크다운 extra 문법도 훌륭히 지원하고 있습니다. 마크다운 extra 문법을 사용하면 정의(<dl>) 태그나 테이블(<table>) 태그, 심지어 각주 기능까지 복잡한 HTML 태그 사용없이 간단히 표현할 수 있습니다. 또한, 텍스트큐브의 마크다운 포매터는 텍스트큐브 위지윅에서 만들어 주는 코드⁷들도 제대로 표현해 줍니다. 그냥 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 아무튼, 깊게 알진 못하는 보통내기의 글입니다. 틀리거나 잘못된 내용이 있다면 그냥 지나치지 마시고 꼭 고쳐 주세요~ :)

더 참고하면 좋을 문서들

각주

W3 School 에서는 웹언어에 대한 많은 정보를 얻을 수 있습니다. ↩
적어도 텍스트큐브, 태터툴즈 기반의 서비스형 블로그들의 테마(스킨)들은 대부분이 XHTML 로 작성되었으니, </p> 라고 닫힘태그를 적어 주는 것이 좋습니다. W3C Recommendation ↩
<br>의 경우도 XHTML 에서는 <br /> 로 닫힘을 표시해서 적어야 합니다. ↩
워드프레스(Wordpress)는 설치형 블로그 툴이지만, http://wordpress.com 을 이용하면 서비스형 워드프레스를 만나실 수도 있습니다. ↩
대부분의 브라우저에서 아직까지 삭제선을 그어주긴 하지만, <del> 태그를 이용하는 것을 권합니다. ↩
오히려 HTML 모드 글쓰기와 더 비슷합니다. HTML 역시 마크업 언어이니까요. :) ↩
이를테면 그림 삽입 관련 텍스트큐브 위지윅 코드. ↩

Face your manga

2008-11-20T18:15:50+09:00

오홍홍홍홍.. 뻥 좀 보태서... 보면 볼수록 나같다. 아웅 누가 봐도 나인줄 알겠는걸? 좀 더 적나라하게 표현하고 싶었지만.. 아무렴 어때, 어짜피 아무도 내 얼굴 모르잖아~ :)

이 퍼니한 서비스는 여기에서..

구름과자와 호빵

2008-11-18T22:28:14+09:00

여느때 처럼 담배 사러 집앞 구멍가게에 갔는데.. 구멍가게 앞에 김이 모락모락 피어 오르는 빨간 뚜껑 달린, 못 보던 투명 기계.... '아 이 슈퍼 호빵기계 완전 새거잖아..' '쳇~ 호빵기계 따위가 뭐 이리 예뻐..' '이렇게 예쁜통을 밖에다 두고, 동심 잃은 나 같은 녀석까지 꼬여내는 걸 보면, 이건 분명 공격적 마케팅이란 걸거야!' '이야.. 근데 뭔 호빵 색들이 이라 오색 찬란하냐? 모르는 놈은 뭐 사먹어야 될지 한참 골라야 겠다.' 드르륵~ 안녕하세요~ '앗, 오늘은 아주머니 아니고, 아저씨구나..' 아저씨 디스플러스 두갑이요. 아니다, 하나는 레종으로 주삼.. 아 이거 말고 블랙... 아.. 호빵 파네요? 생긴것 답지 않게 말투만은 상냥한 아저씨 왈.. 넵.. 방금 넣었어요. 조금 있다가... '뭘 방금 넣어? 아까 보니 김이 모락모락 나던데.. 근데, 이 아저씨 왕년에 어깨였을것 같다. 어울리지 않는 장발에, 팔뚝에 뱀 같은게 살짝 보여..' 아~ 네~.. 담에~..

집에 와서 어머니께.. 엄마, 춥다. 벌써 호빵 판다.. 사왔냐? 아니.. 돈 없어.. 니 담배 한갑만 안 사도 두개는 사먹겠다..

'피식~ 그렇구나.. 두개..ㅋㅋ' 내일은 구름과자 대신 호빵 두개 사먹어야 겠다. :)

이글은 IE 에서는 "큰따옴표가 보이지 않아요. :)

표지 style.css for whiteBoard

2008-12-04T16:21:43+09:00

스킨 공개한지 2주 정도 지났습니다. 부족하고, 보잘껏 없는 스킨에 많은 분들의 관심과 칭찬(?)에 몸둘바를 모르겠습니다. 이 바닥에서는 이름만 말해도 알만한 유명 블로그에 걸리기도 하고.. 스킨이 저보다 더 출세했습니다. :) 사실 공개할때만 해도, 제 취향에나 맞지, 다른 분들 보시기엔 별 볼일 없을 거라 생각했었습니다. 그런데, 세상엔 제 취향과 비슷하신 분들도 알게 모르게 많은가 봅니다! (__)

아무튼, 텍스트큐브의 플러그인 중 하나인 커버페이지 혹은 표지(MT_Meta_RecentPS_Default) 플러그인 에서 사용하는 스타일시트를 간단히 만들어 봤습니다. (예정 업데이트에 적어 두었던 걸 하게 될 줄은 며느리도 몰랐는데~)

모든 블로그의 최근글 보기 플러그인

텍스트큐브 플러그인계의 대부 J.Parker 님의 '모든 블로그의 최근 글 보기' 플러그인 입니다. (아~ 이름이 참 길군요. 앞으로는 그냥 '표지' 라고 하지요.) 암튼, 텍스트큐브 확장패키지를 설치하신 분이라면, 기본으로 포함되어 있는 플러그인 입니다. 표지 플러그인을 활성화 하시고, 환경설정하고, 꾸미기 - 위젯 - 표지 위젯 에서 표지에 나타낼 것들을 설정합니다.

표지로의 접근은 http://블로그 주소/cover 입니다. 따로 접근할 링크를 만들어 두시거나, 표지 위젯 설정에서 표지를 블로그의 첫 화면으로 설정합니다 에 체크하면 블로그의 첫 페이지가 표지가 됩니다.

표지에서 사용할 수 있는 위젯을 제공하는 플러그인들은 텍스트큐브 표지 플러그인 페이지에서.. :)

whiteBoard coverPage style.css

표지 플러그인에서 다른 건 하나도 수정하지 않았습니다. 아마 하라고 해도 못할 겁니다. :)

Mt_styleForWB.zip

포함된 파일은 두개세개로..

style.css 는 텍스트 큐브가 설치된 폴더/plugins/MT_Meta_RecentPS_Default 에 덮어 씌우시고.
tag.gif 이미지는 위 플러그인 이미지 폴더에 넣어 주시면 옥헤이~
누락되었던 bg_coverPost.gif를 추가해서 다시 올려둡니다. tag.gif 와 함께 플러그인 이미지 폴더에 넣어주시면 됩니다.

약간 특별한 기능

CSS만을 이용해서 부린 약간의 기교(?)입니다. :) 이미 읽었던(방문했던) 기록이 있는 글은 회색 제목+visited 표시, 아직 읽은 적이 없는 글은 검정색 제목 + 노란 NEW 표시로 나타냅니다.

visited 와 new 예시 그림

그저 a:link 와 a:visited 의 스타일을 다르게 적용한 것 뿐입니다. 때문에 사용하시는 브라우저의 캐시 정보에 따라 new 가 될 수도 visited 가 될 수도 있습니다. 브라우저 캐쉬를 모두 삭제하면 모두 new 가 되버리는 거죠.. :)

.coverpost h2 a:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #fc0;
    content: " - NEW."; /* IE의 경우 IE8부터 이해 가능 */
}
.coverpost h2 a:visited:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #888;
    content: " - Visited."; /* IE의 경우 IE8부터 이해 가능 */
}

물론 이것은 :after 라는 유사 클래스pseudo-classes 와 content: 라는 프로퍼티를 이해하지 못하는 못난이 브라우저(IE6 ~ IE7) 에서는 지원되지 않습니다. :(

기타

IE6 에서는... 모양은 똑같습니다. :)
커버페이지에 넣을 수 있는 것들 중 오직 본문 글에 관한 디자인만 되어 있습니다. 다른 것들에 대한 디자인은 차차 생각해 보겠습니다만, 전 표지 페이지를 별로 좋아하지 않습니다.. :)

예제 페이지는 여기서 보실수 있습니다.

해마다 찾아오는 감기님이 또 찾아 오시려나 봅니다. "안녕~ 감기야~ 왔구나, 안 오는줄 알고 서운했잖아~" :)

whiteBoard for Textcube

2008-11-22T23:28:12+09:00

Textcube를 위한 whiteBoard 스킨을 공개합니다.

whiteBoard v2.0

쵸썰렁한 하얀 보드에 대문짝만하게 낙서하는 기분으로 사용하시면 좋습니다. :) 아름다운 낙서를 위해 다양한 색상의 마커펜을 제공.. 훗~ 처음에 생각했던 깔끔한 시안 이미지는 안드로메다로~ 이것은 완전 난장 분위기~

History

2008.10.30 whiteBoard v1.0 공개
2008.10.31 whiteBoard v1.1 업데이트 - IE6 : 레이아웃보다 작은 크기의 창 사이즈일때 검색폼 배경 잘리는 문제 수정. http://hi8ar.net/entry/whiteboard-for-t ··· ent18650
2008.11.1 whiteBoard v1.1 for 티스토리 공개
2008.11.2 whiteBoard v1.1 for 티스토리 업데이트 - 사이드바의 링크가 출력되지 않는 문제 수정.
2008.11.8 whiteBoard v2.0 / whiteBoard v2.0 for 티스토리 공개 - 작은 가로 해상도(1024px) 에서도 무리 없이 사용 할 수 있도록 수정.

2.0 버젼에서 달라진 점

변경된 파일 : index.xml, skin.html, layout.css, main.css, screen_ie6.css, preview.gif
가로 해상도 1024px 에서도 한 화면에 가로 스크롤바 없이 출력, 그보다 큰 해상도에서는 가운데 정렬하도록 수정.
사이드바 리스트 박스 클래스를 sidebarListBox 에서 listbox 로 수정. (사용자 편의를 위해, 플러그인 등에서 만드는 리스트 코드를 수정하지 않도록, 기본 스킨과 동일한 클래스명으로 수정했습니다.)
방명록 textarea에서 IE6의 경우, hover 효과가 나타나지 않던 문제 수정.
본문 h3 Heading, 1px solid #ddd 밑줄 추가.
사이드바에 200px 이상 되는 element를 추가해도 사이드바가 떨어지지 않도록 수정.
불필요해진 IE_hack 제거.
티스토리 버젼의 경우, IE에서 검색폼 동작하지 않던 문제 수정.
그리고.. 기타 등등.. :)

텍스트큐브 적용 방법

텍스트큐브용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
자신의 계정, 텍스트큐브 스킨 폴더에 FTP 등을 이용해서 폴더 그대로 업로드 합니다.
텍스트큐브 관리자 페이지, 꾸미기 - 스킨선택 에서 적용합니다.
스킨 상세 설정에서 자신의 블로그에 맞게 설정합니다.
참 쉽죠? :)

티스토리 적용 방법

티스토리용 whiteBoard 스킨을 다운받습니다. 다운 받은 zip 파일의 압축을 풉니다.
티스토리 관리자 - 스킨선택 에서 업로드 합니다. (폴더는 구분해서 압축해 놓았지만, 어짜피 티스토리 스킨 업로드 기능이 알아서 업로드 해줍니다. 아무렇게나 몽땅 업로드 합니다.)
새 스킨으로 저장된 whiteBoard 를 적용합니다.
끝~

whiteBoard 스킨 정보

본문 : 620px
사이드바 : 200px
이미지 리사이징 : 600px (index.xml)
모니터 해상도가 가로크기 1280px 이상이 되어야 보기 좋지만, 1024px 에서도 잘 나옵니다.
기본 글꼴 : 이 스킨은 네이버에서 배포하는 나눔고딕 글꼴을 기본으로 사용합니다. (font-family: NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", "Lucida Grande", "Segoe UI", Arial, AppleGothic, Sans-serif; )
텍스트 큐브 1.7.6 버젼에서 테스트 했습니다. 달력을 제외한 대부분의 텍스트 큐브 최신(?) 기능을 지원합니다.
텍스트 큐브 1.7.5 이하 버젼에서 사용시, bodyID 한 곳을 수정하셔야 합니다. main.css 28라인

/* ####### body ID 를 이용한 현재 페이지 표시 ####### */
body#tt-body-pages #navMeta a { background-position: 0 -40px; }

위 코드 부분에서 body#tt-body-pages 를 body#tt-body-page 로 수정하셔야 블로그 처음 페이지 일때 home 탭이 활성화 되어 현재 페이지로 표시 됩니다. 이는 텍스트큐브 1.7.6 에서 notice 를 대신할 수 있는 page 기능이 강화 되면서, 기본 페이지의 body ID 가 변경되었기 때문입니다.

whiteBoard 스킨 특징

XHTML 1.0 Transitional
CSS 2.1
웹표준 준수, Firefox 3.0, Safari 3.1, Opera 9.5, IE 6.0 ~ 7.0, GoogleChrome 크로스 브라우징.
영역별 css 분리 코딩.
쉬운 사용자 컬러 테마 변경. :)
IE를 위한 css hack 분리.
과도하게 남발한(?) 주석 :)
print.css 와 wysiwyg.css 포함.
나눔고딕 글꼴이 설치되지 않은 시스템에서 볼때엔 상당히 구림.. =_='

저작권

공개된 리소스를 제외한 대부분의 권리는 hi8ar.net에 있습니다.
영리/상업적 이용을 하실 수 없습니다.
광고만을 위한 스팸 블로그에선 사용하실 수 없습니다.
개인적인 이용시 자유롭게 수정이 가능합니다. 다만 수정시 원 제작자를 표시하여야 합니다.
특별한 경우가 아닌 이상 다음 링크의 라이센스에 따릅니다. :) http://creativecommons.org/licenses/by-nc-sa/2.0/kr/

사용자 Customizing

컬러 테마 theme.css

css에서 스킨의 기본 색상을 따로 분리해서 하나의 문서에 담았습니다. (과장 쵸큼 보태서..) 아아아~ 카멜레온 처럼 변하는 당신의 블로그는 일곱 빛깔 무지개~~ 훗, 워낙에 배경이 허멀건한 것밖에 없다 보니, 색상 하나만 바꿔도 새로운 분위기~ :) 좋아하는 색상의 마커펜을 사용한다는 기분으로~

theme.css 를 사용하는 텍스트 에디터로 엽니다.
배포되는 theme.css 에 지정되어 있는 기본 컬러는 1번, 빛바랜 빨강색 마커펜 #966 입니다.
사용하는 에디터의 찾기/바꾸기 기능을 이용해서, 좋아하는 색상의 컬러값으로 바꿔 줍니다.
수정한 theme.css 를 다시 업로드 하셔서 덮어쓰시면, ok~
추천하는 색상. 파스텔 톤의 은은한 색상이 잘 어울립니다.
아래는 제가 미리 수정해서 올려둔 예제 입니다. 파일명을 theme.css로 수정하시고 css 폴더에 덮어 쓰시면 됩니다. 싫증이 났거나, 분위기 변화를 주고 싶을때 언제든 교체해 보세요~!

샘플 예제 중후하고 멋스러운 빛바랜 빨강색 마커펜 #966 대자연의 싱그러움을 느끼고 싶어 초록색 마커펜 #996 똘끼 충만 보라색 마커펜 #969 재래식 화장실에 대한 그리움 변색 마커펜 #630 진정한 남자라면 역시 핫핑크 마커펜 #ff0099 시험지의 빨간비 어젯밤에 새로산 빨강색 마커펜 #c33 할머니 손가락의 옥반지색 마커펜 #699

wBThemePack.zip

후~ 괜히 무지개 얘기해서....;;;;

IE6 의 경우 컬러테마에서 변경되지 않는 부분이 있습니다. 자세한 사항은 style_ie6.css 에서 확인 하실수 있습니다._M#]

액세서리

사이드바 250px 변신 킷. :)

250px 변신 킷에 사이드바 왼쪽 padding 값을 잘못 적는 실수가 있었습니다. 11.10 17:30 이전에 받으신 분들을 새로 받아 주세요.. =_=' 아 한번에 깔끔하게 되는 일이 없군요...;;

sidebar_250.zip

사실 킷이라 말하기 뭐하게 파일 딸랑 하나.. 스킨을 설치한 폴더/css/ 에 덮어 씌우면 옥헤이~ 음.. 생각건데 왼쪽 본문 영역 padding 50px 까지 잘라낸다면 (가로해상도 1024px에서) 사이드바는 300px 까지 가능. 본문과 사이드바 사이에 여백 하나 없이 딱 붙여도 좋은 사람이라면 320px 까지... :) 1024px 따위 "지옥에나 가버려~" 라면 사이드바는 당신이 원하는 만큼~ 사족... 본문은 이미지 배경 때문에 쉽게 줄이거나 늘릴 수 없어요~ =_=''

페이징 대체 이미지

이미지 폴더에 덮어 씌우면 됩니다. 어처구니 없게도... 사실 이것이 원래 디자인 이었습니다. =_=' 근데 좀 안 어울려서 중간에 퇴출~ :p

whiteBoard를 위한 표지(Coverpage) style.css

자세한 내용은 http://hi8ar.net/entry/표지-stylecss-for-whiteBoard 에서 보실수 있습니다.

예정 업데이트

예정 사항입니다. 언제 될지, 정말 하게 될지는 며느리도 모릅니다.. ;)

~~가로 해상도 1024px 에서도 가로 스크롤바 없는 멋진 모습 되기.~~
동적 css 적용 스크립트를 이용한 컬러테마 변경.
~~coverpage(MT_Meta_RecentPS_Default 플러그인)용 css.~~

기타 알림사항

whiteBoard 스킨의 본문 스타일은 이글에서 미리 보실 수 있습니다. article.css 에 공통 html 요소들이 디자인되어 있습니다.
나름 여유를 가지고 테스트를 진행 했지만, 얘기치 못한 버그나 에러가 있을 수 있습니다. 댓글로 알려주시면 최대한 빨리 수정하겠습니다.
적용하신 분은 어..... 간단한 사용 소감(?)이라던가.... 음.... 트랙백 같은 거 하나만 부탁 드려요~... 부디.. 그러니까... 제에발.... :p
앞으로의 버그 수정과 업데이트는 지금 보시는 이 글에서 이뤄집니다. 이 글의 "댓글(response) RSS" 를 사용하시는 리더기에 등록해 두시면, 업데이트 정보를 쉽게 보실 수 있습니다.

Download for Textcube

텍스트큐브 스킨 사이트에서 받으실수 있습니다.
DownLoad : http://textcube.org/theme/entry/whiteBoard-for-Textcube

Download for Tistory

티스토리 스타일 미리보기 : http://hi8ar.tistory.com/entry/티슷홀이 ··· EA%B9%8C
DownLoad : http://www.tistory.com/forum/viewtopic.php?id=3091

081105

2008-11-08T18:23:44+09:00

왠지 현실감 있는 바탕화면 - 081105

wp: Bad Passion for Retrofukation by *j3concepts

쉬어가는 페이지... :) left: -150px 에서 margin-left: -150px 로 돌아 왔습니다. left: -150px 를 쓸때, 화면의 숨겨진 부분을 제외하고, 정확한 width 값을 렌더링 하는 브라우저는 딱 세개, Firefox 와 Opera, 그리고 IE8 beta2 뿐이었습니다. Safari 가 제대로 계산하지 못하다니.. 놀랍군요.. =_=' 어짜피 보이는 부분은 다 똑같지만, 정확한 width 값을 계산하지 못하면, 1280px 에서도 가로 스크롤바를 만들어 내더랍니다.. 깔깔..

결국 다시 음수 마진인데.. ~~IE6는 왜 가운데 정렬이 아니고 우측 정렬일까요? :)~~ 아핫~ 실수.. 파일 하나가 빠졌네.. 아~ 멀지 않은 곳에 끝이 보입니다. :)

근데 나 누구한테 얘기하니? 아 배고파. 어짜피 다 살려고 하는 짓이니 밥부터 먹고...... :) (무한도전도 좀 보고...)

작은 해상도에서의 whiteBoard 스킨.

2008-11-14T15:47:16+09:00

에헴..;;;

시작하기 전에, 텍스트큐브 스킨 이 맞나? 텍스트큐브 테마 가 맞나? 워드프레스는 테마 이고, 윈도의 비쥬얼 스타일도 테마 이고... 제로보드는 스킨 인가? 영문화권에서는 테마 이고 우리식으론 스킨 인건가? 뭐 죽이든 밥이든 먹기 좋으면 그만이겠지만...

이젠 의미 없는 내용이라 닫아둡니다..

more.. (11.08)

본론으로...

여기 저기서 작은 해상도에서 불편하다는 문제점이 들려 옵니다. :)

지금의 whiteBoard의 구조는 왼쪽 마진으로 2% 라는 가변값을 가지고 있긴 하지만, 깔짝깔짝 움직이는 수준이고, 거의 고정된 틀이나 다름없습니다. 처음부터 가운데 정렬하지 않았던 이유는, 좌측에 배경 이미지를 살리려고 했기 때문입니다. 때문에 좌측으로 불필요한 여백이 많이 생겨 버렸죠. 물론 오른쪽에도 좌측 배경이미지가 차지하는 만큼의 영역을 만들어서, 가운데 정렬하면 가운데 정렬이야 되겠지만, 그렇다고 좌측 여백이 없어지는것도 아니니, 어짜피 1024px 해상도에서는 별 의미가 없는 작업이라 생각했었습니다.

그러다 보니 좌측에 바짝 붙은 스타일도 아니고, 크기에 따라 가운데 정렬하는 것도 아닌 어정쩡한 레이아웃이 되고 만 겁니다. :) 아.. 지금에서야 느끼고 있습니다...;;; 1024px 보다도 작은 브라우징 환경도 많을 텐데, 이런 어정쩡한 레이아웃은.... 아.. 불편하겠습니다...;;;

암튼, 어제 탱쟈님 알려드리면서, 생각한 음수 마진을 이용하면, "오호라~ 어쩌면 배경을 잘라내면서 가운데 정렬이 가능하겠구나~!" 라는 생각이 번뜩입니다~.

그래서... 오늘, 꼼수를 부려 보기로 했습니다. :) 새로 다 들어 업기는 싫고, 꼼지락 꼼지락 깨작거려 보는 겁니다. 그러니까 그 꼼수의 핵심만 간략히 말씀드리면..... 전체 wrap 에 margin: 0 auto; 를 줘서 가운데 정렬하고, 그 아래 영역들에게 margin-left: -150px; 를 줘서 화면이 작아지면 밖으로 밀어내는 거죠. 성공하면 버젼 1.5 쯤으로 해서 업데이트 하는 겁니다~ 깔깔....

결과는 이렇습니다.

가로 해상도1024px 에선 왼쪽 배경이 잘려나가면서 이렇게 보이고,

제 모니터의 해상도인 1680px 에선 배경이 살아나면서 가운데로 정렬합니다. :)

아 무척이나 고무적인 결과 입니다. 하지만 그분이 발목을 잡습니다.

비교를 위해 정상적인 결과인 IE8 beta 의 캡쳐 사진을 붙여보면..

이.. 이게 뭘까요..=_=' 전혀 가운데 정렬도 아닌데다가, content 의 배경이 싹뚝 잘려 흰색으로 나옵니다... 역시 IE6.... 안드로메다의 브라우져 IE6... 아.. 하긴 음수 마진을 가진 녀석을 그것도 float도 막 지정되 있고, 어떤건 position:relative도 가지고 있는데.. 그걸 auto로 가운데 정렬하라니요... 아무래도 IE6 에겐 너무 어려운 주문이었던 겁니다. 더블 마진 버그나 뭐 이것 저것 생각해 보고 있는데..어버버버버버... 다른 브라우져에서 문제가 발생하면 쉽게 찾아 낼 방법이라도 있지만, IE6 에서 잘못 되면, 일일히 하나하나 바꿔가며 F5를 연타하는 수말고는 모르겠습니다.. 어버버버버... 아~ 이러지도 저러지도 못하다... 결국 ㅈㅈ 인 걸까요? :(

혹시나 해서 가운데 정렬을 left: 50% 하고 크기의 반 나눠서 마진으로 빼주는 방법으로 해 봤습니다만.. 역시나 ㅈㅈ 입니다. 좀 더 가운데로 오긴 하는데.. 마우스로 본문 영역을 클릭하면 전체가 다 선택되는 괴현상이 발견 되었습니다. 깔깔...

아.. 1.5는 역시 없던 걸로 해야겠습니다. 이쯤에서 이 스킨도 버려지는 거죠. :)

재미없는 푸념 끝...

whiteBoard 스타일 미리보기

2008-11-22T23:30:04+09:00

본문 스타일 미리보기

가나다라마바사아자차카타파하

올해 노벨경제학상 수상자로 폴 크루그먼이 선정되었다. 크루그먼은 경제학계에서 노벨상보다 타기 어렵다는 클라크 메달(미국 경제학회가 40세 이하의 최고 경제학자 1명에게 2년에 한 번 수여하는 메달)을 이미 받았으므로 노벨상을 예약해놓은 것과 마찬가지였지만 쉰다섯살의 수상은 예상보다 이르다. 그의 수상에는 금융위기라는 환경도 작용한 것으로 보인다. 최근 미국발 금융위기는 과도한 시장만능주의가 빚은 참사이니 만큼 시장만능주의에 대해 줄기차게 비판해온 크루그먼의 공로가 돋보일 수밖에 없다.

크루그먼 교수는 모건 스탠리 통화 수석 이코노미스트로 일하는 스티븐 젠의 말을 인용, "신흥시장은 커다란 위기에 봉착해 있으며, 미국의 금융시장이 제1차 진앙지라면, 신흥시장의 '경착륙'이 '제2차 진앙지'가 될 가능성이 있다"고 전했다.

그는 글로벌 금융위기의 1차 진앙지인 미국 정부의 정책을 '정부 개입을 혐오하는 부시 행정부의 이데올로기로 핵심을 놓치고 있다"고 맹비판한 뒤 "어떤 이유로 결함투성이의 정책이 계속되고 있는지는 차지하고, 상황은 통제되고 있지 못한 것이 분명하다. 사태가 악화되고 있다"고 비관했다.

크루그먼 교수가 특히 개탄하는 미국 정부 정책의 허점으로 크게 두 가지 사례를 들었다. 헨리 폴슨 미 재무장관은 뒤늦게나마 은행을 부분 국유화하는 자본 투입 방안에 동의했지만, 이 방안을 주도한 영국 정부와는 달리 이 자금을 은행이 대출하는 데 쓰도록 하는 조건을 달지 않았다. 이로 인해 미국의 은행들은 정부의 구제금융을 그대로 끌어안는 경향을 보이고 있다는 것이다.

Dual Image

Triple Image

공통 XHTML 요소

A link, acronym, strong text and ~~deleted text~~.

Code

code-sample {
	font-weight: bold;
	font-style: italic;
}

Example Lists

Here is an example
of an ordered list

Here is an example
of an unordered list

Definition title: Definition description
Definition title: Definition description

Blockquote

Before marriage, a man will lie awake all night thinking about something you said ; after marriage, he'll fall asleep before toy finish saying it.

- H. Rowland

Headers

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Tabular Data

post date	title	description
2008.10.26	햄버거 군	한개에 십원.
2008.10.26	피자 양	날 먹으면 내일 아침 얼굴이 뽀송뽀송. 몸두개는 불어불어 두배두배 그래도 먹을거야?
2008.10.26	맥주+소주	어질어질 삐질삐질 하악하악.
2008.10.26	2차는 노래방?	돈은 네가 내. 음치는 사절.

More/Less

열려라 참깨..