블로그 스팟 꾸미기 글상자 만들기. css 수정을 통한 박스 디자인 소개

블로그 스팟을 이용해 블로그를 운영하면서 밋밋한 페이지를 세련되게 꾸며줄 수 있는 글상자 만들기로 블로그에 적용하는 방법을 소개해 드립니다. 다양한 세련된 박스 디자인을 블로그에서 사용해 예쁘게 꾸밀 수 있습니다.

글 상자를 블로그 스팟에 적용하기

블로그 스팟에서 사용할 수 있는 글 상자를 소개해 드리겠습니다. 밋밋하던 블로그를 세련된 박스 디자인으로 블로그를 예쁘게 꾸밀 수 있습니다.

글 상자나 박스를 이용하면 중요한 내용을 강조하는 효과를 가질 수 있습니다.

블로그 스팟에 글 상자 넣는 방법

블로그 스팟에 글 상자를 적용해 블로그를 꾸미는 방법입니다. 글 상자를 블로그에 표현하기 위해서는 html을 손대야 하므로 먼저 백업을 진행해 주십시오.

css 복사

아래에 소개하는 글 상자 디자인 중 마음에 드는 것이 있으면 CSS를 복사합니다. 이것을 블로그나 웹사이트의 CSS에 붙여넣어 주시면 됩니다.

css 추가하는 방법

브로그 스팟에서 css를 추가하는 방법입니다.

블로그 스팟 메뉴
테마
html 편집
ctrl + F를 눌러 </b:template-skin> 찾기
]]> 위에 /*** 글 상자 ***/ 입력 후 엔터
복사한 css 코드 붙여넣기
저장

삽입 하려는 부분에 html 붙여 넣기

포스팅 내용 중 글 상자를 삽입하려는 부분에 html 태그를 붙여 넣으면 글 상자를 표시 할 수 있습니다. html 보기로 들어가 태그를 붙여 넣으신 다음 새 글 작성 모드로 돌아 오셔서 수정하시면 됩니다.

새 글 작성 모드에서는 글 상자가 표시가 되지 않기 때문에 미리 보기를 눌러 제대로 적용 되었는지 확인 하시면 됩니다.

html 코드 넣는 예

글 상자를 넣기 위해서는 적용할 장소에 “ㅁ”이나 다른 문자를 이용해 표시를 한 다음 “html 코드 보기”로 들어가 표시해 놓은 문자를 찾은 후 html 코드를 붙여 넣어 주세요. “ㅁ”으로 표시 했다면 <p>ㅁ</p> 이곳을 찾아 “ㅁ</p> 뒤에 html 코드 붙여 넣기 하시고 새 글 작성 보기로 오셔서 ‘ㅁ”은 지워 주고 그 위에 내용을 작성하면 됩니다.”

네모 글 상자 디자인 샘플

네모 박스 형태의 글 상자 입니다. 중요하게 표시해야할 글을 네모 칸 안에 넣어 부각 시킬 수 있습니다. 마음에 드는 글 상자 디자인이 있다면 블로그 스팟에 css를 넣고 html 코드를 이용해 블로그를 꾸며보십시오.

선으로 둘러 쌓인 글 상자

굵은 선으로 만들어진 글 상자 입니다. 심플한 흑백 디자인에 잘 어울릴 것 같습니다.

html

<div class="box1"> <p>내용</p> </div>

css 코드

/*선으로 둘러 쌓인 글 상자*/
.box1 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border: solid 3px #000000; } .box1 p { margin: 0; padding: 0; }

둥근 글상자

색을 바꾸고 모서리를 둥글게 해 보았습니다. 문자색이나 선색, 모퉁이의 둥근 형태는 필요에 따라서 바꿀 수 있습니다.

html

<div class="box2"> <p>내용</p> </div>

css 코드

/*둥근 글 상자*/
.box2 { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; 
color: #6091d3;/*글자색*/ 
background: #FFF; border: solid 3px #6091d3;/*선*/ 
border-radius: 10px;/*둥글기*/ }
.box2 p { margin: 0; padding: 0; }

푸른색 선 없는 글상자

선은 사용하지 않고 배경색 글상자

html 코드

<div class="box3"> <p>내용</p> </div>

css 코드

/*푸른색 선 없는 글상자*/
.box3 { padding: 0.5em 1em; margin: 2em 0; color: #2c2c2f; background: #cde4ff;/*배경색*/ } .box3 p { margin: 0; padding: 0; }

아래위 굵은 선 글상자

아래 위 굵은 선과 배경색이 있는 글 상자

html

<div class="box4"> <p>내용</p> </div>

html 코드

/*아래위 굵은 선 글 상자*/
.box4{ padding: 8px 19px; margin: 2em 0; color: #2c2c2f; background: #cde4ff; border-top: solid 5px #5989cf; border-bottom: solid 5px #5989cf; } .box4 p { margin: 0; padding: 0; }

두선 테두리 글 상자

두선 테투리의 글 상자 입니다.

thml

<div class="box5"> <p>내용</p> </div>

css 코드

/*두선 테두리 글 상자*/
.box5 { padding: 0.5em 1em; margin: 2em 0; border: double 5px #4ec4d3; } .box5 p { margin: 0; padding: 0; }

점선 테두리 글 상자

점선 테두리 글 상자 입니다.

html

<div class="box6"> <p>내용</p> </div>

css 코드

/*점선 테두리 글 상자*/
.box6 { padding: 0.5em 1em; margin: 2em 0; background: #f0f7ff; border: dashed 2px #5b8bd0;/*점선*/ } .box6 p { margin: 0; padding: 0; }

메모 스타일 글 상자

메모 스타일의 글 상자입니다.

html

<div class="box7"> <p>내용</p> </div>

css 코드

/*메모 스타일 글 상자*/
.box7 { padding: 0.5em 1em; margin: 2em 0; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e; } .box7 p { margin: 0; padding: 0; }

타이틀 글상자

중요한 타이틀을 표시할 수 있는 글 상자

html

<div class="box8"> <span class="box-title">제목</span>
<p>내용</p> </div>

css 코드

/*타이틀 글 상자*/
.box8 { position: relative; margin: 2em 0; padding: 0.5em 1em; border: solid 3px #62c1ce; } .box8 .box-title { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; } .box8 p { margin: 0; padding: 0; }