안녕하세요~ 예화사랑입니다~ 오늘은 텍스트 박스를 이쁘게 꾸미는 방법에 대해 알아보도록 하겠습니다. 이쁜 텍스트 박스를 서식에 넣어놓고 필요할때 마다 불러내서 사용하시면 매우 편리할것입니다. 여러가지 예제들을 준비했으니 마음에 드는걸로 가져가서 사용하시기 바랍니다~ 마음에 드는 색상이 없으면 직접 색상을 선택해서 사용하셔도 좋을듯합니다~^^
1. 기본1 - 간단한 사각 테두리 박스
이쁜 테두리 박스 예제 입니다.
텍스트 박스를 이쁘게 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; border: solid 3px #000000;">
<p>이쁜 테두리 박스 예제 입니다.</p>
<p>텍스트 박스를 이쁘게 꾸며보세요.</p>
</div>
이쁜 테두리 박스 예제 입니다.
텍스트 박스를 이쁘게 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; border: solid 3px #5B8BD0;">
<p>이쁜 테두리 박스 예제 입니다.</p>
<p>텍스트 박스를 이쁘게 꾸며보세요.</p>
</div>
이쁜 테두리 박스 예제 입니다.
텍스트 박스를 이쁘게 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; border: solid 3px #FF7D6E;">
<p>이쁜 테두리 박스 예제 입니다.</p>
<p>텍스트 박스를 이쁘게 꾸며보세요.</p>
</div>
2. 기본2 - 모서리가 둥근 텍스트 박스
모서리가 둥근 테두리 박스 예제입니다.
텍스트 박스를 둥글게 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; color: #000000; background: #FFF; border: solid 3px #000000; border-radius: 10px;">
<p>모서리가 둥근 테두리 박스 예제입니다.</p>
<p>텍스트 박스를 둥글게 꾸며보세요.</p>
</div>
모서리가 둥근 테두리 박스 예제입니다.
텍스트 박스를 둥글게 꾸며보세요.
<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>
모서리가 둥근 테두리 박스 예제입니다.
텍스트 박스를 둥글게 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; color: #FF7D6E; background: #FFF; border: solid 3px #FF7D6E; border-radius: 10px;">
<p>모서리가 둥근 테두리 박스 예제입니다.</p>
<p>텍스트 박스를 둥글게 꾸며보세요.</p>
</div>
3. 기본3 - 점선 테두리 텍스트 박스
점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 점선으로 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; background: #f0f7ff; border: dashed 2px #5b8bd0;">
<p>점선 테두리 텍스트 박스 예제입니다.</p>
<p>텍스트 박스를 점선으로 꾸며보세요.</p>
</div>
점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 점선으로 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 0; font-weight: bold; background: #FFEBE9; border: dashed 2px #FF7D6E;">
<p>점선 테두리 텍스트 박스 예제입니다.</p>
<p>텍스트 박스를 점선으로 꾸며보세요.</p>
</div>
4. 응용1- 둥근 점선 테두리 박스
둥근 점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 둥근 점선으로 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 10px; font-weight: bold; color: #565656; background: #ffeaea; box-shadow: 0px 0px 0px 10px #ffeaea; border: dashed 2px #ffc3c3; border-radius: 8px;">
<p>둥근 점선 테두리 텍스트 박스 예제입니다.</p>
<p>텍스트 박스를 둥근 점선으로 꾸며보세요.</p>
</div>
둥근 점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 둥근 점선으로 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 10px; font-weight: bold; color: #565656; background: #FFF8E8; box-shadow: 0px 0px 0px 10px #FFF8E8; border: dashed 2px #FFC06E; border-radius: 8px;">
<p>둥근 점선 테두리 텍스트 박스 예제입니다.</p>
<p>텍스트 박스를 둥근 점선으로 꾸며보세요.</p>
</div>
둥근 점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 둥근 점선으로 꾸며보세요.
<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>
둥근 점선 테두리 텍스트 박스 예제입니다.
텍스트 박스를 둥근 점선으로 꾸며보세요.
<div style="padding: 2em 2em; margin: 2em 10px; font-weight: bold; color: #565656; background: #F8E8FF; box-shadow: 0px 0px 0px 10px #F8E8FF; border: dashed 2px #8A66AE; border-radius: 8px;">
<p>둥근 점선 테두리 텍스트 박스 예제입니다.</p>
<p>텍스트 박스를 둥근 점선으로 꾸며보세요.</p>
</div>
5. 응용2- 소제목 꾸미기
소제목 서식으로 유용할것 같습니다.
<div style="padding: .43em 0em .35em .7em; margin: 2em 0; font-weight: bold; color: #232323; background: #fff8e8; border-left: solid 10px #ffc06e;">
<p>소제목 서식으로 유용할것 같습니다.</p>
</div>
소제목 서식으로 유용할것 같습니다.
<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>
소제목 서식으로 유용할것 같습니다.
<div style="padding: .43em 0em .35em .7em; margin: 2em 0; font-weight: bold; color: #232323; background: #E4FCFF; border-left: solid 10px #1DC1D6;">
<p>소제목 서식으로 유용할것 같습니다.</p>
</div>
소제목 서식으로 유용할것 같습니다.
<div style="padding: .43em 0em .35em .7em; margin: 2em 0; font-weight: bold; color: #232323; background: #FFEBE9; border-left: solid 10px #FF7D6E;">
<p>소제목 서식으로 유용할것 같습니다.</p>
</div>
6. 마무리 한마디
이렇게해서 이쁜 텍스트 박스를 만드는 방법에 대해 알아보았습니다. 이것을 응용하시면 CSS 로 변환해서 멋진 소제목을 완성하실수도 있을겁니다~ 저도 이렇게 정리를 하고 보니 나중에 활용할때 유익할것 같습니다~ HTML을 조금만 공부하셔도 위 예제들을 참고로 더욱 많은 응용을 할수가 있을겁니다~
공감♥ 은 고래도 춤추게 합니다~ ^^
댓글