'꾸미기'에 해당되는 글 1건

  1. 2008.02.28 CSS로 강조점 찍기
2008.02.28 17:42

사실은 작년 3월에 이 블로그 처음 만들 때 생각했던 방법입니다. MS 워드를 보면 특정 문자 위에 강조점(혹은 뭐 방점?)을 찍어서 꾸미기 할 수가 있는데요, 그것을 웹으로 옮겨보자는 착상이었습니다(워드에서 강조점을 찍은 후, html 형식으로 저장하면 강조점은 밑줄로 대체됩니다).

MS 워드에서 강조점을 찍은 예

MS 워드에서 강조점을 찍은 예


처음에 생각한 방법은 어떻게든 구두점(.)을 텍스트 위로 출력되게 하는 방법이었지만, 이는 실패했습니다. 그래서 어쩔 수 없이 강조점의 이미지(gif 파일)를 만들고 그것을 CSS로 배경으로 출력해봤습니다. 지금까지 포스팅하며 강조점을 사용한 경우가 몇 번 있었는데, 가령 다음 포스트에서와 같은 식입니다.

예전 포스트에서 강조점을 사용한 예

예전 포스트에서 강조점을 사용한 예


뭐, 워드보다는 별로 보기 안 좋은 듯하죠-_-; 이건 강조점의 이미지 파일을 예쁘게(-_-?) 만들면 충분히 개선가능한 부분입니다. 실제로 CSS를 사용해서 출력하면 다음과 같습니다.

강조부 글꼴크기 16px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.
강조부 글꼴크기 15px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.

이런 저의 방법에는 커다란 제약이 몇 가지 있습니다. 글꼴크기에 px 단위를 사용한다는 점, 제한된 글꼴크기에밖에 사용할 수 없다는 점, 고정폭 글꼴에만 사용할 수 있다는 점, 한글과 영문이 섞인 부분에는 사용할 수 없다는 점 등등등-_-입니다. 근 1년 동안 아주 가끔씩-_- 고심했지만 결국 해결하지 못한 채 포스팅합니다. CSS를 더 잘하는 분들이 개선해주지 않을까 하는 희망에서입니다-_-;; 다음은 CSS 코드.

.highlight {
font-family:바탕체,batangche; font-size:16px; font-weight:800; letter-spacing:1px; padding-top:6px; line-height:175%; background-image:url(./images/highlight18.gif); background-repeat:repeat-x; }

.highlight_small {
font-family:바탕체,batangche; font-size:15px; font-weight:500; letter-spacing:0px; padding-top:6px; line-height:175%; background-image:url(./images/highlight16.gif); background-repeat:repeat-x; }

여기서 바꿀 수 있는 것은 바탕체 대신 굴림체 등의 고정폭 글꼴을 사용할 수 있다는 정도입니다. 이미지 폭과 letter-spacing 및 font-weight를 변경해가면서 실험을 해보면 다른 글꼴크기에서도 사용할 수 있을 것입니다.

사용한 이미지는 다음 두 가지. 크기를 줄이기 위해 4컬러 팔레트로 저장했습니다. 두 이미지 폭이 다르다는 점에 유의해주세요. 또한 혹시 모를 상황을 위해 이미지 높이는 넉넉하게 잡았습니다.

highlight18.gif - highlight 이미지(18*64)

highlight18.gif - highlight 이미지(18*64)

highlight16.gif - highlight_small 이미지(16*64)

highlight16.gif - highlight_small 이미지(16*64)


혹시나 해서... 티스토리에서 적용하는 방법


앞으로 개선할 여지가 많지만 어떻게 해야할지 가닥이 잘 안 잡히네요. 고수분들의 지도편달 부탁드립니다-_-;


Posted by 필유