seevaa의 잡다구리한 이야기

티스토리(또는 테터툴즈, 텍스트큐브)에서 글을 작성할 때 표(테이블)를 작성하기가 쉽지 않습니다. BlogAPI를 활용하는 것도 방법이 되겠습니다만, 저처럼 웹상에서 바로 작성하는 경우가 대부분이라는 생각에...

글작성시 이지웍모드에선 표(테이블)를 만들기 기능이 없고, html모드에서 작성해서 수정하거나 해야합니다. 또한 글을 작성하다보면 다른곳의 표를 긁어서 붙여넣기할 경우 많은데, 이경우도 붙여넣기한 테이블이 깨지거나하면 다시 수정을 해줘야 하는 경우가 다반사죠, 특히나 테이블같은 건 스타일부분이 같이 섞이면 소스가 복잡해져서 html모드에서 해결하려면 펜잘하나 먹어야됩지요. 그나마 이지웍모드에서 할 수 있는 '테이블 모양의 수정정도'도 왠만한 인내가 없으면 활용할 수 없는 정도여서, 표를 이용한 포스팅에 애를 먹은 적이 한두번 있으리라 생각되는군요. 이같은 불편함은 개선되리라 믿으며, CSS를 활용해서 보다 간편하게 테이블을 표현하는 방법을 적어봅니다.

간단히 말하면, 테이블의 내용과 기본 골격만 html모드에서 작성하고 나중에 발행한 포스트에서 원하는 모습으로 보이게끔 테이블의 모양을 CSS에 넣어두는겁니다.

먼저, 아래와 같이 테이블 모양을 CSS에 추가합니다. 그냥 기본적으로 회색으로 보이게 설정 해봅니다.

