블로그 서식 꾸미기 #1 (동영상)

블로그 서식을 이쁘게 꾸미는 방법에 대해서 간단한 예제 및 동영상으로 설명을 할까 합니다. 가능한 쉽게 동영상을 만들었으니 한번 봐주세요.

서식을 미리 만들어놓고 쓴다면 글을 쓸때 서식을 사용하여 블로그에 한층 통일감있는 글을 쓸 수 있습니다. 어떨때는 이렇게 어떨때는 저렇게 박스를 항상 다르게 넣는것보다는 통일감있게 자신의 블로그와 어울리게 미리 만들어둔 서식을 쓰는게 좋겠죠.

천천히 읽어주시고 마스터 하신다면 블로그의 느낌을 한층 UP↑ 하실 수 있을 겁니다.

# 제가 미리 만들어둔 서식을 보여드리겠습니다.

프로그램 다운로드에 활용하는 서식입니다. 이렇게 통일된 서식을 준다면 다운로드 글을 쓸때 편리하겠죠.

프로그램 코드등을 적을때 사용하는 서식입니다. 최근에 만들었네요. 글을 쓰면 오른쪽 상단에 Source Code 라는 그림 글자가 나타나게 해놓았습니다.






# 동영상 서식(예제)을 만들어보겠습니다.  동영상은 아래에서 확인해주세요

블로그 글쓰기에서 자신이 사용하고 싶은 박스를 그립니다.

동영상을 올릴때 검은박스를 먼저 만들고 박스안에 동영상을 넣은 상태입니다. 오른쪽 부분이 조금 허전하죠.
꼭 검은 박스일 필요는 없습니다. 위에도 말했든 활용은 여러분의 몫

저부분에 들어갈 그림을 먼저 그립니다. 포토샵을 활용하여 그림이나 , 글자 여러분이 꾸미고 싶은대로 꾸밉니다.
이제 만든 그림을 해당 서식에 업로드를 합니다. 그런뒤 그림을 임의의 공간에 먼저 올린뒤 저장 후 글 보기에서 그 그림의
절대 주소를 가져옵니다.

다시 서식 편집을 한 뒤, HTML 편집으로 들어가면 위와 같이 나옵니다.
class="txc-textbox" 는 기본값입니다. 이것을 다른것과 섞이지 않게 이름을 바꾸어줍니다.

calss="txc-textbox-movie" 로 바꾸겠습니다.

그 하단 부분에 위와 같은 코드를 입력해 넣습니다. 배경으로쓸그림주소 부분은 배경부분에 넣을 그림의 주소를 복사해둔 부분을 복사해서 넣습니다.

no-repeat : 배경 반복하지 않음
right top : 위치 오른쪽 상단
color : 글 색

서식을 저장하면 마무리가 되며 다음글을 쓸때 서식을 불러와서 항상 일정한 미리 꾸며진 멋진 서식을 사용할 수 있습니다.


# 동영상 설명

동영상으로 설명을 모두 만들어보았습니다. 동영상은 어디까지나 쉬운 예제이며, 활용은 여러분의 몫입니다.
다양하게 활용하고 서식도 공유하면 좋겠습니다.

# 서식 공유

class 의 이름은 일치를 시켜주셔야 사용이 가능합니다.

<!-- 동영상 서식 -->
<style type="text/css">
    .txc-textbox-movie{
    background: url(https://t1.daumcdn.net/cfile/tistory/207F53204A87D71F15) no-repeat right top;   
    color: rgb(232, 232, 232);
}
</style>




<!-- 코드 서식 -->
<style type="text/css">
.txc-textbox_code{
background: url(https://t1.daumcdn.net/cfile/tistory/182C97114A8420D924) no-repeat right top;
color: rgb(232, 232, 232);
}
</style>

// 추가
사실 <style> 은 본문에 지정하는것보다는 블로그 스킨에다가 지정하는게 좋겠지만, 항상 쓰는 부분이 아니고 스킨변경을 하면 다시 넣어줘야하는 번거로움이 있을 수 도 있어서 글쓰기에서 해결하는 방법을 올린것입니다. 그리고 궁금하신점이나 지적해주고 싶은 부분이 있다면 댓글이나 Q/A 를 이용해서 댓글 부탁드립니다.