2. PHP 홈페이지 만들기 style.css 작성

2014.06.30 16:17
저자 : Kurien

1. PHP 홈페이지 만들기 레이아웃 구상 및 작성에서는 index.php과 layout.inc을 만들었는데요.

수정 된 부분과 추가된 부분이 있습니다.


먼저 들어가기에 앞서 현재 제작중인 페이지는 http://kurien.speeds.kr 입니다.

한번씩 구경하고 평가 좀 해주세요!



이건 어제 만든 레이아웃인데, CSS를 정말 기본적인 것만 줘서 이 꼴이였습니다 ㅋㅋ

오늘은 CSS부분을 주로 많이 다뤘습니다.

한번 보시죠!


index.php


<?php

include_once "./layout.inc"; // 레이아웃을 include 함 


$base = new Layout; // Layout class 객체를 생성


$base->link='./style.css'; // 스타일 추가

$base->content="<a href='#'>링크</a>내용이 들어가는 부분입니다."; //본문을 만듦


$base->LayoutMain(); //위의 변수들이 입력된 객체를 출력

?>


먼저 인덱스 부분은 어제 있던 $base->style='css 내용'; 부분을 지웠습니다.

그 부분들은 DIV 부분들이 제대로 적용 되는지 시험하기 위해 적은거였거든요.


대신 $base->link='./style.css';를 추가해서 style.css 파일을 링크시켰습니다.

그리고 $base->content에 <a href='#'>링크</a>를 추가한건 링크가 걸렸을 때의 폰트 색상을 적용시키기 위해 테스트한 용도입니다.


인덱스 페이지는 이 외에는 다른 점이 없네요.


layout.inc


<?php

// 세션을 시작합니다.

// 이후에 사용 할 로그인 용.

session_start();


// class를 이용한 객체 지향 방식

class Layout

{

public $title="Need Programs"; // 웹 페이지 제목

public $link; // CSS 링크 태그

public $style; // 스타일 적용 

public $content; // 메인 컨텐츠

public $board; //게시판 이름 지정

private $sub; // 서브 메뉴용 변수

private $login; // 로그인이나 로그아웃을 출력

// 레이아웃을 출력

public function LayoutMain()

{

echo "<!DOCTYPE html>\n<html lang='ko'>";

echo "<head>\n<meta charset='utf-8'/>";

echo "<title>".$this->title."</title>";

echo $this->LayoutStyle(); // 스타일을 레이아웃에 추가.

echo "</head>\n<body>\n<div id='container'>";

echo $this->LayoutHeader(); // 헤더 부분을 레이아웃에 추가

echo $this->LayoutContent(); // 컨텐츠 부분을 레이아웃에 추가

echo $this->LayoutSide(); // 사이드 부분을 레이아웃에 추가

echo $this->LayoutFooter(); // 푸터 부분을 레이아웃에 추가

echo "</div></body>\n</html>";

}

// 스타일을 추가

public function LayoutStyle()

{

echo "<link rel='stylesheet' type='text/css' href='".$this->link."'/> ";

echo "<style>".$this->style."</style>";

}

// 헤더 부분 추가

public function LayoutHeader()

{

$this->LayoutLogin();

echo "<header>

<div id='logo'><h1><a href='./'>Need Programs</a></h1></div>

<div id='navset'>

<nav id='menu'><li><a href='./board/'>Board</a></li><li><a href='./programs/'>Programs</a></li><li><a href='./notice/'>Notice</a></li></nav>

<nav id='login'>".$this->login."</nav>

</div>

<div class='ad_1'>

//광고 영역

</div>

</header>";

}

// 로그인을 출력할 지 로그아웃을 출력할 지 결정

public  function LayoutLogin()

{

if($_SESSION['id']=="")

{

$this->login="<a href='./login.php'>Login</a>";

} else

{

$this->login="<a href='./logout.php'>Logout</a>";

}

}


// 내용을 추가

public function LayoutContent()

{

echo "<section><article>".$this->content."</article>";

}

// 사이드바 추가

public function LayoutSide()

{

$this->board=explode('/', $_SERVER['PHP_SELF']);

switch($this->board[1])

{

case setup : 

$this->sub="@@@@만드는 중";

break;

default : 

$this->sub="@@@사이드바 제작중";

}

echo "<aside>".$this->sub."</aside></section>";

}

// 푸터 부분 추가

public function LayoutFooter()

{

echo "<footer>Copyright © Kurien. All rights reserved. Need Programs</footer>";

}

}

