일도 잘 안되고 심심해서 RSS로 블로그들을 살펴보던중, 재미난 글을 하나 찾았습니다. 바로, 블로그에서 LaTeX수식을 사용하는 방법에 관한 글이었습니다. 

블로그에 글을 작성하다보면 가끔 수식을 입력하고 싶을때가 있는데, 보통은 다른 에디터에서 작성한 후에 이미지를 업로드 했었죠. 그런데, 이 방법을 이용하면 아주 간단하게 수식을 입력할 수가 있겠네요. 

여기저기 관련글을 좀 더 찾아본 후에 정리해 봅니다. 

위 글에서 소개한 블로그에 올려진 방법을 바탕으로 본 블로그에도 적용을 해 보았습니다.
(참고로 아래 방법의 원문은 http://hshin.info/185 입니다.)

인라인으로 문장에 포함되는 형태로 사용하려면 <tex> ~ </tex>, 좀더 큰 형태로 사용하려면 <texeq> ~</texeq> 태그를 이용하면 됩니다. 

그 결과 아래와 같이 이쁜 수식을 사용할 수 있게 보여지고 있습니다. 

본 글은 아래 사이트들을 참고하여 작성된 것임을 밝혀둡니다.

• 수식 입력! - http://intothereign.tistory.com/182
• Tistory에서 수식 표현하기 - http://hshin.info/185
• mathTeX 티스토리에서 활용하기 - http://chanyy.net/entry/mimeTeX-티스토리에서-활용하기
• mathTeX manual - http://www.forkosh.com/mathtex.html
• KTUG 한글 TeX 사용자 그룹 - http://www.ktug.or.kr

CSS 스타일시트를 이용해서 스타일을 적용하는 방법에는 대표적으로 세가지 방법이 있습니다. 

• 태그를 이용한 방법: A { ... } / DIV { ... }
• 클래스를 이용한 방법: .class1 { ... }
• 아이디를 이용한 방법: #id { ... }

원소들간의 포함관계를 나타내고 싶을때는 공백을 이용해서 나열하면 되고, 동시에 여러 부류에 스타일을 적용하고 싶을때는 ,(comma)를 이용해서 표현하면 됩니다.

예를 들어, 아래와 같은 CSS 구문을 살펴보면, 

content 라는 아이디를 가진 원소 내부에 entry 클래스 원소 내부의 ol, ul, il 태그의 padding-left 을 25px 로 설정하라는 의미가 됩니다. 

그런데, 경우데 따라 위 방법만으로는 표현하기가 힘든 경우가 있습니다.

가령, 서버측에서 자동으로 생성되어 오는 html문장이면서, 별도의 아이디나 클래스가 없는 경우일텐데요, 대표적으로, 티스토리 본문아래에 포함되는 CCL^[각주:1] 안내문구가 그렇습니다.

본 블로그에 포함되어 있는 html은 아래와 같습니다. (이쁘게 보이도록 일부만 캡춰하였음)

가만히 들여다 보면, fieldset 태그로 묶여 있을뿐 어디에도 클래스나 아이디가 보이질 않습니다. 만약, 이에 포함된 링크에만 특별한 속성값을 할당하고 싶을 경우에는 좀 난감하죠. 

그런데, 한줄기 희망이 보이는데, 그건 바로 바로 rel="license" 라고 표현된 링크의 속성값입니다. 곰곰히 생각해보니, 속성값을 이용해서도 스타일을 할당하는 방법이 있었던게 생각이 나더라구요. 표현법은 아래와 같습니다. 

이 방법을 이용하면, tag 중에서 attribute 값이 value 인 원소들에만 적용되는 스타일을 설정할 수 있습니다. 

다음은 본 블로그에 적용된 스타일입니다. 본문 글에 포함된 링크의 뒤쪽에 화살표()가 보이도록 설정을 하였고, 본문 아래의 부가항목들에서는 보이지 않도록 만들어 보았습니다.

화살표 부분을 보면 첫줄은 .article 클래스 > fieldset 태그 > a 중에서 rel 값이 license 인 원소를 의미하고, 두번째, 세번째 줄은 카테고리글 더보기 부분의 클래스 > a 를 의미합니다. 마지막 줄은 메타사이트 추천버튼 부분인데 여기는 제가 직접 입력한 부분이므로 간단하게 meta_link 라는 클래스를 이용해서 설정했습니다. 

이 결과, 의도데로 해당부분에서는 화살표가 보이지 않게 되었지요. 아주 간단한 팁이긴 합니다만, 알아두면 간혹 요긴하게 쓰일 곳이 있을 것 같아 포스팅 해 둡니다.

다만, 이 기능은 인터넷 익스플로러 6 이전 버전에서는 안된다고 합니다. 

다음 블로거뉴스 위젯을 블로그에 달려고 하면 한가지 고민이 생깁니다. 추천뉴스, 인기뉴스, 최신뉴스라는 세가지 정보화면 중에서 어떤것을 메인으로 할까에 대한 고민이지요. 

물론, 조그만 역삼각형을 클릭하면 드롭다운 목록이 열리면서 다른 목록으로 전환이 되긴 합니다만, 사람 심리가 왠지 두번 클릭을 하면 영~ 귀찮은 생각이 들기 마련입니다.

그래서 생각한것이, 바로 가기 버튼을 이용해서 탭을 만들어보자고 생각을 했습니다. 

이게 말로 설명할려니까 좀 힘든거 같은데, 아래 그림을 보는것이 이해가 빠를 듯 합니다. 사실, 혼자 생각한건 아니구요, 믹시의 mixUP 캐스트위젯을 좀 참조했습니다. ^^

위쪽에 세가지 뉴스를 나타내는 링크를 달고, 각각을 클릭하면 해당 목록을 아래에 보여주면서 메뉴의 색상을 진하게 바꾸도록 하였습니다.

이를 위해서는 우선, 블로거 뉴스화면 - My글 퍼가기로 가서 원하는 디자인을 선택한 후에, 소스퍼가기 부분의 소스를 메모장 같은 곳에 복사하여 둡니다. 

제 경우는 이렇게 되는 군요 (클릭하시면 크게 보입니다.)

이중에서 src='어쩌구저쩌구' 하는 부분을 자세히 보면 아래와 같습니다.

http://api...../my_widget?skin=2&page_size=7&init_type=recommend&is_footer=1&daumid=crazybar03 

다시 메모장을 새로 열어서 아래 코드를 입력합니다. 이때, 1번 부분은 위 주소의 빨간색 부분을 입력하고, 2번 부분은 위 주소의 파란색 부분을 입력합니다. (클릭하시면 크게 보입니다.)

블로거뉴스위젯이 IFRAME 태그를 이용해서 내용을 채우도록 되어 있는데, 이를 링크와 연동하여 원하는 내용으로 바꾸도록 한 것입니다. 이때, 선택된 링크의 스타일을 약간 다르게 적용시켜서 눈에 띄도록 하였습니다. 

이제 이 코드를 블로그 상의 붙이고 싶은 부분에 가져다 붙이면 모든 준비가 끝이 나는 군요. 제 경우는 우측 사이드바에 붙여두었습니다.

모든 절차가 완료 되었으면, 각각의 링크를 클릭하여 원하는 기능이 잘 수행되는지 확인해 보면 되겠죠 ^^.. 결과가 궁금하시면 본블로그 우측 사이드바를 보세용

참고로, 크롬과 익스플로로 7.0에서는 정상동작함을 확인하였습니다. 

근데, 이런 위젯을 달아놓기에는 제 글들이 너무 인기가 없네용.. 에궁.. -_-;;

혹시 필요하신분 계실까봐 소스코드도 같이 올립니다. 적용하시는 단계에서 기존의 스킨의 틀이 깨지지 않도록 섬세하게 작업하시기 바랍니다. 

블로그 스킨을 만든다거나 기타 HTML을 이용해서 웹을 디자인하다 보면 보여주고 싶은 정보는 많은데 공간이 좁아서 고민하게 되는 경우가 많이 있습니다. 

특히, 블로그 스킨을 만들다 보면, 개인적으로 사이드바가 있는 2단이나 3단 스타일을 좋아하는데, 동시에 사진을 가능한한 큰 크기로 올리고 싶기 때문에 본문의 너비를 키우면 사이드바의 폭이 좁아져서 내용을 배치하기가 쉽지 않습니다.

이럴때 활용하면 유용한 기능중의 하나가 바로 대부분의 HTML 태그에 사용할 수 있는 title 속성입니다.

title을 이용하면 관련 내용이 마우스포인터를 해당태그위에 올려두면 내용이 보여지는 툴팁(tooltip)으로 적용이 됩니다.

이번에 스킨을 변경하면서 이를 이용해서 사이드바를 정리해 보았습니다.

최근트랙백과 최근댓글을 꾸미는 과정에서 작성자 정보를 보여주려고 하다보니 한줄에 표현하려면 제목을 줄여야하고 제목을 그대로 보여주려면 두줄로 보여줘야했습니다. 그래서 작성자 정보를 title 속성에 집어 넣어버렸습니다.

다음은 본 블로그에 적용된 스킨 중에서 위 그림에 나온 최근트랙백 부분입니다.

기존에는 span 태그를 이용해서 작성자 정보를 보여주고 있었지만, 이를 지우고(혹은, 주석처리) 이를 감싸로 있는 li 태그에 title속성을 통해 표현하였습니다.

최근댓글부분에도 이와 유사하게 처리가 되어있습니다. 

그럼 테스트를 위해 오른쪽에 있는 최근댓글이나 최근트랙백 위에 마우스를 직접 올려놓아 보세요.. ^^

다음 위젯을 적용하다보면 블로그 스킨과 어울리질 않아서 좀 망설여지는 경우가 있습니다. 요번에 스킨을 바꾸면서 저 역시 느꼈던 부분인데요.

그럴때 사용하면 편리한 기능이 바로 HTML 소스퍼가기 입니다. 간단히 말해서, 드래그앤드랍 방식이 아닌 HTML 소스를 직접 받아와서 원하는 위치와 스타일을 적용하는 기능이지요.

이를 티스토리의 사이드바에서 이용할 때는 HTML 배너출력 이라는 항목을 이용하면 됩니다. 

사용중인 사이드바에 HTML 배너출력 항목을 추가하고, 소스부분에 위에서 가져온 코드를 입력하면 됩니다. 이때, 코드 앞뒤에 다른 태그를 추가로 삽입하여 원하는 디자인을 구축할 수 있습니다. 

참고로, 사이드바 설정은 관리자->스킨->사이드바 설정 에서 하실수 있습니다. 

다음은 적용한 결과 입니다. 두개의 라운드 시계가 삽입되어 있는데요, 위쪽이 HTML 소스와 HTML 배너를 이용한 것이구요, 아래쪽은 단순 퍼가기 후에 사이드바에서 드래그앤드랍으로 붙인 것입니다. 

위쪽 시계에는 다른 사이드바 항목들과 일체감을 주기위해 스킨에서 제공하는 배경 및 테두리를 붙였습니다. 첨에 아래 시계처럼 단순 붙이기를 한 후에는 뭔가 어울리지 않는 듯 보여서 좀 이상했는데, 위처럼 하고 나서 보니 다른 항목들과 일체감을 가지게 되어서 한결 자연스러워진 느낌이 드네요..

참고로, HTML 배너출력을 붙이면 기본적으로 아래와 같은 HTML 형태로 사이드바 항목이 만들어 집니다. 

<div class='module module_plugin'>
    <!-- 사용자가 입력한 코드 -->
</div>

따라서, 디자인을 정확하게 맞춰주기 위해서는 module과 module_plugin이라는 클래스에 대한 스타일값을 스타일시트(관리자->스킨->HTML/CSS편집->style.css)에 추가해 주어야 합니다. 

그외에 HTML 소스퍼가기를 이용하면 사이드바가 아닌 곳에도 위젯을 붙일 수 가 있습니다. 이때는 스킨파일(관리자->스킨->HTML/CSS편집->skin.html)의 원하는 위치에 복사해간 코드를 추가해 주면 됩니다.

구글 크롬은 일단 빠른 속도로 소문이 나서 적지 않은 분들이 주력 브라우저로 사용하고 있습니다. (물론 우리나라처럼 변태스러운 웹환경에서는 100% 전환은 불가하지만요.. )

이번 포스팅에서는 얼마전 스킨을 수정할때랑 Exif플러그인 제어용 스크립트를 작성하면서 직접 격어본 내용을 바탕으로 크롬에서 제공하는 디버깅기능을 소개할까 합니다.

웹페이지 개발을 해본 분이라면 개체들간의 레이아웃을 맞추기위해, 불필요한 border넣어가면서 크기나 스타일을 가늠해 본 경험이 한두번쯤은 있을겁니다. 뭐, 사실 이건 우리가 프로그램 코딩할때 printf 잔뜩 넣어서 확인하는 것과 유사한 최 하위레벨 디버깅이라 할 수 있습니다. 

크롬에서는 보다 편리한 개발환경을 위해 다양한 디버깅도구를 제공합니다.

맨 먼저 살펴볼 내용은 요소검사입니다. 웹페이지를 크롬에서 확인하는 도중에 오른쪽 버튼을 클릭하면 요소검사라는 항목이 나옵니다. 

이를 클릭하면, 현재 화면에 보여지고 있는 실제 html과 스타일을 보여주는 창이 나타납니다. 중요한 것은, 스크립트에 의해 생성된 모든 소스까지 확인해 볼수 있다는 점이죠. 하지만, 이것까지만 하면 흔히 볼수 있는 소스보기와 별반 다를게 없습니다. 

아래에서 뒤쪽에 보이는 것이 웹페이지이고, 앞에 뜬 창이 요소검사 창입니다. 

파란색으로 선택된 항목을 보면, Exif플러그인 제어하면서 추가된 스크립트가 document.wirte 구문을 이용해서 생성한 문장입니다. 즉, 실제 html로 작성된 문장이 아니란 뜻이죠. 그리고, 요소검사에 나타나는 html은 브라우저에 보여지기 위해서 모든 프로세싱이 끝난 상태를 의미합니다. 

이번엔 파란색으로 된 부분을 선택하니까, 해당 요소가 가지는 스타일 정보가 오른쪽에 나타납니다. 요소의 실제 스타일을 곧바로 확인해 볼수 있게 됩니다. 또, 스타일 부분중 취소선으로 표현된 부분이 있습니다. 그 부분은 스타일이 무시되었다는 걸 의미합니다. 

위는 .article .ariticle_post 의 padding 설정이 .article_post의 설정보다 우선순위가 높아서 해당부분이 무시된 경우입니다. 

이번에는 뒤쪽 웹페이지를 보겠습니다. 요소검사창에서 파란색으로 선택된 요소에 해당되는 부분이 노란색으로 선택되어 있는 모습을 확인 할 수 있습니다. (이를 위해선 마우스 포인터를 보고싶은 요소 위에 올려두면(mouseover) 됨)

한가지 예를 더 보겠습니다.

사이드바 설정을 확인하기 위해 해당 부분위에서 요소검사를 클릭하였더니, 위 그림처럼 요소의 영역이 표시가 되는 군요. 

결국, 요소검사 창과 브라우저가 서로 연동이 되고 있다는 걸 의미합니다. 이를 통해서, 보여지는 부분과 html 소스, 적용된 스타일등의 상호작용을 눈으로 확인할 수 있습니다. 

크롬에서는 이 외에도 아래와 같은 소스보기 기능(Ctrl+U)도 제공합니다.

또, 스크립트 개발을 도와주는 디버거(Alt + `) 도 제공을 해 주는데, 웹페이지에 적용된 스크립트가 실행되면서 발생하는 모는 에러나 예외를 실시간으로 확인이 가능합니다. 

웹페이지 개발까지는 아니더라도, 블로그 스킨이나 스타일 수정같은 약간의 작업만 하려해도 디버깅하는 것이것이 쉽지는 않습니다. 이럴때 이러한 기능을 활용한다면, 보다 쉽게 코딩을 할 수 있으리라 생각됩니다.

홈페이지를 만들다 보면 한글과 영어를 적당히 구분해서 스타일을 적용하고 싶을때가 있다. 뭐, 사실 현재 웹에서 기본 폰트인 굴림체나 돋움체의 영어 글씨가 별로 이뿌지 않기 때문일 것이다.

아이디어:
화면에 표시할 내용을 <<<content>>> , 한글과 영어에 해당되는 스타일의 클래스를 각각 "kor"과 "eng"라 하자.
기본적으로 <<<content>>>에 kor 스타일을 적용하고, <<<content>>>중에서 숫자와 영어 대소문자등을 찾아서 그 부분만 eng 스타일을 적용하게 된다.
이때, 정규식(Regular Expression)을 이용해서 숫자와 영어 대소문자를 구분한다.

JavaScript에서...

<!-- 정규식 정의 부분 -->
<script type="text/javascript" language="javascript">
    function applyEngStyle(str) {
        re   = /([0-9a-zA-Z]+)/g;
        repl = "<span class=\"eng\">$1</span>"
        return str.replace(re, repl);
    }
</script>

<!-- 사용 예 -->
<span class="kor">
    <script type="text/javascript" language="javascript">
        document.write(applyEngStyle("<<<content>>>"));
    </script>
</span>

PHP에서...

<!-- 정규식 정의 부분 -->
<?
    function applyEngStyle($str) {
        $re   = "([0-9a-zA-Z]+)";
        $repl = "<span class=\"eng\">\\1</span>";
        return mb_ereg_replace($re, $repl, $str);
    }
?>

<!-- 사용 예 -->
<span class="kor">
    <? echo applyEngStyle("<<< content >>>"); ?>
</span>

위 방법 중 JavaScript를 이용한 방법이 본 블로그에 적용되어 있다.

<h1>
    <script>
        document.write(applyEngStyle("crazybar.net에 오신걸 환영합니다."));
    </script>
</h1>

위문장을 수행한 결과가 다음과 같다. ( 참고로 h1에는 돋움체, h1 span.eng에는 Trebuchet MS가 설정되어 있음 )