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

Project

2014. 6. 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>

<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>

</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()

{

}

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

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

먼저 $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 속성부분에 모두 있으므로 쉽게 찾으실 수 있을껍니다.

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

결과물입니다.

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

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

오늘은 여기까지네요.

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

저작자표시 비영리 변경금지

'Project' 카테고리의 다른 글

5. PHP 홈페이지 만들기 프로그램 메뉴 1 (6)	2014.07.07
4. PHP 홈페이지 만들기 회원가입, 로그인 작성 (37)	2014.07.04
3. PHP 홈페이지 만들기 사이드바 작성 (4)	2014.07.02
1. PHP 홈페이지 만들기 레이아웃 구상 및 작성 (22)	2014.06.29
PHP로 홈페이지 하나 만들어볼 생각입니다. (0)	2014.06.28

Kurien's Blog