0

웹에이전시 전문 프리랜서 개발자 프리터코더입니다.

이번 챕터에서는 웹사이트 개발 과정 중 백오피스 레이아웃 분해하기를 작업합니다.

<백오피스 레이아웃 분해하기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.

1

사용자 웹사이트와 동일하게 백오피스도 분해합니다. login 과 menu_item html 을 비교해서 head 코드가 동일한지 확인합니다.

2

똑같은 것 같네요. /backoffice/inc/head.php 로 분리합니다.

3

왼쪽 사이드바도 분리하겠습니다.

4

검사기로 왼쪽 사이드바 영역을 확인해 봅니다. id="accordionSidebar" 항목이네요.

5

/backoffice/inc/sidebar.php 파일에 사이드바 태그를 잘라내서 붙여넣습니다.

6

SB Admin 2 에서는 헤더 영역을 Topbar 라고 이름붙였네요.

<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

헷깔리지 않도록 같은 이름으로 분리합니다. 36번 라인처럼 TopBar 항목이 들어가야 하는 자리를 표시해 두면 나중에 합칠 때 혼선을 줄일 수 있습니다.

7

같은 방법으로 푸터도 분리합니다.

8

공통 레이아웃 파일을 만듭니다.

9

테스트를 위해 _body.php 파일도 생성해 보겠습니다.

10

잘 보이는 것을 확인합니다.

개발 요청은 프리터 코더 소개를 읽어보시고, 이메일 로 부탁드립니다.