✔ 뷰어로 보기
HTML
2015.12.28 14:08

8. PHP를 통한 index파일의 구성

KKMS
조회 수 19804 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

가 크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

PHP의 include를 통해 특정파일을 불러 올 수 있다는 것을 이용해 아래와 같이 HTML파일을 분리하여 사용할 수 있다.

 

<?
    include 'header.html';
    include 'content.html';
    include 'footer.html';
?>

 

위와 같은 형태로 작성하면 서브페이지의 갯수만큼 위의 파일을 작성해야 한다.

 

이것은 서브페이지의 갯수가 늘어나는 많큼 유지보수를 어렵게 만든다. 이를 극복하기 위해 주소자체를 매개변수로 이용하는 방법을 사용하면 유지보수의 어려움에서 쉽게 벗어날 수 있다.

 

A태그를 이용해 주소를 전송 할 때 보통은 아래와 같은 방법을 사용하고 있다.

 

<a href="content1.html">메뉴1</a>

<a href="content2.html">메뉴2</a>

<a href="content3.html">메뉴3</a>

<a href="content4.html">메뉴4</a>

 

위의 예에서는  4개의 파일이 필요하다. (content1.html ~ content4.html)

 

하지만, 아래처럼하면 1개의 파일만으로 처리가 가능해진다. (content.php)

 

<a href="content.php?menu=1">메뉴1</a>

<a href="content.php?menu=2">메뉴2</a>

<a href="content.php?menu=3">메뉴3</a>

<a href="content.php?menu=4">메뉴4</a>

 

즉, 주소의 전달값을 매개변수로 사용하는 것이다.

 

실제적인 예제를 살펴보기 위해 아래처럼 전체적인 디자인을 만들어보자.

 

----주소---------------------------------------서브파일-------------------------

index.php --------------- header.html + 메인메뉴.html + footer.html

index.php?menu=1 --- header.html + menu1.html + footer.html

index.php?menu=2 --- header.html + menu2.html + footer.html

index.php?menu=3 --- header.html + menu3.html + footer.html

index.php?menu=4 --- header.html + menu4.html + footer.html

 

menu가 어떤 값을 갖는지 구분하여 각각의 서브파일들을 묶어주면 된다.

 

공통적으로 사용되는 header.html과 footer.html을 만들어 보자.

 

<html lang=ko>
<head>
<meta charset=utf-8>
<style>
.menu {
    text-decoration: none;
}

.content {
    font-size: 30px; 
}

.footer{
    font-size: 20px;
}
</style>
</head>
<body>
    <a href="index.php?menu=1" class="menu">MENU 1</a> 
    <a href="index.php?menu=2" class="menu">MENU 2</a> 
    <a href="index.php?menu=3" class="menu">MENU 3</a> 
    <a href="index.php?menu=4" class="menu">MENU 4</a>

 

위의 파일에서 봐야할 것은 A태그의 index.php 뒤에 나오는 menu=숫자 형태이다. 이렇게 주소를 매개변수처럼 지정하는 것이다.

 

    <p class="footer">FOOTER CONTENT</p>
</body>
</html>

 

이제 header + 콘텐츠 + footer로 연결 할 index.php파일을 만들어 준다.

 

<? 
include './header.html';


    $menu = $_GET['menu'];

    if ($menu == '1') {
        include './menu1.html';
    }
    else if ($menu == '2') {
        include './menu2.html';
    }
    else if ($menu == '3') {
        include './menu3.html';
    }
    else if ($menu == '4') {
        include './menu4.html';
    }
    else {
        include './nopage.html';
    }

include './footer.html';
?>

 

그리고 각 컨텐츠에 들어 갈 menu1~4파일과 메인컨텐츠를 담당하는 nopage.html을 만들어 준다.

 

<p class="content">
menu 1 - blabla
</p>

 

 

<p class="content">
menu 2 - blabla
</p>

 

 

<p class="content">
menu 3 - blabla
</p>

 

 

<p class="content">
menu 4 - blabla
</p>

 

 

<p class="content">
메인메뉴입니다.
</p>

 

 

이제 브라우저에서 실행해 보자.

 

8-1.png

 

MENU 1을 클릭해 보자.

 

8-2.png

 

 

잘 작동되고 있다. 여러 개의 서브페이지를 만들지 않고, 주소를 매개변수처럼 사용하여  index.php 파일 하나로 모든 서브페이지를 제어 할 수 있게 되었다.

Atachment
첨부 '2'
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
에디터 사용하기 닫기
Comments '1'
  • ?
    KKMS4001 2018.06.25 13:22

    <style>

    .M1, .M2 { position: relative; display: inline-block;

        width: 100px; height: 100px; 

                    border: 1px solid red;

        }

        .S1, .S2 { position: absolute; top: 50px; left: 50px;

        width: 100px; height: 100px; 

                    border: 1px solid red;    

        } 

    </style>

    <div class="M1">A-MAIN

    <div class="S1">A-CONTENTS</div>

    </div>

     

    <div class="M2">B-MAIN

    <div class="S2">B-CONTENTS</div>

    </div>

    수정 삭제 댓글
List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 134704
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 83949
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53803
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 24265
» HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19804
36 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19672
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16534
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15482
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13707
32 SASS Sass 소개 2019.09.19 13118
31 HTML Form 요소 설명 4 2016.06.01 12831
30 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10580
29 HTML li 에 대해 알아보자. 2 file 2016.02.15 10342
28 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10340
27 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 10127
26 HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 9208
25 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8553
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7259
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6740
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6204
쓰기
Board Pagination Prev 1 2 3 Next
/ 3