.article table.normalTable { border-collapse:collapse; clear:both; width:100%; border:1px solid #ccc;}
.article table.normalTable tr th { border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:5px; background:#eee;}
.article table.normalTable tr td { border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:3px;}
.article table.normalTable tr:hover { background:#eee;}

그다음 글 작성할때마다 아래와 같이 꼭 필요한 부분만 html모드에서 작성하고, 테이블의 클래스를 지정해줍니다. 다른곳에서 긁어 온 경우는 번거롭지만 테이블골격과 데이터부분만 빼고 style이 들어가는 부분은 없애줍니다.

<table class="normalTable">
	<thead>
		<tr><th>Section</th><th><a href="http://seevaa.net/">seevaa.net</th></tr>
	</thead>
	<tbody>
		<tr><td>Website Grade</td><td>92</td></tr>
		<tr><td>Google Page Rank</td><td>4</td></tr>
		<tr><td>Traffic Rank</td><td>1,463,450</td></tr>
		<tr><td>Blog Rank</td><td>7,745</td></tr>
		<tr><td>Inbound Links</td><td>140,109</td></tr>
		<tr><td>del.icio.us Bookmarks</td><td>2</td></tr>
		<tr><td>Google Indexed Pages</td><td>2,180</td></tr>
	</tbody>
</table>

예(*IE는 새로고침F5 한번해주는 센스)

어떻게 보면 두번 일하는 것처럼 번거롤수 있지만 몇번 이렇게 쓰다보면 매번 테이블에 매달리는 것보다 편합니다. 또한 여러가지 테이블모양을 클래스로 CSS에 넣어두었다가 그때그때 class만 바꿔줘도 되고, 스킨이 바뀌면 바뀐 스킨에 어울리게 CSS에 클래스설정만 수정해주시면 되니까요~
나아가 꼭 테이블 뿐 아니라, 자주 사용하는 style표현들도 CSS에 넣어두고 그때그때 클래스만 지정해주는 식의 글작성을 하는 것도 좋겠지요~

클래스만 바꾼 예

작년 여름쯤? 우연히 들렀다 알게된 http://www.nomotto.com 라는 nomotto님의 블로그를 알려봅니다. 이유인즉, 저는 너무 좋고 재미난데, 많이 알려지지 않은 것 같아서입니다.

주로 포스트은 nomotto님의 일상의 에피소드들을 센스넘치는 일러스트로 올리시는데, 여느 웹툰보다 재미납니다. 정기간행물이 아니어서 간혹 볼 수 밖에 없단 아쉬움이;;;
저도 매번 들를때마다 댓글은 남기지 못하고(어떻게 보면 nomotto님의 사생활을 훔쳐보기하는 것 같아서...), 실컷 웃고 공감하고는 살짝이 미소를 머금고 나오곤했는데... 달리 생각하면 nomotto님의 에피소드들은 우리네 모두의 유쾌한 모습이기도 한 것 같습니다. ^^ 그래서 더욱 공감가는~

"나는, 세상의 모든 것이 대체로 조금 크게 느껴진다"고 하시는 nomotto님 블로그에 놀러가보시는 건? ^^
블로그 >> http://www.nomotto.com
RSS피드 >> http://www.nomotto.com/rss

아래는 살짝 맛배기 // nomotto님 블로그에 '마트철학'이라는 포스트

아빠와 함께 마트를 다니고,
거리낌 없이 생리대를 고르면서 이런 대화를 나누고
계산대에서 내 지갑을 여는게 당연해지는,
이런 날이 오리라고...

나도 상상한 적 없지만 아버지 역시 그렇겠지.

나란히...

more..

간단한 벚꽃장 후기..

올해도 역시나 난리 벚꽃장이더군요~
매년 진해벚꽃장, 이맘때쯤해서 가출하는 중고등학생이 많다는 말이 있는데, 저도 살포시 콧구멍 바람좀 쐬러 갔습니다... ^^
진해 파크랜드에서 진해여고로 이어지는 여좌천(사진)
사진엔 없지만 사람이 얼마나 많은지... 죄다 사진작가인지 DSLR 하나씩 들고있더라구욤~ ^^

사람 너무 많다는 불만을 토로하던 세바... 여좌천을 따라 내려오다 진해여중 학생들이 하는 연주회를 보자 급방긋~ ^^ 바람이 살랑살랑 불때마다 벚꽃이 날려서 학생들이 들려주는 선율과 어울려 환상적인 분위기였습니다.

경화역으로 이동, 여기도 버글버글 사람들~
간이역이라 역사가 어디있는지... 모르겠더군요~ 암튼, 멀리 기차가 들어와도 사람들 사진찍기 바쁨... 가족단위도 많고...오른쪽 사진처럼 커플들도 많았습니다.

꼭 이런 분들 있어요, 벚꽃을 꺽어서 귀에 꽂고 다니거나 가지를 힘껏 잡아당겨서 사진찍는... 뭐 이런건 자제 좀~ ㅡㅡ;

꽃게찜 먹고, 그 많은 인파를 뒤로하고 우리들만의 한적한 곳으로 고고씽~

벚나무 밑에 앉아서 시간가는 줄 모르고 노가리까다 슬슬 이동하려니 진해시내 주차장으로 탈바꿈... ㅡㅡ;
암튼... 이래저래 겨우 진해를 빠져나옴;;;

나머지 벚꽃사진...

일모리님 블로그 들렀다 CSS Naked Day라는 것을 첨 알게 되었습니다. 재밌는 발상인 듯 하여 저도 참여해보려구요~ 올해는 4월 9일이 그날이라고 합니다. 18대 국회의원 선거가 있는 날이기도 하죠. ^^
자세한 내용은 CSS Naked Day 사이트, 일모리와 웹표준에서 더 읽어 보시기 바랍니다.

CSS Naked Day는 표준이 의도하고 있는 문서와 스타일의 분리를 선전하는 의미에서 시작된 “하룻동안 스타일을 꺼 놓는 날” 입니다. 문서와 스타일이 이렇게 분리될수도 있다는걸 보여주기도 하고 스타일 없이도 문서적인 의미로도 페이지가 작동할 수 있다는것을 보여주게 됩니다. 물론 “전 테이블로 레이아웃이 짜여져 있지 않아요” 라고 외칠수도 있는 의미를 담고 있습니다.

일모리님 글, CSS Naked Day 08 어머나~

CSS Naked Day 사이트에 들러 참여하려고 하단 폼에 기입을 했는데, 참여리스트에 안뜨길래 한번 더 기입했습니다. 몹쓸 영어울렁증땀시 리스트에 이름이 두개 올라가는 부끄러운 상황이~ ㅡㅡ;

How to participate

Fill out the naked day signup form, then your website will be included in the official list within the next hour.
Then on April 9th, simply remove all CSS from your website, stripping it entirely of its design.

제갈선광님의 FotoZone (http://wing91.tistory.com/732)에서 자목련 사진을 보고...

누가 그랬던가요? 잔인한 4월(봄)이라고...
봄을 탄다는 게 이런건가요? 살랑살랑 부는 따스한 기운 또는 어제오늘 다르게 피어나는 연분홍 꽃들을 보며 어딘가 모를 기분이란게... 저번 주만해도 어느순간 활짝 핀 흰목련을 보며 '마치 팝콘같네~'라고 혼잣말을 했는데, 제갈선광님 표현대로 '미인박명'이라고 금새 희고 큰 목련꽃잎이 떨어지더라구요... 봄이란게 살랑살랑 기분 좋다가도 약간의 애수(哀愁)같은 반대이미지도 있는 것 같습니다.

그런 꽃중에 하나가 자목련같아요~ 저만의 이미지로는... ^^
고등학교 들와서 몇번째쯤 되는 음악수업이었습니다. (참고로 음악수업은 저학년때 몇번밖에 하지 않았었죠.) '비목'이란 가곡을 다같이 따라 부르곤 음악샘께서 설명을 해주셨어요~

비목(碑木) - 장일남 작곡, 한명희 작사의 가곡.
1967년에 작곡된 곡으로, 작사가가 6·25전쟁 때 전투가 치열했던 철원 부근에서 군 생활을 하면서, 숱하게 널려 있는 시체들과 이름 없는 비목을 보았던 기억이 되살아나 작사한 것이라 한다. 가사의 고난스런 배경이나, 단조에서 느껴지는 고독 ·우수 등의 감정이 공감을 일으켜서 널리 보급된 가곡이다. 적막에의 두려움과 전쟁의 비참함, 그 때문에 더욱 간절한 향수 등이 서정적으로 잘 표현되어 있다.

출처 :: 네이버 백과사전

아마 위와같은 짧은 설명뒤에 창밖의 핀 자목련을 보시며...

자목련의 색이 왜 저리 슬픈 자주색이냐면 6.25때 사람들이 피를 하도 많이 흘려서 그런거야~
그래서 38선 부근엔 자목련이 많이 핀대~
생각해보렴~ 무명용사의 비목과 비슷한 것이...
언제 전쟁이었냐는 듯 어느덧 계절은 바뀌어, 녹슨 철모 위로 피어오른 자목련을...

정확하게 기억은 못하겠는데, 암튼 비슷하게 말씀하신 것 같아요~ 어찌보면 터무니없이 들릴수도 있지만;; 제가 오래전 일을 이렇게 기억하는 건 그만큼 선생님말씀에 동감했었나봐요~ 그리곤 매년 봄마다 자목련을 볼때면 비슷한 감정을 느끼는 것 같습니다. ^^

비목 가사보기