오늘 블로그로 생쑈를 하다가 타이레놀을 두 알이나 먹었다. 시작은 물론 강박증으로부터. 이 놈의 이글루스는 양쪽 정렬을 지원하지 않는 탓에 글을 꽉꽉 채워 쓰고 나면 끝부분이 보기 안좋다. 물론 html로 다듬으면 되긴 하지만 매번 포스팅할 때마다 그 짓 하는 것도 보통 귀찮은 게 아닌 거라, 그래 아예 css를 건드려서 맘 편하게 써보자는 쪽으로 마음을 굳혔다. 이리 뒤지고 저리 뒤져 연구한 끝에 text-align 값을 justify로 바꾸고 적용을 하는데 반영이 안돼! 대체 왜! 수 차례 시도해보다가 안되는 것 같아 애꿎은 헤더 이미지랑 블로그 타이틀만 바꾸고 양쪽 정렬은 포기하려고 했는데, 너무 분해서 낮잠이 안오는 거다. 왜, 대체 왜 안되는거냐고. 이 열정으로 공부를 했으면 서울대도 갔을 정신으로 다시 zum을 뒤지고 또 뒤진 끝에 웅이님이 포스팅한 내용에서 해답을 찾을 수가 있었다. 이글루스가 기본 제공하는 스킨과 스킨 마법사로 제작한 스킨은 명령 내용이 약간 달랐던 것. 정말 이 분에게 큰 절이라도 올리고 싶은 심정이다. 농담 아니다. 혹시 웅이님 이 글 보시고 이메일 주시면 답장으로 절 하는 셀카 찍어서 보내드리겠습니다. 감사합니다. 아래는 내가 찾던 내용 전문.
woongyee.egloos.com/1936990
css 창을 열어 놓고 잘 찾아 보시면 .post_content { overflow:hidden;_word-break:break-all;}이 있습니다. 여기를 수정하면 됩니다. 저는
.post_content {
overflow:hidden;_word-break:break-all;
font:normal 1.1em/1.6em '나눔고딕','맑은고딕','돋움',sans-serif;
text-align:justify;
color:#000;
}
이렇게 수정했습니다. 세부 내용을 알아 볼까요.
font:normal 1.1em/1.6em '나눔고딕','맑은고딕','돋움',sans-serif;
이것은 글꼴과 문단 간격을 정하는 거예요.
normal : 정상 글꼴로, 즉 진하게나 이탤릭체로 하지 않고 보통 보이는 글꼴로
1.1em/1.6em : 앞에 1.1em은 .body에서 설정한 기본 글꼴 크기의 1.1배로, 뒤 1.6em은 문단 간격을 1.6배로 하라는 말이에요. 아래아 한글에서 문단 간격 160% 명령과 같은 거예요. 여기서 em대신에 글꼴은 px을, 문단은 %를 써도 됩니다.
'나눔고딕','맑은고딕','돋움',sans-serif; : 화면에 보이기 원하는 서체를 우선 순위에 따라 써 준 거예요.
문단 정렬은 text-align을 써야 하는데요. 저는 다음처럼 양끝 정렬을 했습니다.
text-align:justify; : 문단 정렬인데요. justify는 양끝 정렬을 뜻해요.
글자색은 color로 조정합니다.
color:#000; : 글자색인데요, #000은 검정색을 뜻해요.
하지만 스킨 마법사로 만든 스킨은 .post_content{} 가 /*---------- 세부 스타일 설정 ----------*/에 있긴 한데 여기를 수정해도 효과가 나타나지 않습니다. /*--- 콘텐츠 영역 ---*/에
.post_view .post_content {}
를 추가하고 {} 안에 위에서 말한 것처럼 수정해 줘야 해요. 저는
/*--- 콘텐츠 영역 ---*/
.content a:link {color:#de87b5;text-decoration:none;}
.content a:visited {color:#8f5c30;text-decoration:none;}
.content a:hover,
.content a:active {color:#8f5c30;text-decoration:underline;}
.post_view .post_content {
font:normal 1.1em/1.6em '나눔고딕','돋움',sans-serif;
text-align:justify;
color:#000;
}
.post_view .post_title h2 {
font:bold 15px '돋움',sans-serif;
letter-spacing:-1px;
border-bottom:1px solid #8f5c30;
}
.post_view .post_title h2 a:link, ..
(이하 생략)
처럼 추가했습니다.
덧글
저 같은 경우엔 아예 할만한 재주가 없으면 포기하는데 조금이라도 여지 남아 있으면 하려고 붙잡고 늘어져서 머리가 아프죠.. -_-;; 해결했다니 정말 축하드려요.