html 이용해서 기본적인 글 상자 만들기

이런 글 상자를 만드는게 목표 

 

색깔도 바꿀 수 있고 

 

점선 테두리도 가능하다 

 

모두 html을 이용해서 만들 수 있다 

 

 

서식 만들기 

1. 블로그 관리 - 콘텐츠 - 서식 관리 탭에 들어간다 

2. 서식을 새로 만들기 위해 '서식 쓰기' 버튼을 클릭한다 

 

 

3. '기본 모드'로 설정되어 있을 텐데 'HTML'로 바꾼다 

 

 

4. 원하는 html 태그를 붙여 넣는다 (아래 예시 중 하나만)

 

 

가장 기본적인 글상자 예시들 

<div class="txc-textbox" style="background-color: #dbe8fb; border: #79a5e4 1px solid; padding: 10px;">
<p data-ke-size="size16">파란색 </p>
</div>

 

<div class="txc-textbox" style="background-color: #eeeeee; border: #c1c1c1 1px solid; padding: 10px;">
<p data-ke-size="size16">회색 </p>
</div>

 

<div class="txc-textbox" style="background-color: #fedec7; border: #fe8943 1px solid; padding: 10px;">
<p data-ke-size="size16">빨간색 </p>
</div>

 

<div class="txc-textbox" style="background-color: #e7fdb5; border: #9fd331 1px solid; padding: 10px;">
<p data-ke-size="size16">녹색</p>
</div>

 

 

5. 그리고 나서 기본 모드로 바꾸고 나면 글 상자가 만들어진 것을 확인할 수 있다. 

제목을 입력하고 완료 버튼을 누르고 나온다 

 

 

 

 

 

 

 

 

서식 적용하기 

 

이제 서식을 적용해볼 차례 

1. 글쓰기 모드에서 ... 를 누르고 나오는 기타 메뉴들 중 서식을 클릭한다 

2. 아까 만들었던 서식의 제목을 클릭하면 

 

이렇게 적용됨을 알 수 있다. 끝!! 

 

 

 

 

색깔, 글 테두리 서식을 마음대로 바꾸는 방법을 알고 싶다면 다음 포스팅으로 

핑크  

 

두줄 박스