이번에는 멋진 텍스트 박스를 어떻게 만드는지 알아보도록 하겠습니다. CCS 와 HTML 을 이용해서 멋지고 예쁜 텍스트 박스를 만들어보세요~ 이런 텍스트 박스를 마음대로 연출할수있다면 앞으로 여러분이 블로그 포스팅할때 보다 깔끔하게 정리해서 포스팅을 할수가 있을겁니다. 멋지고 예쁜 텍스트 박스를 어떻게 만드는지 궁금하시다면 따라오세요~





    예쁜 박스 만들기


    1.컬러를 확인할수있는 사이트


    https://www.color-hex.com/


    컬럭 확인 사이트

    컬러 코드를 확인할때 유용한 사이트 입니다. 즐겨찾기 추가해놓고 필요할때마다 사용해보세요.


    그리고 배색을 생각할때 매우 편리한 사이트도 하나 소개합니다.


    https://colorhunt.co/palettes/space


    배색


    색상을 조합할때 유용합니다.





    2.심플한 디자인의 박스 입니다.


    아래 모든 예제들은 그냥 사용하셔도 되지만 자신만의 개성있는 색상으로 바꾸어서 사용하시면 보다더 멋지고 예쁜 박스를 만드실수가 있을겁니다. 색상 조합은 위에서 소개한 사이트에서 참고하시면 됩니다.
    간단한 실선으로 둘러싸인 상자입니다. 
    <style>
.box1 {
margin:2em auto;
padding:2em;
border:solid 2px #A5A19A;
}
</style>
<div class="box1">
간단한 실선으로 둘러싸인 상자입니다.
</div>


    이중선으로 둘러싸인 상자입니다. 
    <style>
.box2 {
margin: 2em auto;
padding:2em;
border:double 5px #CCCFD6;
background-color:#EAEBEE;
}
</style>
<div class="box2">
이중선으로 둘러싸인 상자입니다.
</div>


    점선으로 둘러싸인 상자입니다. 
    <style>
.box3 {
margin: 2em auto;
padding:2em;
border:dashed 2px #b3ada4;
}
</style>
<div class="box3">
점선으로 둘러싸인 상자입니다.
</div>


    점선(둥근 점)으로 둘러싸인 상자입니다. 
    <style>
.box4 {
margin: 2em auto;
padding:2em;
border:dotted 3px #e2c2b3;
}
</style>
<div class="box4">
점선(둥근 점)으로 둘러싸인 상자입니다.
</div>


    간단하게 배경색을 붙인 박스입니다. 
    <style>
.box5 {
margin: 2em auto;
padding:2em;
background-color:#E5F2F1;
}
</style>
<div class="box5">
간단하게 배경색을 붙인 박스입니다.
</div>




    3.세련되고 멋진 CSS 박스입니다.

    대각선 줄무늬 배경의 박스입니다. 
    <style>
