Make Color Box on the WordPress

워드프레스 환경 설정에서

테마디자인 - 사용자 정의 - 추가 CSS에 아래 내용 삽입 - 공개

 

컬러 텍스트박스

/* 컬러 텍스트 박스 스타일 */
 
.txtBox00bg, .txtBox01bg, .txtBox02bg, .txtBox03bg, .txtBox04bg, .txtBox05bg, .txtBox06bg {
    padding: 1.25em 1.125em;
    border-radius: .750em;
    word-break: break-all;  
}
 
.txtBox00bg { 
    background-color: #f2f4f6;
} 
 
.txtBox01bg { 
    background-color:rgba(30, 144, 255, 0.2); 
} 
 
.txtBox02bg {
    background-color:rgba(26, 255, 163, 0.2);
}

.txtBox03bg {
    background-color:rgba(255, 255, 0, 0.2);
}

.txtBox04bg { 
    background-color: rgba(255, 160, 122, 0.2);
} 
 
.txtBox05bg { 
    background-color:rgba(255, 99, 71, 0.2);
} 
 
.txtBox06bg {
    background-color:rgba(237, 20, 61, 0.2);
}

<p class="txtBox00bg">텍스트 배경상자 00 txtBox00bg</p>
<p class="txtBox01bg">텍스트 배경상자 01 txtBox01bg</p>
<p class="txtBox02bg">텍스트 배경상자 02 txtBox02bg</p>
<p class="txtBox03bg">텍스트 배경상자 03 txtBox03bg</p>
<p class="txtBox04bg">텍스트 배경상자 04 txtBox04bg</p>
<p class="txtBox05bg">텍스트 배경상자 05 txtBox05bg</p>
<p class="txtBox06bg">텍스트 배경상자 06 txtBox06bg</p>

<p class="txtBox01">텍스트 상자 00 txtBox01</p>
<p class="txtBox02">텍스트 상자 01 txtBox02</p>
<p class="txtBox03">텍스트 상자 02 txtBox03</p>
<p class="txtBox04">텍스트 상자 03 txtBox04</p>

<p class="txtBox10">텍스트 상자 10 txtBox10</p>
<p class="txtBox11">텍스트 상자 11 txtBox11</p>
<p class="txtBox12">텍스트 상자 12 txtBox12</p>
<p class="txtBox13">텍스트 상자 13 txtBox13</p>
<p class="txtBox14">텍스트 상자 14 txtBox14</p>

<p class="txtBox20">텍스트 상자 20 txtBox20</p>
<p class="txtBox21">텍스트 상자 21 txtBox21</p>
<p class="txtBox22">텍스트 상자 22 txtBox22</p>
<p class="txtBox23">텍스트 상자 23 txtBox23</p>
<p class="txtBox24">텍스트 상자 24 txtBox24</p>

텍스트 배경상자 00 txtBox00bg

텍스트 배경상자 01 txtBox01bg

텍스트 배경상자 02 txtBox02bg

텍스트 배경상자 03 txtBox03bg

텍스트 배경상자 04 txtBox04bg

텍스트 배경상자 05 txtBox05bg

텍스트 배경상자 06 txtBox06bg

텍스트 배경상자 10 txtBox10bg

텍스트 배경상자 11 txtBox11bg

텍스트 배경상자 12 txtBox12bg

텍스트 배경상자 13 txtBox13bg

텍스트 배경상자 14 txtBox14bg

텍스트 상자 00 txtBox01

텍스트 상자 01 txtBox02

텍스트 상자 02 txtBox03

텍스트 상자 03 txtBox04

텍스트 상자 10 txtBox10

텍스트 상자 11 txtBox11

텍스트 상자 12 txtBox12

텍스트 상자 13 txtBox13

텍스트 상자 14 txtBox14

텍스트 상자 20 txtBox20

텍스트 상자 21 txtBox21

텍스트 상자 22 txtBox22

텍스트 상자 23 txtBox23

텍스트 상자 24 txtBox24

[ 참조 ]

워드프레스에서 컬러 텍스트 상자 만들기 [CSS]

https://bssow.tistory.com/127

 

컬러박스 텍스트박스 텍스트상자