CSS 이쁜 텍스트 박스 만들기
페이지 정보
본문
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
관련링크
-
https://nmcat.tistory.com/835
895회 연결
- 이전글
- 다음글
댓글목록
등록된 댓글이 없습니다.