목차
예전에 텍스트 상자 만드는 방법에 대한 글을 작성했었다. 구텐베르크 에디터의 사전 서식화 블록을 이용하여 텍스트 상자를 만드는 방법이었다.
이번엔 일반 블록이나 구에디터, 고급 편집기 도구를 이용해서 박스를 만드는 방법을 설명한다. 디자인은 기존 텍스트 상자와 크게 다르지 않지만 추가 CSS 클래스나 패턴으로 만들어 두고 필요할 때 꺼내서 사용할 수 있다.
01
of 13텍스트 상자 완성본 미리보기
아래 이미지는 총 12개의 텍스트 상자를 캡처한 이미지로 앞으로 직접 만들어볼 텍스트 상자의 완성본이다. 이 중에서 필요한 텍스트 상자만 추가 CSS 클래스나 패턴으로 만들어 사용하면 된다.
02
of 13전체 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 13기본 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 13적용 방법
① 구텐베르크 에디터 : 글을 입력하고 해당 블록의 추가 CSS 클래스에 아래 이미지와 같이 입력한다.
② 구편집기 혹은 고급 편집기 도구
05
of 13편집화면에 텍스트 상자 표시하기
실제 편집화면에 박스 표시가 없어서 불편하다면, 워드프레스 → 외모 → 테마 파일 편집기 → 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 13info 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 13success 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 13note 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 13procedure 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 13warning 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 13error 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 13패턴 만들기
구에디터를 사용한다면 티스토리 처럼 단순 서식으로 만들어 사용하면 편하다. 아래 이미지처럼 꼭 synced를 끄고 패턴을 작성해야 한다.
13
of 13아이콘이 깨진다면
보통 사용하는 테마에서 아이콘을 지원한다면 바로 표시되지만 지원하지 않는다면 Font Awesome 플러그인이나 사용법을 찾아봐야 한다.
