나만의 포트폴리오 웹페이지 만들기 - 6(간단한 소개)
오늘은 포트폴리오 웹페이지 마지막 포스팅으로 제가 만든 페이지에 대한 간단한 설명을 하도록 하겠습니다.
■ 사이트 설명
- 서버 : Amazon Lightsail, CentOS(linux)
- 개발언어 : PHP7(CI3), javascript
- URL : http://portfolio.bygound.org
- github : https://github.com/beark93/Intro
■ 디자인
Window의 폴더 디자인을 참고하여 제작하였으며 색상은 눈이 아프지 않은 색들을 기준으로 선택하였습니다.
■ 주요 코드
- Controller
<?php
public function index()
{
// 생략 ...
foreach($contents as $idx => $item) {
$data['sub'][$idx] = $this->load->view('main/sub/sub' . $idx, array('contents' => $item), true);
}
$this->load->view('main/view',$data);
}각 탭별 view를 $data['sub'][1-4]으로 받아서 메인 view파일로 전송.
- View
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<!-- 생략 -->
<link rel="stylesheet" href="/assets/css/jquery.mCustomScrollbar.css" />
<script src="/assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
<!-- 생략 -->
</head>
<body>
<!-- 생략 -->
<div class='main-width'>
<div class='main-contents'>
<div class='tab-line'>
<?php foreach($title as $idx => $item) : ?>
<div class='tab tab<?= $idx ?>' idx='<?= $idx ?>'>
<font class='tab-name'><?= $item ?><font>
</div>
<?php endforeach; ?>
</div>
<div class='contents-line'>
<?php foreach($sub as $idx => $item) : ?>
<div class='contents contents<?= $idx ?> <?php if($idx == '1') : ?> active <?php endif; ?>' data-mcs-theme="minimal-dark" idx='<?= $idx ?>'>
<?= $item ?>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<script>
// Add TAB function
$('.tab').click(function () {
// clicked tab idx
var idx = $(this).attr('idx');
// checking variable (checking clicked tab idx is same displaying tab idx now)
var check = false;
$('.contents').each(function () {
if ($(this).hasClass('active')) {
if (idx != $(this).attr('idx')) {
$(this).removeClass('active');
} else {
check = true;
}
}
});
if (!check) {
$('.contents' + idx).addClass('active');
}
});
(function ($) {
$(window).on("load", function () {
$(".contents1").mCustomScrollbar();
$(".contents2").mCustomScrollbar();
$(".contents3").mCustomScrollbar();
$(".contents4").mCustomScrollbar();
});
})(jQuery);
</script>
</body>
</html>탭 내부 스크롤은 mCustomScrollbar를 사용 (http://manos.malihu.gr/jquery-custom-content-scroller/)
tab 클릭 시 contents 변화는 script $('.tab').click() 참고.
- 기타 주요코드
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>웹서버 내부 .htaccess파일 코드입니다.
CI의 주소는 domain.com/index.php/main/view 형식인데 여기서 index.php를 생략해주는 용도로 사용됩니다.
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
// setting default page main/view
$this->redirect('main/view');
}
// Add redirect fucntion 'aaa.bbb.ccc/' . $url
function redirect($url, $statusCode = 303) {
header('Location: ' . $url, true, $statusCode);
die();
}
}CI의 Welcome Controller입니다.
CI는 domain.com url로 접속 시 welcome페이지를 노출합니다.
따라서, 해당 Controller에서 main/view url로 리다이렉트 시켜 도메인만 입력 시 메인 페이지로 이동됩니다.
여기까지 포트폴리오 사이트에 대한 간단한 설명이었습니다.
아직 많은 내용이 있지 않지만 portfolio와 Introduce에 내용이 점점 늘어날 것이라 기대합니다.
추후에는 portfolio와 Introduce에 내용 추가 시 직접 view를 수정하지 않고
DB와 연동하여 내용 추가를 웹상에서 진행할 수 있도록 수정할 계획입니다.