HTML로 네이버 카페 글 예쁘게 작성하기

들어가며

한국에서 확고한 닫힌 커뮤니티 위치를 점한 네이버 카페. 수많은 모임과 동호회, 사업체등이 네이버 카페에 둥지를 틀었다. 예전 PC 통신 시대의 레이아웃을 가져와 한국인에게 친숙하고, 서버도 한국에 있어 매우 쾌적한 속도를 자랑한다. 그런 네이버 카페에서 소통하려면 게시판에 글을 써야 하는데, 이 게시판에는 다음과 같은 특징이 있다.

1. HTML 일부'만' 지원
2. CSS 미지원

CSS 보충 설명

2번 CSS에 대해 설명하기 위해 다음과 같은 상황을 가정해 보자.

난 게시글의 모든 글자를 크기 15, 굵게, 빨간색, 밑줄을 원한다.

CSS가 없다면,

(첫 번째 문단) → 설정: 글자 크기 15, 굵게, 빨간색, 밑줄
(두 번째 문단) → 설정: 글자 크기 15, 굵게, 빨간색, 밑줄
(세 번째 문단) → 설정: 글자 크기 15, 굵게, 빨간색, 밑줄
.
.
.

이렇게 처음부터 끝까지 문단마다 귀찮게 HTML로 태그를 지정해 줘야 한다. 당연히 엄청나게 번거롭고 코드도 예쁘게 뽑히지 않는다.

이때 CSS를 활용하면,

CSS 선언: 이 글의 모든 글자는 크기 15, 굵게, 빨간색, 밑줄으로 한다 땅땅땅!

이렇게 따로 선언해두고,

(첫 번째 문단)
(두 번째 문단)
(세 번째 문단)
.
.
.
내용만 작성하면 된다. 무척 간편하다.

이러한 CSS는 티스토리를 포함, 대부분 개인 홈페이지가 지원하는 기능이다. 그러나 폐쇄적인 네이버 카페는 어림도 없다. 뿐만 아니라 네이버 카페는 일부 HTML도 지원하지 않는다. 예를 들어 자바스크립트 들어가는 HTML은 하나도 쓸 수 없다.

이런 안타까운 상황에서도, HTML 활용하여 최대한 글을 예쁘게 작성하는 방법을 알아보자. 한 가지 유의할 것은 신기하게 PC에서, 모바일에서 그리고 카페 앱에서 똑같은 글이라도 미세하게 다르게 보인다는 점이다. 그래서 세 곳 모두 통용되는 HTML만 설명한다.

카페 → 글쓰기 → 우측부분의 HTML 상자를 체크하면 HTML로 글을 작성할 수 있다.

1. 제일 먼저 할 것. 글자 크기 / 줄간격 / 서체 설정

게시글의 제일 처음과 끝에 다음 HTML을 적는다.

<div style="line-height: 2.5em; font-family: 'Nanum Gothic'; font-size: 15.5px;">

본문 내용

</div>

div 태그는 공간또는 구역을 선언한다는 뜻인데, 본문 전체를 div로 둘러싸 줄간격 2.5, 서체 나눔 고딕, 글자 크기 15.5로 잡아둔다. 줄 간격을 늘려 가독성 향상, 서체는 무난한 나눔 고딕 선택, 글자 크기는 15.5로 맞춘다. 여러 번 시험 결과 15.5px이 PC, 모바일, 앱 모두 시원하게 보이는 적절한 크기였다.

2. 소제목 꾸미기

단순히 글자 크기를 키우고 굵게해 소제목을 강조해도 좋지만, 선을 이용하면 더 예쁘게 꾸밀 수 있다.

<div style="border-bottom: solid 1px #a9a9a9; border-left: solid 7px #84C55E; padding:0px 0px 0px 4px ; margin:50px 0px 20px 0px; font-size: 18px; font-family: 'Nanum Gothic';">

<p><strong>소제목</strong></p>

</div>

소제목의 왼쪽과 아랫부분을, 선을 사용해 맵시를 살린다.

3. 인용구 강조하기

인용구 blockquote를 사용하여 밋밋한 본문에 강조 효과를 더한다.

<blockquote>

<div style="border-left: 5px solid #ddd; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); background-color: #fff5ee; margin-left: -30px; padding: 15px; ">

<p>인용구</p>

</div>

</blockquote>

이상이다. 이렇게 작성된 글을 보려면 이곳 참고. 그리고 처음부터 HTML로 글을 작성하면 당연히 토나오니, 적당히 마크다운을 사용하여 깔끔하게 밑바탕부터 짜자. 이후 팝클립 등의 보조 앱을 사용해 간편하게 HTML로 변환하면 된다.