CSS TIP 이쁜 박스

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 1,792회 작성일 22-01-15 22:10(마지막 글 수정: 2022년 06월 19일)

본문

박스 처리인데 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]

 

 

아래와 같이 보입니다.

1.jpg




css 관련된 게시글 보기

댓글목록

등록된 댓글이 없습니다.