.box21 {
margin: 2em auto;
padding:2em;
border:solid 2px #A5A19A;
background-image: repeating-linear-gradient(-45deg,#f2f3f7 0, #f2f3f7 3px,transparent 3px,transparent 6px)
}
</style>
<div class="box21">
대각선 줄무늬 배경의 박스입니다.
</div>


    왼쪽에 굵은 선 그리고 그림자가 있는 박스입니다. 
    <style>
.box23 {
margin: 2em auto;
padding:2em;
border-left:solid 5px #e9b3a3;
background-color:#f5f5f5;
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
}
</style>
<div class="box23">
왼쪽에 굵은 선 그리고 그림자가 있는 박스입니다.
</div>


    위에만 굵은 선이 있고 그림자가 있습니다. 
    <style>
.box24 {
margin: 2em auto;
padding:2em;
border-top:solid 5px #e4cc8f;
background-color:#F9F4E8;
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
}

</style>
<div class="box24">
위에만 굵은 선이 있고 그림자가 있습니다.
</div>


    위 아래로 굵은 선이 있습니다. 
    <style>
.box25 {
margin: 2em auto;
padding:2em;
border-top:solid 5px #8B968D;
border-bottom:solid 5px #8B968D;
background-color:#F3F4F3;
}
</style>
<div class="box25">
위 아래로 굵은 선이 있습니다.
</div>


    좌우에 이중선을 두드려 그림자를 붙이고 있습니다. 
    <style>
.box26 {
margin: 2em auto;
padding:2em;
border-left:double 5px #999fad;
border-right:double 5px #999fad;
background-color:#f1f3f4;
box-shadow:3px 1px 4px rgba(0, 0, 0, 0.2);
}
</style>
<div class="box26">
좌우에 이중선을 두드려 그림자를 붙이고 있습니다.
</div>


    선의 색을 일부분만 바꾸어 보았습니다. 
    <style>
.box28 {
margin: 2em auto;
padding:2em;
border: 2px solid #eee;	
position: relative;
z-index: 0;
}
.box28:before {
border-top:2px solid #c6d4c6;
border-left:2px solid #c6d4c6;
content: '';
display: block;
position: absolute;
top: -2px;
left: -2px;
width: 20px;
height: 20px;
z-index: 1;
}
</style>
<div class="box28">
선의 색을 일부분만 바꾸어 보았습니다.
</div>


    워드프레스 유료테마「SWELL」의 목차를 흉내내었습니다. 
    .box30{
margin: 2em auto;
padding:2em;
background:linear-gradient(-45deg,transparent 25%,#eee 25%,#eee 50%,transparent 50%,transparent 75%,#eee 75%,#eee);
background-size: 4px 4px;
border-bottom: 4px double #ddd;
border-top: 4px double #ddd;
background-clip: padding-box;
}
</style>
<div class="box30">
워드프레스 유료테마「SWELL」의 목차를 흉내내었습니다.
</div>


    왼쪽 위와 오른쪽 아래에 악센트로 삼각형을 붙인 상자입니다. 
    <style>
.box31{
margin: 2em auto;
padding:2em;
position: relative;
border:1px solid #c6d4c6;
}
.box31:before{
border-bottom:30px solid transparent;
border-left:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
top: 0px;
left: 0px;
}
.box31:after{
border-left:30px solid transparent;
border-bottom:30px solid #c6d4c6;
content: '';
display: block;
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<div class="box31">
왼쪽 위와 오른쪽 아래에 악센트로 삼각형을 붙인 상자입니다.
</div>


    4.귀엽고 깜찍한 CSS 박스입니다.



    실선에 둥글게 한 것만으로도 귀여운 분위기가됩니다.
    border-radius 의 값으로 둥글기를 조정합니다. 
    <style>
.box51 {
margin: 2em 1em;
padding:2em;
border-radius:30px;
background-color:#f7e9e8;
}
</style>
<div class="box51">
실선에 둥글게 한 것만으로도 귀여운 분위기가됩니다. 
<br>border-radius 의 값으로 둥글기를 조정합니다.
</div>


    푹신푹신 부드러운 분위기의 울타리입니다.
    색상은 원하는대로 변경하십시오. 
    <style>
.box52 {
margin: 2em 1em;
padding: 1em 2em;
background-color:#fff;
box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;
border-radius: 30px;
}
</style>
<div class="box52">
푹신푹신 부드러운 분위기의 울타리입니다. <br>
색상은 원하는대로 변경하십시오.
</div>


    둥근 점선 테두리 박스입니다.
    바느질한것 같은 느낌의 예쁜 박스입니다. 
    <style>
.box53{
margin: 2em auto;
padding:2em;
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#efede9;
border-radius:13px;
}

.box53:before{
position: absolute;
border: 2px dashed #A7A297;
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:10px;
}
</style>
<div class="box53">
둥근 점선 테두리 박스입니다.<br>
바느질한것 같은 느낌의 예쁜 박스입니다.
</div>


    흰색 바느질을 한것 같은 점선 테두리 박스입니다.
    모서리는 각입니다. 
    <style>
.box53{
margin: 2em auto;
padding:2em;
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#efede9;
border-radius:13px;
}

.box53:before{
position: absolute;
border: 2px dashed #A7A297;
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:10px;
}
</style>
<div class="box53">
둥근 점선 테두리 박스입니다.<br>
바느질한것 같은 느낌의 예쁜 박스입니다.
</div>


    손으로 그린것 같은 느낌입니다.
    색상을 바꿔보세요. 
    .box55 {
margin: 2em auto;
padding:2em;
border-radius: 30px 60px/60px 30px;
border: solid 8px #ccc7be;
}
</style>
<div class="box55">
손으로 그린것 같은 느낌입니다.
<br> 색상을 바꿔보세요.  
</div>


    원포인트에 색을 붙이면 귀여운 디자인이 됩니다. 
    <style>
.box55 {
margin: 2em auto;
padding:2em;
border-radius: 30px 60px/60px 30px;
border: solid 8px #ccc7be;
}
</style>
<div class="box56">
원포인트에 색을 붙이면 귀여운 디자인이 됩니다.
</div>




    이렇게 해서 멋진 css 박스, 예쁜 html 텍스트 박스 만드는 방법에 대해 알아보았습니다. 위 예시를 그대로 사용해도 되지만 자신만의 멋진 색상으로 변경해서 사용해보세요. 보다더 멋지고 예쁜 css 박스가 만들어 질겁니다. 다음에는 더욱 유용한 정보로 찾아올것을 약속드리며 이번 포스팅은 여기까지 하도록 하겠습니다. 오늘도 행복하세요~ ^^


    추천글:블로그스팟 최신글 위젯 설정방법