Chap 11.
진행하는 동안 보이는 페이지의 모습이 바뀔 순간이 왔습니다. 사이트 전체에 적용될 CSS 파일을 작성해서 적용을 할 수도 있겠습니다만, 많은 시간과 노력이 필요합니다.
그래서!!
잘 만들어져있는 CSS 파일을 이용하도록 하겠습니다.
트위터 개발자들이 만들어서 배포하고 있는 부트스트랩 이라는 CSS 프레임워크가 있습니다.
아래 사이트에서 다운받을 수 있습니다.
오늘 현재 버전 2.2.2 가 나왔네요.
http://twitter.github.com/bootstrap
악! 주소가 바뀌었는데, 수정을 못 하고 있었네요..
부트스트랩 주소입니다.
http://getbootstrap.com
다운받아서 압축을 해제하면 bootstrap 디렉토리아래에 css 디렉토리, img 디렉토리, js 디렉토리가 있습니다.
bootstrap 디렉토리 전체를 www 디렉토리 안에 업로드를 합시다.
www/bootstrap/css ... 이렇게 위치가 되겠죠.
그리고 나서, 이 css 파일을 이용하기 위해서 <head> 태그 안에 아래와 같이 작성을 해 줘야 합니다. header.php 를 수정해야겠군요.
<link href="./bootstrap/css/bootstrap.css" rel="stylesheet">
이제 모든 페이지에서 부트스트랩을 이용할 수 있습니다.
부트스트랩은 많은 것이 가능합니다. 사이트에서 살펴보면 자바스크립트를 이용한 재미난 기능들도 많습니다. 따로 부트스트랩 카테고리를 만들어서 기능별로 하나씩 포스팅을 할 계획입니다. 근데, 너무나 쉽게 되어있어서...ㅋㅋ
그럼.. 부트스트랩 CSS가 제대로 적용이 되는지 확인해보겠습니다.
header.php 에 위와 같이 해 두고, index.php 의 회원가입 링크나 로그인 링크를 수정해 보죠.
<a href="./member/signup.php">회원가입</a>
현재 위처럼 되어있는 <a> 태그에 아래와 같이 클래스를 먹여줍시다.
<a href="./member/signup.php" class="btn">회원가입</a>
부트스트랩 적용 전에 아래처럼 보이던 index.php가
적용 후, 아래와 같이 포맷팅이 되었습니다.
단순히 <a>태그에 btn 클래스를 적용하는 것만으로 '회원가입'과 '로그인' 링크가 기본 버튼 모양으로 표시됩니다.
부트스트랩이 적용되는 것은 확인했습니다.
이제 첫페이지 레이아웃을 간단히 구현해 봅시다.
기본 프레임은 부트스트랩을 이용하고, 사이트에 차별화된 내용은 추가적으로 작성해야겠습니다.
이름은 main.css 라고 붙입시다.
header.php 에 아래 내용을 추가하고, www 안에 main.css 파일을 만들어줍시다.
<link href="./main.css" rel="stylesheet">
CSS파일의 첫줄에는 아래 내용을 기록해서 인코딩이 UTF-8 임을 알려줍니다.
@charset "utf-8";
앞서 <div>에 header, content, footer 라고 클래스를 먹여놓은 것이 있었습니다.
해당 클래스를 main.css 에 설정을 해봅시다.
| @charset "utf-8"; .header { border: 4px solid #f00; margin-bottom: 10px; } .content { border: 4px solid #f00; } .footer { margin-top: 10px; border: 4px solid #f00; } |
첫페이지가 위의 모습으로 나타나내요.
앞으로 CSS도 카테고리를 만들어서 공부될만한 것들 올려보겠습니다.
오늘은 여기까지 하겠습니다. ㅎㅎ
이상!
'PHP 게시판 만들기' 카테고리의 다른 글
| 13. php로 기초적인 게시판 만들기 - list.php (33) | 2012.12.17 |
|---|---|
| 12. php로 기초적인 게시판 만들기 -write.php (8) | 2012.12.17 |
| 10. 화면에 표시되는 내용 구분하기 (3) | 2012.12.13 |
| 9. 중복 코드는 하나의 파일로 작성해서 포함시키기 (9) | 2012.12.13 |
| 8. session으로 로그인 정보 유지시키기 (33) | 2012.12.13 |
댓글