태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

서식작성(HTML, CSS)

블로그운영/tistory|2014.03.12 12:18

서식이란?

문서나 서류따위를 꾸미는 일정한 양식을 말하는데, 서식을 먼저 만들어 놓고 후 글을 작성할때 가져다 사용하면, 반복적인 작업을 간편하게 할 수도 있고 여러가지 장점이 있다. "http://blog.uthline.net/category/영어학습/영자신문" 영자신문 리뷰시 단어의 뜻을 적을때 서식을 활용하고 있다. 이것을 어떻게 만들었는지를 예를 들어 서식을 활용하는 법을 적어 보겠다.

서식작성

먼저 서식을 만든다. 글쓰기를 선택하면 아래와 같이 글의 종류를 선택할 수 있다.

여기서 서식을 선택하고 글을 작성하면 서식이 만들어진다. 이때 글의 제목이 서식의 제목이 된다. 어떤 종류의 서식인지를 제목만으로 알수 있도록 제목을 정하는 것이 좋다. 간단하다. 편집기를 사용해서 작성하여도 상관없지만, HTML으로 작성하는 것이 후에 활용도가 높아진다. 예로 작성한 HTML이다.

HTML의 내용을 보면 3가지 class를 사용한 것이 보일 것이다. 이후 css에서 이 class별로 다른 style을 적용할 것이다. 서식작성시 style을 입히지 않고 class만 정해주게 되면 또 여러가지 장점이 생긴다. 가장 큰것이 모든 글에 한방에 style을 변경하는 것이 가능하다는 것이다. 일일이 글마다 돌아다니면서 style을 변경해줄 필요가 없다. 글씨크기, 색깔, 위치, 등등을 한방에 바꿀 수 있는 것이다.

CSS수정

위에서 입력한 3가지 class에 CSS를 입혀보자. 이는 "관리자->HTML/CSS"에서 가능하다. 

style.css의 textarea에 아래의 css를 입력하자.


서식사용하기

이제 서식을 활용해보자. 글쓰기선택. 아래 그림의 오른쪽 아래부분에 보면 서식이라는 항목이 보일 것이다. 이곳을 클릭하면 방금전 만든 서식이 보일 것이다. 해당 서식을 클릭하면 이전에 만들어 놨던 양식이 글에 추가가된다. 이때는 css는 편집모드에서는 적용되어 보이지 않을 수도 있다. 미리보기를 하여 확인하면 된다.


서식을 적용한 예

아래가 영자신문 게시판에서 실제 사용하고 있는 서식이다.

  • 인내, 불굴의 의지, 끈기 



댓글()