[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; }

가운데 정렬