PHP를 이용해 간단하게 호스팅 작업하기

ㆍStudy/Etc

 

이 작업은 이전에 파일질라를 이용해 닷홈 도메인으로 호스팅 작업한 것을 이어서 하는 것이다.

 

우선 index.html과 style.css 파일을 만들고, 각각 작성해준다.

 

 

- HTML

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>포트폴리오</title>
  </head>
  <body>
    <div id="wrap">
      <div class="head">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Page1</a></li>
          <li><a href="#">Page2</a></li>
          <li><a href="#">Page3</a></li>
          <li><a href="#">Page4</a></li>
        </ul>
      </div>
      <div class="contents">
        <div class="left">
          <ul>
            <li><a href="#">Notice</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Board</a></li>
            <li><a href="#">Q&A</a></li>
          </ul>
        </div>
        <div class="right">
        <strong>Contents 영역</strong>
        </div>
      </div>
      <div class="foot">footer</div>
    </div>
  </body>
</html>

 

style.css는 link 태그를 이용해 연결해준다.

 

 

- CSS

 

 

@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;

  color: #333;
}

body {
  font: 1em "Montserrat", 돋움, Doctum, sans-serif;

  text-align: center;
}

#wrap {
  width: 1280px;
  margin: 0 auto;
}

.head {
  height: 200px;

  border: 5px solid palevioletred;
}

.head ul li:first-child {
  margin-top: 10px;
}

.head ul li {
  margin-bottom: 20px;
}

.contents {
  display: flex;
  height: 500px;

  line-height: 100px;

  border: 5px solid rgb(95, 157, 95);
}

.contents .left {
  width: 20%;

  background: #ccc;
}

.contents .right {
  width: 80%;

  background: #eee;
}

.foot {
  height: 100px;

  line-height: 100px;

  border: 5px solid rgb(9, 83, 220);
}

 

 

 

 

 

이런 화면이 나타나는데, 수정 작업을 할 때 PHP를 이용하면 훨씬 간편하고 빠르게 작업할 수가 있다.

일일이 각 파일을 수정하지 않아도 되고, include 라는 것으로 파일을 끌어다주기만 하면 된다.

 

지금부터 내가 하려고 하는 것은 Home 버튼을 클릭하면 지금과 같은 화면이 나타나도록 하고,

Page1을 클릭하면 저기 Contents 영역이라고 적혀있는 문구를 'Page1 영역' 이라 바꿔주고,

Page2를 클릭하면 'Page2 영역' 이라 바꿔주고, Page3를 클릭하면 'Page3 영역' 이라 바꿔주고,

Page4를 클릭하면 'Page4 영역' 이라 바뀌는 작업을 하려 하는 것이다.

 

즉, 각각의 html 파일을 만들지 않고 php 파일을 만들어서 include만 해주면 된다.

이렇게 되면 용량이 확 줄어들고 작업 속도도 빨라진다.

 

자 이제 저 index.html 문서를 나누어 3개의 PHP 파일로 만들 것이다.

'index.php', 머리를 뜻하는 'subhead.php', 꼬리를 뜻하는 'subtail.php' 라는 파일로 분리할 것이다.

 

일단 index.html을 'index.php' 파일로 이름을 변경한다.

만약 index.html 파일이 삭제되지 않고 계속 남아있다면, 파일질라에서 직접 삭제해준다. 

 

 

        <div class="right">
        <strong>Contents 영역</strong>
        </div>

 

내가 수정해야할 부분은 index.php에서 .contents .right 부분이다.

여기서 .right 부분 안의 strong 태그 부분만 수정해주면 되는 것이다.

 

그래서 우선 'subhead.php' 라는 파일을 만들고, 'index.php' 파일에서 .right 부분의 strong 태그 전까지만

Ctrl + X를 눌러 복사해 붙여넣기 한다.

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>포트폴리오</title>
  </head>
  <body>
    <div id="wrap">
      <div class="head">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Page1</a></li>
          <li><a href="#">Page2</a></li>
          <li><a href="#">Page3</a></li>
          <li><a href="#">Page4</a></li>
        </ul>
      </div>
      <div class="contents">
        <div class="left">
          <ul>
            <li><a href="#">Notice</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Board</a></li>
            <li><a href="#">Q&A</a></li>
          </ul>
        </div>
        <div class="right">

 

이것이 'subhead.php' 파일이다.

 

이제 'subtail.php' 파일을 만들고, 'index.php' 파일에서 .right 부분의 strong 태그 후부터 끝까지

Ctrl + X를 눌러 복사해 붙여넣기 한다.

 

</div>
      </div>
      <div class="foot">footer</div>
    </div>
  </body>
</html>

 

이것이 'subtail.php' 파일이다.

 

 

 

<strong>Contents 영역</strong>

 

그러면 'index.php' 파일에는 이것만 남게 된다.

 

 

<? include "subhead.php"; ?>
<strong>Contents 영역</strong>
<? include "subtail.php"; ?>

 

이제 index.php에서 include를 이용해  'subtail.php' 파일과 'subtail.php' 파일을 끌어온다.

 

 

그러면 아까와 동일하게 화면이 나타나게 된다.

 

이제 'page1.php', 'page2.php', 'page3.php', 'page4.php' 4개의 파일을 각각 만들면 끝난다. 

여기서도 이전과 동일한데, 결국 .right 안의 strong 태그 삽입 부분만 변경해주면 된다.

 

 

<? include "subhead.php"; ?>
<strong>Page1 영역</strong>
<? include "subtail.php"; ?>

 

'page1.php' 파일을 만들고, 이렇게 작성하면 된다.

'page2.php', 'page3.php', 'page4.php' 도 마찬가지로 파일을 만들어서 Page2 영역, Page3 영역,

Page4 영역이라고만 바꾸면 된다.

 

그러면 마지막으로 'subhead.php'만 변경해주면 되는데, a 태그에서 연결만 시켜주면 끝이다 !

 

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>포트폴리오</title>
  </head>
  <body>
    <div id="wrap">
      <div class="head">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="page1.php">Page1</a></li>
          <li><a href="page2.php">Page2</a></li>
          <li><a href="page3.php">Page3</a></li>
          <li><a href="page4.php">Page4</a></li>
        </ul>
      </div>
      <div class="contents">
        <div class="left">
          <ul>
            <li><a href="#">Notice</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Board</a></li>
            <li><a href="#">Q&A</a></li>
          </ul>
        </div>
        <div class="right">

 

 

a 태그 부분에 버튼을 누르면 각각의 파일로 이동하도록 연결해준다.

 

 

 

0

 

이게 완성본이다 ! 

PHP도 깊이 들어가면 정말 복잡한 언어이지만, include만 알아도 작업 속도가 확 줄게 된다.

 

앞으로 차근차근 PHP도 공부해나가야겠다. 

 

파이팅 !

 

 

 

 

 

 

 

 

 

반응형

'Study > Etc' 카테고리의 다른 글

웹디자인기능사 필기 공부 - 1과목  (0) 2023.01.26
그누보드5 설치 후 게시판 달기  (0) 2023.01.16
웹디자인기능사 필기 공부  (0) 2023.01.13
닷홈으로 호스팅하기 & 워드프레스  (0) 2023.01.09
팝업창과 모달창의 공통점과 차이점  (1) 2023.01.06

관련글

댓글 1

티스토리툴바