0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 헤더 분리하기를 작업합니다.
<헤더 분리하기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
우리가 클론코딩할 미스사이공 헤더는 이렇게 생겼습니다.
2
일반적으로 "헤더"에는 로고와 GNB가 들어갑니다. 헤더도 공통적으로 사용되는 영역이니까 /inc/header.php 파일에 퍼블리싱해 주신 html 코드를 넣습니다.
3
미스사이공 사이트 헤더 html은 이렇습니다.
<body>, <div id="wrap"> 아래 레벨에 <header> 태그가 위치합니다.
test.php 파일에 형식을 맞춰봅니다.
<?php
require_once("/inc/head.php");
?>
<body>
<div id="wrap">
<?php require_once("/inc/header.php"); ?>
</div>
</body>
</html>4
퍼블리싱이 잘 나오는지 확인합니다.
5
로고가 안보입니다. 어디갔지? 싶어서 인스펙터로 확인합니다.
/static/images/common/h1-logo.png 이미지 파일이 없다고 하네요.
6
퍼블리싱 파일에는 분명히 로고가 있었으니 퍼블리싱 파일을 브라우저로 띄워서 검사기로 확인해 봅니다.
css 안에 백그라운드로 들어가 있네요.
7
해당 파일을 웹서버 안으로 옮깁니다.
8
로고가 잘 나오는지 확인합니다.
일용직 개발자. freetercoder@gmail.com