• 목록

박스 처리인데 TIP 이라고 타이틀이 들어간 이쁜 박스 입니다.

출처가 어딘지 모르겠어요. 저도 돌아다니다가 겟했네요.

 

[code]

<style>

div.tip { position: relative; margin: 40px 0px 30px 0px; padding: 20px 20px 1px 20px; border: 5px solid #eeeeee; border-radius: 10px; background-color: #ffffff; }

div.tip:before { content: "TIP"; position: absolute; top: -15px; margin: 0px; padding: 3px 10px; border-radius: 3px; background-color: #666666; color: #ffffff; font-weight: 800; font-size: 14px; font-family: "Noto Serif", sans-serif; }

</style>

<div class="tip">

<ul>

<li>박스 TIP 으로 나타내기</li>

<li>박스 TIP 으로 나타내기</li>

<li>박스 TIP 으로 나타내기</li>

<li>박스 TIP 으로 나타내기</li>

</ul>

</div>

[/code]

 

 

아래와 같이 보입니다.