• 목록

1) 기본 박스

[code]

<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; border: solid 3px #5B8BD0;">

<p>이쁜 테두리 박스 예제 입니다.</p>

<p>텍스트 박스를 이쁘게 꾸며보세요.</p>

</div>

[/code]

2) 둥근박스

[code]

<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; color: #5B8BD0; background: #FFF; border: solid 3px #5B8BD0; border-radius: 10px;">

<p>모서리가 둥근 테두리 박스 예제입니다.</p>

<p>텍스트 박스를 둥글게 꾸며보세요.</p>

</div>

[/code]

3) 점선박스

[code]

<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; background: #f0f7ff; border: dashed 2px #5b8bd0;">

<p>점선 테두리 텍스트 박스 예제입니다.</p>

<p>텍스트 박스를 점선으로 꾸며보세요.</p>

</div>

[/code]

4) 둥근점선 테두리박스

[code]

<div style="padding: 2em 2em; margin: 2em 10px; font-weight: bold; color: #565656; background: #E4FCFF; box-shadow: 0px 0px 0px 10px #E4FCFF; border: dashed 2px #1DC1D6; border-radius: 8px;">

<p>둥근 점선 테두리 텍스트 박스 예제입니다.</p>

<p>텍스트 박스를 둥근 점선으로 꾸며보세요.</p>

</div>

[/code]

5) 소제목 용

[code]

<div style="padding: .43em 0em .35em .7em; margin: 2em 0; font-weight: bold; color: #232323; background: #F8E8FF; border-left: solid 10px #8A66AE;">

<p>소제목 서식으로 유용할것 같습니다.</p>

</div>

[/code]

출처: https://nmcat.tistory.com/835