로마장군의 블로그

[PHP] 디렉토리가 존재하는지, 쓰기권한이 있는지 미리 검사

1. 디렉토리가 있는지 검사한다.

2. 디렉토리에 쓰기권한이 있는지 검사한다.


$dir = "/home/www/dir/upload";
if(is_dir($dir)==false) {
    echo "디렉토리가 존재하지 않습니다."; exit;
}
if(is_writable($dir)==false) {
    echo "디렉토리에 쓰기권한이 없습니다."; exit
}

인스타 모음.link

인스타 보물창고 모음.link

[CSS] 연속된 div, li 등에 테두리 보이기 (border 겹치기 문제를 해결)

box-shadow: h-offset(오른쪽) v-offset(아래쪽) blur spread color;
box-shadow:1px 0 0 0 #aaaaaa; [오른쪽 1px 효과)
box-shadow:0 1px 0 0 #aaaaaa; [아래쪽 1px 효과)
inset 값이 주어진 경우는 안쪽, 즉 반대가 된다.
box-shadow:1px 0 0 0 #aaaaaa inset; [왼쪽 1px 효과)
box-shadow:0 1px 0 0 #aaaaaa inset; [윗쪽 1px 효과)


<style type="text/css">
#block-wrap { width:600px; }
#block-wrap * { box-sizing:border-box; }
ul.menu { margin:0; padding:0; }
ul.menu li { list-style:none; float:left; box-shadow:1px 0 0 0 #aaa, 0 1px 0 0 #aaa, 1px 0 0 0 #aaa inset, 0 1px 0 0 #aaa inset, 1px 1px 0 0 #aaa; }
ul.menu li.on { background:#1772a8; }
ul.menu li a { display:block; padding:10px 30px; text-decoration:none; color:#000000; }
ul.menu li.on a { color:#ffffff; }
</style>


<div id="block-wrap">
    <ul class="menu">
        <li><a href="#">전체 보기</a></li>
        <li class="on"><a href="#" class="on">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
        <li><a href="#">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
        <li><a href="#">대한민국</a></li>
        <li><a href="#">미국</a></li>
        <li><a href="#">중국</a></li>
        <li><a href="#">일본</a></li>
        <li><a href="#">러시아</a></li>
    </ul>
</div>

추가 li에 background 색상을 지정하면 top과 left에 boder 효과가 사라진다.
이 경우는 li에 padding:1px 0 0 1px 주면 해결

[jQuery][CSS] 간단한 모달Modal 열기


<div id="js-intro">
    <div class="inner">모달창</div>
</div>


#js-intro { display:none; position:absolute; z-index:99998; top:0; left:0; background:rgba(0,0,0,0.5); text-align:center; }
#js-intro .inner { display:none; position:relative; z-index:99999; width:400px; height:200px; margin:0 auto; text-align:center; }


$(document).ready(function(){
    $("#js-intro").appendTo("body");
    //화면의 높이와 너비를 구한다.
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    var winHeight = $(window).height(); // inner 위치설정용

    //마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채운다.
    $('#js-intro').css({'width':maskWidth, 'height':maskHeight});

    //애니메이션 효과 - 천천히 나타남
    $('#js-intro').fadeIn(800, function(){
        $('#js-intro .inner').fadeIn(1000).css({'top':(winHeight/2)+'px', 'transform':'translateY(-50%)'});
    });

    // 닫기
    $("#js-intro .inner").click(function(){
        $('#js-intro').hide();
    });
});

모달창 : 클릭하면 닫힙니다.

[CSS] 세로 가운데 정렬 Vertical-align:center


<div id="box">
    <div id="text">가운데 정렬</div>
</div>


#box { width:400px; height:300px; background:#f0e0e0; }
#text { position:relative; top:50%; transform:translateY(-50%); text-align:center; }

가운데 정렬

[jQuery] [swiper] 스와이프 이미지 슬라이드


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>

    <div class="swiper-container">

        <ul class="swiper-wrapper">

            <li class="swiper-slide" style="background:url(/images/main/visual01.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual03.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual02.jpg) center center / cover no-repeat;" data-left="0"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual04.jpg) center center / cover no-repeat;" data-left="1"></li>
            <li class="swiper-slide" style="background:url(/images/main/visual05.jpg) center center / cover no-repeat;" data-left="1"></li>
        </ul>

        <div class="swiper-pagination"></div>
        <!-- navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>


    $(document).ready(function(){
        //initialize swiper when document ready
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
            on: {
                init: function(){
                    //console.log("slide init");
                    //console.log(this.$wrapperEl[0]);
                    var slide = $(this.$wrapperEl[0]).find(".swiper-slide-active");
                    var bg = slide.data("left");
                    if(bg=="1") {
                        $("header").addClass("bg-white");
                    } else {
                        $("header").removeClass("bg-white");
                    }
                },
            },
        });

        mySwiper.on('slideChange', function(){
            //console.log("slide change");
            //console.log(mySwiper.realIndex);
            var r_idx = mySwiper.activeIndex;
            var slide = mySwiper.slides[r_idx];
            //console.log(mySwiper.$wrapperEl);
            //console.log($(slide));
            var bg = $(slide).data("left");
            //console.log("r_idx=" + r_idx + ", bg=" + bg + ", src=" + $(slide).css("background"));
            if(bg=="1") {
                $("header").addClass("bg-white");
            } else {
                $("header").removeClass("bg-white");
            }
        });
    });

단순히 슬라이드를 동작시키려면 아래와 같이 하면 된다.


    $(document).ready(function(){
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            //direction: 'vertical',
            effect: 'fade',
            speed: 2500,
            crossEffect: { crossFade: true },
            autoplay: true,
            loop: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-container .swiper-pagination',
                clickable: true,
            },
        });

    });

[mysql] INSERT NOT EXISTS 중복 방지 삽입

`hash` 칼럼이 중복된 경우 INSERT 하지 않는다.


INSERT INTO `data_test` (`name`, `hash`) 
SELECT * FROM (SELECT 'aaa','1') AS `TMP`
WHERE NOT EXISTS (
    SELECT `hash` FROM `data_test` WHERE `hash`='1'
) LIMIT 1