네이버 스마트에디터 풍부한 스타일을 사용하려면

앞으로 네이버 스마트에디터(이하 SE)를 계속 쓰게 될 것 같아 팁을 적어놓을 겸 해서 카테고리를 아예 하나 만들었다.

게시판에 붙여서 쓰다보니 글을 작성할 때는 인용문구나 여러 가지 효과가 잘 적용이 되는데, 작성한 뒤에 게시글을 보면 그 효과가 나타나지 않아 생각해 보니 역시 스타일시트가 제대로 적용되지 않아서였다.

SE가  제공하는 스타일시트는 2가지가 있는데 말 그대로 기본적인 스타일시트를 적용하는 default.css와 다른 하나는 style.css다. (모두 하위 css 폴더에 저장이 되어 있다.)

style.css 를 열어보면 아니나 다를까 .smartOutput이라는 클래스가 정의되어 있고, 친절히 주석까지 붙어 있었는데 그걸 못봤네...

.smartOutput{ font-size:12px; line-height:1.6; font-family:Dotum, AppleGothic, Sans-serif;}

위에 보다시피 맥의 기본한글 폰트인 애플고딕까지 정의가 되어 있어 타 OS도 배려를 한것으로 보인다.

어쨌거나, 게시판에서 글 작성 후 읽는 페이지에서 위의 클래스를 넣어주면 에디터에서 작성한 그대로 보여진다.

 
...




  

     
DB에서 읽어들인 게시물 내용이 들어가는 곳
  

위는 적용 예이다.