CSS로 글상자 만들기-[모퉁이가 접힌 박스]

티스토리 블로그의 장점은 내가 사용하는 스킨의 기본 틀 아래 글을 쓸 때 HTML과 CSS를 활용하여 레이아웃을 내 스타일대로 꾸밀 수 있다는 장점이 있습니다. 초반에 블로그를 시작할 때 어떤 블로그를 이용할까 고민하다가 티스토리 블로그를 선택하게 된 이유 중의 하나이기도 합니다.

HTML과 CSS를 잘 몰라도 조금만 검색하여 활용만하면 기존의 것도 내 스타일대로 조금은 바꿀 수 있다는 것입니다.

 

텍스트 상자가 필요한 이유

 

글을 쓸 때 거창하게 소설처럼 쓰지 않더라도 서론 본론 결론으로 나누어 쓰게 되는데 보통 [텍스트 상자가 필요한 이유] 처럼 서식을 활용한 소제목을 쓰게 됩니다. 그러나 소제목안의 글 내용도 분류하는 경우가 있는데 그럴 때 단순히 숫자 1. 2. 3. 이라던가 a. b. c. 처럼 뭔가 단순하게 하는 것보다는 그래도 글상자를 활용하게 되면 덜 밋밋하게 됩니다.

 

텍스트 박스를 활용한 예제입니다.

 

소스와 이용방법

 

우선 html의 소스는 다음과 같습니다.  우선 아래의 첨부파일을 받으시면 됩니다. 내용을 복사하여 블로그관리-서식쓰기-서식으로 저장하시면 되는데, 소스를 서식으로 저장할 때는 글쓰기 모드를 html로 변환시켜 저장하셔야 합니다.

 

<div class="note1">
<p>여기다 글을 쓰세요</p>
</div>

박스소스html.txt

0.00MB

다음은 css의 소스입니다. 역시 첨부된 파일을 별도로 받으시면 됩니다. 소스의 내용을 복사하여 블로그관리-html편집-CSS탭에 빈 공간을 확보하여 입력-저장하시면 됩니다.  CSS내용 중 @font-face } 밑에 빈 공간에 입력하셔야 하는데, 만약 @font-face가 없으면 최상단 내용 중 @charset "utf-8"; 보다 밑에 빈 공간 {   } 부분을 피하고 입력하셔야 합니다.

 

.note1 {         //note1이란 이름을 변경하셔도 됩니다.
    position:relative;
    background:#B2CCFF;
    width:300px;
    max-width: 100%;
    text-align: center;
    padding: 12px;
    color:black;
    }

.note1:before {  //note1부분도 동일한 이름으로 변경하셔야 합니다.
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 16px 16px 0; 
    border-style:solid;
    border-color: #FFFFFF #FFFFFF #0054FF #0054FF; 
    background: #0054FF; 
    display:block; width:0;   
}

박스소스css.txt

0.00MB

TIP

 

 

css에서 note1부분의 이름을 변경하실 때 html의 div class=" "안의 부분도 동일한 이름으로 변경하셔야 소스를 호출할 수 있습니다.

 

[ 소스 내용 - note 1]

 background : 박스 배경색인데 html 색상표로 변경 가능합니다.

 widht : 박스 가로사이즈이며 숫자 부분을 변경 가능합니다.

 text-align : 글씨의 배열인데, left(왼쪽정렬)/right(오른쪽정렬)/justify(양쪽정렬) 입니다.

 color : 글씨 색입니다. blue/red 등으로 변경 가능합니다.

 

 [소스 내용 - note 1:before]

 border-color : 박스의 접힌 부분인데, #FFFFFF는 블로그 배경이 흰색이라 변경 안하셔도 됩니다.

     #0054FF(background와 함께) 박스 접힌 부분의 색인데, 변경 가능합니다.

 

활용 예제

 

먼저 블로그 관리자모드-스킨편집-html편집-css탭으로 이동하셔서 빈 공간을 확보하시면 됩니다.

 

빈 공간을 확보 후 css 소스를 입력 후 확인을 누르시면 됩니다.

 

새로운 글쓰기로 들어가신 후 - html모드로 변환하여 html 소스를 입력 후 글 쓰는 부분에 원하는 문구를 입력하신 후 완료를 누르시면 됩니다.

 

소스 입력 후의 화면

 

사용하시는 스킨과 폰트에 따라 달라보일 수가 있으며, 반응형으로 만들어져서 디바이스 화면에 따라 사이즈가 달라 보일 수 있습니다.