?>


역시 어제 생각 했던대로 레이아웃 부분을 수정할 것도 많네요.

빨간색 글씨로 된 부분이 추가, 변경된 부분입니다.


먼저 $sub 메뉴의 경우 내부에서만 변경되므로 private를 사용했습니다.

public을 사용하면 $base->sub = '내용';을 입력해버리면 변경이 되어버리거든요.


그리고 $login 또한 같은 이유로 private로 줬고, 이 변수는 현재 상태가 login상태인지 logout 상태인지 결정합니다.

<div id='navset'> 부분은 새로 추가된 부분으로 메인 메뉴와 로그인 부분을 추가했습니다.

단순한 html 부분이므로 넘어가겠습니다.


LayoutLogin() 함수는 위에 새로 만들었던 $login에 값을 추가하는 곳인데요.

만약 $_SESSION['id']에 값이 존재한다면 $login에 logout을 입력하고, 존재하지 않는다면 login을 입력합니다.


레이아웃 부분은 여기까지인것 같네요.

이해 안되는 부분은 질문 해주시면 감사하겠습니다!

저도 한번 더 복습하면 좋아요 ㅎㅎ


마지막으로 오늘 새로 추가한 Style.css 부분입니다.


style.css


/* body all */

body {margin:0; color:#6E6E7F; background:#e9eaed;}

a:link,

a:visited {color:#9090FF; text-decoration:none; font-weight:bolder; }

a:hover {color:#B1B1CC;}


/* container start */

div#container {margin:0 auto;}


/* header start */

header {width:94%; background:#fff; margin:1% 2% 0 2%; padding:1%; border-radius:10px;}

header h1 {margin:0; padding:5px;}

header h1 > a:link,

header h1 > a:visited {color:#8E8E9F; text-decoration:none;}

header h1 > a:hover {color:#000;}

div#logo {float:left; width:255px;}

div#navset {float:right;}

nav#menu {text-align:right; width:300px;}

nav#menu > li {float:right; list-style:none; margin-left:10px}


nav#login {clear:both; padding-top:5px; text-align:right; width:300px;}


div.ad_1 {clear:both; background:#fff; text-align:center; padding:10px 0 5px 0; background:#e9eaed; border-radius:10px;}

/* header end */


/* section start */

/* article start */

article {float:left; width:68%; height:300px; background:#fff; margin:10px 0px 10px 2%; padding:1%; border-radius:10px;}

/* article end */

/* aside start */

aside {float:right; width:23%; height:300px; background:#fff; margin:10px 2% 10px 1%; padding:1%; border-radius:10px;}

/* aside end */

/* section end */


/* footer start */

footer {clear:both; width:94%; background:#fff; margin:0 2% 10px 2%; padding:1%; border-radius:10px;}

/* footer end */

/* container end */


일단 레이아웃은 해상도에 될 수 있는한 상관없게 하려고 %를 사용해서 만들었습니다

물론 다 만든 후에는 부트스트랩을 사용해서 만들까 하구요.

현재는 일단 흉내만 내뒀습니다.


속성으로는 margin, padding, background, width, height, border-radius, float, clear, color, list-style,

text-decoration, font-weight, text-align 정도를 사용한 것 같네요.


하나하나 설명하긴 힘들구요. 확실히 알고 싶으시다면 블로그 내의 CSS 속성부분에 모두 있으므로 쉽게 찾으실 수 있을껍니다.

아니면 궁금한 속성이나 선택자를 댓글에 남겨주시면 답변 해드리겠습니다.


결과물입니다.



제가 만들었지만 지금까지 만든것 중에 가장 맘에 듭니다.

ㅋㅋㅋㅋ 직접 만들어놓고 이런말 하기도 그렇지만, 워낙 디자인이 젬병인지라 이 정도 퀄리티로 만족하게 되네요 ㅠ

오늘은 여기까지네요.


혹시 궁금한 점은 댓글에 남겨주시면 되겠습니다^^

TAG ,
  1. 2014.07.21 14:15  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Kurien 2014.07.21 14:51 신고  댓글주소  수정/삭제

      예를 들어서 $sub 부분이 자유게시판, 자료실의 배열로 이루어져 있을 때, 만약 public을 사용하게 되면 $base->sub = 공지사항 등으로 수정이 되어버립니다.

      수정되는 것을 방지하기 위해서 private를 사용하는겁니다.
      딱히 중요한건 아니니 넘어가셔도 되긴 합니다.

      public과 private에 대한 자세한 내용은 http://kurien.tistory.com/303에 있습니다.

  2. sk 2015.03.31 00:22 신고  댓글주소  수정/삭제  댓글쓰기

    ㅠㅠ 이제 막 시작하는 학생입니다. ㅎㅎ
    혹시 $this->변수명 에서 this->를 쓰는 이유가 뭔가요?? 왜 $변수명 이라고 안쓰시나요
    찾아보려고 했는데 ㅎㅎ 구글에서는 안나오는것같아요 ㅎ휴ㅠ

    • Kurien 2015.03.31 00:26 신고  댓글주소  수정/삭제

      class 내부에서는 내부의 function, 변수를 나타내기 위해서 this를 쓰구요.
      ->를 하는 이유는 위치를 나타내는겁니다.
      this->a라는 건 class 내부에 a가 있다는 뜻이고,
      this->a->b란게 있다면 class에서 a 안에 있는 b를 나타내는겁니다.
      여기서 this 앞에만 $를 적는 이유는 단순히 없어도 식별히 가능하기 때문인거죠.

  3. 강좌감사 2015.06.05 00:05 신고  댓글주소  수정/삭제  댓글쓰기

    include.inc 를 빼놓으신거 같은데요. 넣지않았네요.?
    index 페이지에다 넣어줘야 되는거 아닌가요?
    그리고 다만들고보니 오른쪽 카테고리가 밑으로 밀려내려갔네요
    첫강좌부터 끝가지 다 따라했어요.

    • Kurien 2015.06.05 12:38 신고  댓글주소  수정/삭제

      include.inc가 아니라 layout.inc인데, 제가 1번 글을 쓸 때 include라고 적었었네요.
      지금은 수정했구요.
      우측 카테고리가 밑으로 내려간건 제가 어떻게 할 수 있는 부분이 아니네요.
      프로그램이라는게 작동 환경에 따라 잘못 되는 부분도 있거니와,
      작성자님께서 테스트 중인 화면이 어떤지를 모르니 제가 어떤 부분이 잘못되었다고 말씀 드릴 수 있는 상황도 아니구요.

  4. 궁금합니다ㅠ 2016.04.28 03:04 신고  댓글주소  수정/삭제  댓글쓰기

    레이아웃 디자인은 style과 index에서 하는거죠?
    그런데.. 맨 밑에 그림처럼 깔끔하게 나오질 않습니다... 따라했는데요.
    혹시 부트스트랩으로 하신건가요?
    똑같이 따라했는데 같은 디자인으로 나오지를 않아서요 ㅠ

    • Kurien 2016.04.28 11:25 신고  댓글주소  수정/삭제

      별도로 추가한 부분은 없구요.
      본문대로 하시면 문제 없이 똑같은 화면 보실 수 있으실껍니다.

      같은 화면이 안나온다면 안적은 부분은 없으신지, 브라우저 버전은 높은지, 오류가 발생한건 아닌지 등을 확인해보세요.