CSS 이쁜 텍스트 박스 만들기

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 1,649회 작성일 22-07-31 15:45(글 수정: 2023년 07월 22일)

본문

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





box 관련된 게시글 보기

댓글목록

등록된 댓글이 없습니다.

사이트안내 | 서비스 이용약관 | 개인정보 처리방침 |
마이링크 | 후원안내 | FAQ | Admin
TOP