포스트의 첫글자 크게쓰기(두문자-Dropcap 적용하기)

잡지를 보거나 잘 편집된 책을 보면 첫글자를 크게 쓰는 디자인을 볼 수 있습니다. 요새는 편집 디자인도 많이 발전하여 새롭고 멋진 디자인들이 많지만 옛날 잡지들에는 대부분 이 디자인이 적용되었던것 같습니다. 한글로는 두문자라고 하고 영어로는 dropcap이라고 부릅니다.

성경도 이런식으로 편집되어 있는 경우가 많죠. 사실 한번 써놓고 바뀌지 않는 글이나 사이트에서는 그림으로 만들어서 넣어도 되고 워드프레스에서도 shortcode로 한글자만 만들어서 넣을 수도 있는데 매번 글을 쓸때마다 이걸 임의로 입력하는건 영 불편한 일이 아닐 수 없습니다. 따라서 이 포스트에서는 글을 쓰면 자동으로 첫번째 글자를 dropcap으로 만들어주는 방법을 고민 해보고 이것을 LIFE Hacking에 적용해보도록 하겠습니다.

먼저 CSS로 첫글자만 크게하는걸 어떻게 만들 수 있을지 알아봐야겠습니다. 웹문서에 스타일링을 할때  CSS를 쓰는건 기본이거니와 특히 워드프레스같은경우 컨텐츠의 html에 직접 style을 코딩하는게 훨씬 어렵습니다.^^

링크에 가보면 CSS의 selector에 대해서 정리가 되어 있습니다.

selector라는건 말 그대로 스타일링을 적용한 element를 선택하는건데, 저는 보통 #, .등 id나 class로만 선택을 하고 많이 사용한다고 해봤자 :active, :after, :before정도 였습니다. 하지만 이번에 찾아보다보니 selector의 종류가 엄청 많더군요. 각각의 selector를 보면 DOM구조를 최대한 잘 찾아가기위한 내용으로 만들어져 있습니다. 그래도 그렇게 친절하지는 않으니 본인이 원하는 것들을 잘 조합해서 사용해야  합니다. 우리가 사용할 것으로는 ‘::first-letter’와 ‘+’입니다.

+는 바로 다음 element를 선택하는것이고 ::first-letter는 element안에 있는 첫번째 글자를 선택하는 것입니다. 적용해 가면서 좀 더 자세히 봅시다.

먼저 적용을 원하는 사이트에 크롬으로 접속을 합니다. 적용을 원하는 위치에 커서를 놓고 오른쪽 버튼을 누르면 확장 메뉴가 나옵니다. 여기서 제일 하단에 보이는 “요소 검사(N)”을 선택합니다.

그러면 하단에 창이 열리는데 현재 파란색으로 하이라이트 된 부분이 커서가 위치한 부분의 코드이고 오른쪽에 작게 열리는 “style” 탭이 해당 위치에 적용된 css들이 나열된 곳입니다.

그럼 현재 화면에 보이는 코드며 스타일을 수정할 수 있을까요? 당연합니다. 브라우져는 서버에서 받아오는 정보를 파싱하여 사용자가 잘 볼 수 있도록 해주는게 본래의 역할이므로 우리는 여기에서 브라우져에서 이부분은 이렇게 보여줄래? 라고 요청할 수 있는거죠. 즉 우리는 브라우져를 통해 코드를 바꿔보고 눈에 이렇게 보이겠구나..라고 짐작한 다음에 실제 서버에 올라가 있는 코드에 이 부분을 적용하게 되는거죠. 그래서 개발 도구라고 부르는겁니다.

수정은 간단합니다. 원하는 위치의 코드에 가서 더블클릭을 하면 수정할 수 있습니다. 아. 우리는 수정할것이 아니라 사실 “추가”를 해야 하는거죠? 그것도 간단합니다. 지금 해당 위치가 선택되어 있죠? 오른쪽으로 가서 재가 빨갛게 동그라미로 쳐놓은 +모양을 클릭해 봅니다.

그러면 항목이 하나 생기게 됩니다. 지금 선택된 태그가 <p>라서 css에 p가 추가되게 되는거죠. 사실 여기에서 괄호에 원하는 속성을 넣어서 테스트해보는게 일반적인데 지금 추가하려고하는 css들은 pseudo class라서 그런지 화면에 제대로 적용되지 않는 경우가 많더라구요. 상단에 보이는 “inspector-stylesheet:1″을 클릭해 봅니다.

Sources탭이 선택되면서 조그마한 창이 열리는데 여기에서는 pseudo class라도 제대로 적용되는 결과가 보입니다.

테스트를 해봅시다. 덩그러니 p {} 만 있던 곳에 제대로 동작을 하는지 한번 입력 해 보세요.

잘 동작하는것 같습니다. 그럼 이제 진짜 원하는 css를 입력해야 합니다. 코드를 살펴 봐야죠.

현재 원하는건 첫번쨰 문단의 첫번째 글자 입니다. 포스트의 내용은 entry class에 속해 있고 그 안에 entry-inner class. 저는 flare라는 SNS 플러그인을 사용하고 있어서 어떤 내용이 작성 되든지 flare의 div가 먼저 나온 뒤에 내용이 나오게 됩니다. 그럼 간단하군요. entry-inner class안에 div바로 다음에 나오는 p 태그의 첫번째 글자를 선택하면 됩니다.!!

” .entry-inner” class 선택자는 ‘.’이라서 .entry-inner를 선택.
” .entry-inner div”  그 안에 있는 div를 선택.
” .entry-inner div+p” 그 바로 다음에 오는 p를 선택
” .entry-inner div+p::first-letter” 마지막으로 p태그안의 첫번째 글자를 선택

그리고 원하는 스타일을 테스트 해 본다음 위 css를 현재 페이지가 로드될 때 불리는 css파일에 적어주면 끝입니다.

하지만 이렇게 적용하더라도 글 제일 처음 이미지를 넣게 되면 이 css는 동작하지 않습니다. 또한 보통 글을 쓸 때 제일 처음 나오는 이미지는 글의 내용을 대표하는 이미지를 넣는 경우가 많지요. 워드 프레스 같은경우 다행히도 이런 이미지를 특성이미지(featured image)라고 하여 api가 만들어져 있습니다. 결국 글을 쓸 때 항상 처음은 그림이 아닌 글로 시작해야 한다는것만 기억한다면 이런 경우는 특성 이미지로 해결 가능합니다. 위에서 작업 했던 것은 그대로 두고 코드 상으로 제일 위에 특성 이미지를 뿌려주는 것이지요.

테마의 single.php를 열고 아래 코드 를 찾아 갑니다.

그 위에 이미지를 보여주는 부분을 추가합니다.

이렇게 말이죠.

이상 최종 결과물은 본 페이지와 같습니다. 끝~