워드프레스 텍스트 상자 만들기 다양한 컬러와 아이콘으로 CSS 박스 디자인

01

of 14

텍스트 상자 완성본 미리보기

아래 이미지는 총 12개의 텍스트 상자를 캡처한 이미지로 앞으로 직접 만들어볼 텍스트 상자의 완성본이다. 이 중에서 필요한 텍스트 상자만 추가 CSS 클래스나 패턴으로 만들어 사용하면 된다.

02

of 14

전체 CSS 코드

전체 CSS 코드로 이것저것 다 귀찮다면 전체를 복사해서 추가 CSS에 붙여넣기 하면 된다. 단 폰트, 글자 크기, 줄 간격, 여백 등인 본인 블로그에 맞게 조금씩 수정해야 한다.

.box {
background: #fafafa;
border-radius: 3px;
font-family: LINESeedKR-Rg;
font-weight: 400;
font-style: normal;
font-size: 1.125rem !important;
line-height: 1.5em;
color: #222222 !important;
padding: 25px 15px 15px 15px !important;
border: 1px solid #e0e0e0 !important;
margin: 0 0 3em !important;
}

.green {
background-color: #f0fff0 !important;
}

.blue {
background-color: #f0faff !important;
}

.red {
background-color: #fdedec !important;
}

.brown {
background-color: #fdf5e6 !important;
}

.purple {
background-color: #faf5ff !important;
}

.yellow {
background-color: #fffddb !important;
}

.iconi {
padding-left: 70px !important;
}

.iconi:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #71beff;
float: left;
margin-left: -40px;
content: "\f129";
}

.icons {
padding-left: 70px !important;
}

.icons:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #32cd32;
float: left;
margin-left: -50px;
content: "\f00c";
}

.iconw {
padding-left: 70px !important;
}

.iconw:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #ECC21B;
float: left;
margin-left: -50px;
content: "\f071";
}

.icone {
padding-left: 70px !important;
}

.icone:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #f67280;
float: left;
margin-left: -50px;
content: "\f05e";
}

.iconn {
padding-left: 70px !important;
}

.iconn:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #b189d5;
float: left;
margin-left: -50px;
content: "\f0f6";
}

.iconp {
padding-left: 70px !important;
}

.iconp:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #cd853f;
float: left;
margin-left: -50px;
content: "\f162";
}
Code language: CSS (css)

03

of 14

기본 CSS

필수 CSS로 텍스트 상자를 만들 때 기본이 되는 코드다. 텍스트 상자를 1개를 만들든 10개를 만들든 이 코드는 꼭 있어야 한다. 백그라운드, 상자 라운드, 폰트, 폰트 굵기, 폰트 스타일, 폰트 크기, 줄 간격, 글 색상, 안쪽 여백, 상자 테두리, 바깥 여백으로 구성된다.

.box {
background: #fafafa;
border-radius: 3px;
font-family: 폰트명;
font-weight: 400;
font-style: normal;
font-size: 1.125rem !important;
line-height: 1.5em;
color: #222222 !important;
padding: 25px 15px 15px 15px !important;
border: 1px solid #e0e0e0 !important;
margin: 0 0 3em !important;
}
Code language: CSS (css)

04

of 14

적용 방법

① 구텐베르크 에디터 : 글을 입력하고 해당 블록의 추가 CSS 클래스에 아래 이미지와 같이 입력한다.

② 구편집기 혹은 고급 편집기 도구

05

of 14

편집화면에 텍스트 상자 표시하기

실제 편집화면에 박스 표시가 없어서 불편하다면, 워드프레스 → 외모 → 테마 파일 편집기 → style-editor.css에 아래 코드를 추가하면 된다.

※ 차일드 테마를 사용하자!

.box {
    font-size: 1.125rem;
    padding: 25px 15px 15px 15px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}
Code language: CSS (css)

코드 추가 후 아래 이미지처럼 편집화면에 텍스트 상자가 표시된다. 이제 보면서 텍스트 상자에 글 입력이 가능해졌다. 줄 바꿈은 <br>을 사용해야 한다.

※ 한글이나 메모장에서 붙여넣기 하면 <p> </p>가 사용된다. 상관없으나 여백에 민감하다면 <br> 사용을 추천한다.

06

of 14

info Blue 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box blue”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box blue iconi을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box blue iconi”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box blue iconi을 입력하면 된다.

※ info Blue 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.blue {
background-color: #f0faff !important;
}

.iconi {
padding-left: 70px !important;
}

.iconi:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #71beff;
float: left;
margin-left: -40px;
content: "\f129";
}
Code language: CSS (css)

07

of 14

success Green 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box green”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box green icons을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box green icons”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box green icons을 입력하면 된다.

※ success Green 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.green {
background-color: #f0fff0 !important;
}

.icons {
padding-left: 70px !important;
}

.icons:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #32cd32;
float: left;
margin-left: -50px;
content: "\f00c";
}
Code language: CSS (css)

08

of 14

note Purple 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box purple”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box purple iconn을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box purple iconn”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box purple iconn을 입력하면 된다.

※ note Purple 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.purple {
background-color: #fdf5e6 !important;
}

.iconn {
padding-left: 70px !important;
}

.iconn:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #b189d5;
float: left;
margin-left: -50px;
content: "\f0f6";
}
Code language: CSS (css)

09

of 14

procedure Brown 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box brown”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box brown iconp을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box brown iconp”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box brown iconp을 입력하면 된다.

※ procedure Brown 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.brown {
background-color: #f0faff !important;
}

.iconp {
padding-left: 70px !important;
}

.iconp:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #cd853f;
float: left;
margin-left: -50px;
content: "\f162";
}
Code language: CSS (css)

10

of 14

warning Yellow 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box yellow”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box yellow iconw을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box yellow iconw”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box yellow iconw을 입력하면 된다.

※ warning Yellow 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.yellow {
background-color: #fffddb !important;
}

.iconw {
padding-left: 70px !important;
}

.iconw:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #ECC21B;
float: left;
margin-left: -50px;
content: "\f071";
}
Code language: CSS (css)

11

of 14

error Red 박스

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box red”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box red icone을 입력하면 된다.

▶ 적용방법 : 현재 이 상자 만드는 방법

① 구에디터 : 원본 코드에 <div class=”box red icone”>내용입력</div>을 입력하면 된다.

② 구텐베르크 에디터 : 추가 CSS에 클래스에 box red icone을 입력하면 된다.

※ error Red 박스 CSS : 이 텍스트 상자만 필요하다면 기본 CSS와 아래 CSS만 있으면 된다.

.red {
background-color: #fdedec !important;
}

.icone {
padding-left: 70px !important;
}

.icone:before {
font: normal normal normal 2rem/1 FontAwesome;
text-align: center;
color: #f67280;
float: left;
margin-left: -50px;
content: "\f05e";
}
Code language: CSS (css)

12

of 14

패턴 만들기

구에디터를 사용한다면 티스토리 처럼 단순 서식으로 만들어 사용하면 편하다. 아래 이미지처럼 꼭 synced를 끄고 패턴을 작성해야 한다.

13

of 14

아이콘이 깨진다면

보통 사용하는 테마에서 아이콘을 지원한다면 바로 표시되지만 지원하지 않는다면 Font Awesome 플러그인이나 사용법을 찾아봐야 한다.

※ 기타 궁금한게 있다면 질문답변 게시판 이용

14

of 14

워드프레스 텍스트 상자 박스 만들기

워드프레스 텍스트 상자, 박스 만들기 관련한 글은 아래를 참조