목차
저번에 사전 서식화와 추가 CSS 클래스를 사용하여 기본 박스와 아이콘이 들어간 박스 만드는 방법을 설명했었다. 이번엔 위쪽에 제목이 있는 타이틀 제목 있는 박스 만들기를 해보려하다.
박스 위쪽에 타이틀을 입력 해야하기 때문에 단순히 CSS만으론 만들 수 없고, 티스토리의 서식 메뉴 혹은 워드프레스의 재사용 가능 블록 메뉴를 이용해서 만들 수 있다.
02
of 05
티스토리 서식 만들기
티스토리의 경우 서식 관리 메뉴가 있어서 아주 쉽게 사용할 수 있다. 아래의 코드로 서식을 하나씩 만들어서 사용하면 된다.
※ 폰트, 사이즈, 색상, 여백 등은 본인의 티스토리에 맞게 조금 수정해서 사용하면 된다.
① 브라운
<div style="position: relative; background-color: #fdf5e6; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #cd853f; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
② 그린
<div style="position: relative; background-color: #f0fff0; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #32cd32; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
③ 그레이
<div style="position: relative; background-color: #f9f9f9; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #a9a9a9; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
④ 퍼플
<div style="position: relative; background-color: #faf5ff; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #b189d5; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
⑤ 블루
<div style="position: relative; background-color: #f0faff; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #71beff; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
⑥ 레드
<div style="position: relative; background-color: #fff5f7; padding: 30px 20px 18px 14px; line-height: 1.6; margin-top: 15px; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #f67280; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; letter-spacing: 1px; font-size: 0.875em; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p data-ke-size="size16">내용 입력</p>
</div>
Code language: CSS (css)
03
of 05
워드프레스 재사용 가능 블럭 만들기
https://본인 도메인/wp-admin/edit.php?post_type=wp_block 접속하면 재사용 가능 블록 페이지에 접속된다. 접속 후 아래 두 가지 방법 중 한 가지 방법을 선택한다.
1. JSON에서 가져오기
아래 첨부 파일을 다운로드 받은 후 압축을 풀고 하나씩 가져오기 하면 된다. 직접 만들어둔 파일로 가져오기만 하면 자동으로 재사용 가능 블록이 생성된다.
2. 새로 추가
아래 순서대로 직접 재사용 가능 블록을 작성하면 된다.
① 블록 삽입 – 클래식 선택
![재사용 가능 블럭 클래식 선택 재사용 가능 블럭 클래식 선택](https://www.wpcom.co.kr/wp-content/uploads/2023/03/재사용-가능-블럭-클래식-선택.png)
② 삽입된 클래식 – 도구 – 원본 코드 선택
![재사용 가능 블럭 도구 원본 코드 선택 재사용 가능 블럭 도구 원본 코드 선택](https://www.wpcom.co.kr/wp-content/uploads/2023/03/재사용-가능-블럭-도구-원본-코드-선택.png)
③ 원본 코드에 아래의 ④ ~ ⑨ 코드를 하나 씩 삽입하여 총 6개의 재사용 가능 블록을 만든다.
![재사용 가능 블럭 원본 코드 입력 재사용 가능 블럭 원본 코드 입력](https://www.wpcom.co.kr/wp-content/uploads/2023/03/재사용-가능-블럭-원본-코드-입력.png)
※ 본인의 테마에 맞게 폰트, 여백, 색상을 수정하면 된다.
④ 레드
<div style="position: relative; background-color: #fff5f7; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #f67280; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
⑤ 블루
<div style="position: relative; background-color: #f0faff; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #71beff; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
⑥ 퍼플
<div style="position: relative; background-color: #faf5ff; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #b189d5; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
⑦ 그레이
<div style="position: relative; background-color: #f9f9f9; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #a9a9a9; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
⑧ 그린
<div style="position: relative; background-color: #f0fff0; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #32cd32; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
⑨ 브라운
<div style="position: relative; background-color: #fdf5e6; padding: 30px 20px 0px 14px; line-height: 1.5; margin: 40px 0; border: 1px solid #e3e3e3;">
<div style="position: absolute; top: -11px; left: 15px; background-color: #cd853f; padding: 1px 6px 1px 7px; color: #fff; border-radius: 2px; font-size: 1rem; font-family: 'NanumSquareRound';">타이틀 입력</div>
<p>내용 입력</p>
</div>
Code language: CSS (css)
04
of 05
워드프레스에서 사용하기
① 글 작성시 박스 삽입할 위치에서 왼쪽 상단 블록 삽입기 토글 – 재사용 가능 탭 선택 – 재사용 가능 블록 선택
![재사용 가능 블록 선택 재사용 가능 블록 선택](https://www.wpcom.co.kr/wp-content/uploads/2023/03/재사용-가능-블록-선택.png)
② 선택한 재사용 가능 블록이 아래 이미지 처럼 삽입 되었다.
![재사용 가능 블록 삽입 재사용 가능 블록 삽입](https://www.wpcom.co.kr/wp-content/uploads/2023/03/재사용-가능-블록-삽입.png)
③ (중요) 재사용 가능 블록이 삽입 되었다면 옵션 – 부모 블록 선택 (재사용 가능 블록)을 선택한다.
![부모 블록 선택 부모 블록 선택](https://www.wpcom.co.kr/wp-content/uploads/2023/03/부모-블록-선택.png)
④ (중요) 부모 블록 선택 – 일반 블록으로 전환 선택한다.
![일반 블록으로 전환 일반 블록으로 전환](https://www.wpcom.co.kr/wp-content/uploads/2023/03/일반-블록으로-전환.png)
⑤ (중요) 재사용 가능 블록을 삽입했다면 꼭 일반 블록으로 전환 후 사용해야 한다. 이제 박스 타이틀과 내용을 입력하면 된다.
![일반 블록으로 전환 후 편집 일반 블록으로 전환 후 편집](https://www.wpcom.co.kr/wp-content/uploads/2023/03/일반-블록으로-전환-후-편집.png)
05
of 05
워드프레스 박스 만들기, 글 상자 만들기
워드프레스 박스 만들기, 글 상자 만들기 관련한 글은 아래를 참조