CSS의 여러가지 레이아웃

웹 디자인 기능사

이번에는 CSS flaot과 inline-block을 이용한 여러가지 레이아웃과 이론에 대하여 소개합니다.

 

Float과 inline-block 이슈

이번 섹션에서는 아래의 CSS 코드를 공통으로 사용할 것입니다.

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.box {
    width: 500px;
    border: 1px solid #000;
}

.mini {
    width: 50px;
    height: 50px;
    background: #6ff;
}

.ib {
    display: inline-block;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
}

.clear_wrap:after {
    content: "";
    display: block;
    clear: both;
}

 

float과 display:inline-block에 대한 기본적인 이해

<!-- mini는 현재 display:block;입니다. 따라서 그냥 줄바꿈 됩니다. -->
<div class="box">
    <div class="mini"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
</div>

<!-- mini에 inline-block을 적용하면 lorem 앞에 붙게됩니다. -->
<div class="box">
    <div class="mini ib"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
</div>

<!-- float를 적용하면 글자들과 섞이게 됩니다. 원래 float은 이러한 용도로 만들어졌습니다. -->
<div class="box">
    <div class="mini fl"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
</div>

<!-- float를 적용하면 글자들과 섞이게 됩니다. 원래 float은 이러한 용도로 만들어졌습니다. -->
<div class="box">
    <div class="mini fr"></div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
</div>

<!--
  float를 적용하면 글자들과 섞이게 됩니다. 원래 float은 이러한 용도로 만들어졌습니다.
  그런데 이러한 증상 때문에 float을 배울 때 어려움을 겪게 됩니다. 
-->
<div class="box">
    <div class="mini fl"></div>
    <div class="mini fr"></div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
    </div>
</div>

 <!-- 따라서 float 이후에 clear를 해주면 줄바꿈이 되고, float 영역을 제대로 인식할 수 있게 됩니다. -->
<div class="box">
    <div class="mini fl"></div>
    <div class="mini fr"></div>
    <div class="clear"></div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
    </div>
</div>

 <!-- 다음과 같이 clear_wrap 이라는 클래스를 정의 후, 해당 요소로 float을 감싸면 저절로 줄바꿈이 됩니다. -->
<div class="box">
    <div class="clear_wrap">
        <div class="mini fl"></div>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
    </div>
</div>

 <!-- 다음과 같이 clear_wrap 이라는 클래스를 정의 후, 해당 요소로 float을 감싸면 저절로 줄바꿈이 됩니다. -->
<div class="box">
    <div class="clear_wrap">
        <div class="mini fr"></div>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
    </div>
</div>

 <!-- 다음과 같이 clear_wrap 이라는 클래스를 정의 후, 해당 요소로 float을 감싸면 저절로 줄바꿈이 됩니다. -->
<div class="box">
    <div class="clear_wrap">
        <div class="mini fl"></div>
        <div class="mini fr"></div>
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem facilis, cupiditate minima eum? Eum officia quaerat nemo quod non in distinctio esse rerum asperiores. Repudiandae officiis laborum, impedit sit nisi.
    </div>
</div>

위의 내용들을 이해 했다면, 다음 링크를 참고해주세요

 

float과 inline-block으로 만드는 box-list

inline-block box list

<div class="box">
    <div class="mini ib"></div>
    <div class="mini ib"></div>
    <div class="mini ib"></div>
    <div class="mini ib"></div>
</div>
<div class="box">
    <div class="mini ib"></div><!-- 
     --><div class="mini ib"></div><!-- 
     --><div class="mini ib"></div><!-- 
     --><div class="mini ib"></div>
</div>
<div class="box">
    <div class="mini ib vm"></div><!-- 
     --><div class="mini ib vm"></div><!-- 
     --><div class="mini ib vm"></div><!-- 
     --><div class="mini ib vm"></div>
</div>

inline-block을 적용하게 되면 이제 요소들이 가로로 나열되게 됩니다. 그런데 inline-block은 일종의 글자이기 때문에 엔터 문자를 없애주지 않으면 레이아웃이 흐트러지게 됩니다.

그리고, inilne-block을 적용했을 때 레이아웃이 딱 맞게 떨어지지 않는 현상이 발생합니다. 이 때 vertical-align을 조정해주면 됩니다.

 

float box list

<div class="box">
    <ul>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
    </ul>
</div>

float의 부모가 높이를 가지지 않는 것을 확인할 수 있습니다. clear를 해주지 않으면 이런 현상이 발생합니다.

다음과 같이 수정해보겠습니다.

<div class="box">
    <ul style="border:2px solid #f00;">
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
    </ul>
    <div>
        Lorem ipsum dolor sit amet,
    </div>
</div>

텍스트가 줄바꿈이 되는 것이 아니라 박스 요소 옆으로 나열 되는 것을 확인할 수 있습니다.

ul에 clear_wrap을 추가 후 확인해보면

<div class="box">
    <ul class="clear_wrap" style="border:3px solid #f00">
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
    </ul>
    <div>
        Lorem ipsum dolor sit amet,
    </div>
</div>

이렇게 줄바꿈이 되고, float 요소가 높이를 제대로 가지는 것을 확인할 수 있습니다.

float은 기본적으로 글자들과 섞여서 나오도록 만들어져 있습니다. 때문에 clear를 하지 않으면 높이를 제대로 인식하지 못하고, 이러한 현상을 어떻게 해결해야 하는 지 모르는 경우 모든 태그에 float을 적용하여 레이아웃을 구성하는 경우가 빈번합니다 ( 사실 저도 CSS를 처음할 때 그런 식으로 했었습니다... div{float:left;width:100%;height:500px;} 부들부들 )

 

더 쉽게 해결하려면 overflow:hidden;을 적용하면 됩니다.

<div class="box">
    <ul style="border:3px solid #f00; overflow:hidden;">
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
        <li class="mini fl"></li>
    </ul>
    <div>
        Lorem ipsum dolor sit amet,
    </div>
</div>

이러면 clear를 하지 않아도 너비를 제대로 인식합니다.

 

float과 inline-block을 이용한 레이아웃 가운데 정렬

float과 inline-block 조합으로 만들기

/* css */
* {margin: 0;padding: 0;}
ul, li { list-style: none; }
a {text-decoration:none;}
.gnb {text-align: center;}  /* inline-block 요소를 가운데 정렬 한다*/
.gnb ul { display: inline-block; }  /* float을 inline-block으로 감싼다 */
.gnb ul:after {content:"";display:block;clear:both;}
.gnb li {float:left;margin-right:1px;}
.gnb a { display: block; padding:15px 40px; background:#09F; color:#FFF;}
<!-- html -->
<div class="gnb">
    <ul>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
    </ul>
</div>

총 3단계의 구조를 가지고 있는 것을 확인할 수 있습니다.

  1. float을 display:inline-block;으로 감싼다.
  2. 그리고 다시 inline-block 요소를 block 요소로 감싼다.
  3. block 요소에 가운데 정렬을 한다.

이렇게 하면 결론적으로 inline-block은 글자처럼취급을 받고,
.gnb 영역 에서 가운데 정렬이 되는 것입니다.

 

inline-block만 이용하여 만들어 보기

float말고 inline-block만 이용하며 만들 수도 있습니다. 그런데 inline-block의 경우 엔터(enter)문자를 공백으로 인식하는 문제 때문에 레이아웃이 깨지는 현상이 발생합니다. 그럴 때 해결하는 방법은 대략 3가지 정도 있습니다.

엔터(enter) 문자를 주석처리 한다.

/* css */
* {margin: 0;padding: 0;}
ul, li { list-style: none; }
a {text-decoration:none;}
.gnb ul { text-align:center; }
.gnb li {display:inline-block;margin-right:1px;}
.gnb a { display: block; padding:15px 40px; background:#09F; color:#FFF;}
<!-- html -->
<div class="gnb">
    <ul>
        <li><a href="#">MENU</a></li><!-- 
     --><li><a href="#">MENU</a></li><!-- 
     --><li><a href="#">MENU</a></li><!-- 
     --><li><a href="#">MENU</a></li>
    </ul>
</div>

엔터(enter) 문자의 글자 크기를 0px로 만든다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.gnb {
    tex-align: center;
}

.gnb ul {
    text-align: center;
    font-size: 0;       /* 폰트 사이즈를 0으로 */
}

.gnb li {
    display: inline-block;
    margin-right: 1px;
    font-size: 15px;    /* 현재 0이므로 15px로 다시 바꿔줌 */
}
/* 따라서 ul의 공백만 font-size:0이 적용됨 */
.gnb a {
    display: block;
    padding: 15px 40px;
    background: #09F;
    color: #FFF;
}
<div class="gnb">
    <ul>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
        <li><a href="#">MENU</a></li>
    </ul>
</div>

태그를 다음 line에서 닫아준다.

* {margin: 0;padding: 0;}
ul, li { list-style: none; }
a {text-decoration:none;}
.gnb ul { text-align:center;}
.gnb li {display:inline-block;margin-right:1px;}
.gnb a { display: block; padding:15px 40px; background:#09F; color:#FFF;}
<div class="gnb">
    <ul>
        <li
        ><a href="#">MENU</a></li><li
        ><a href="#">MENU</a></li><li
        ><a href="#">MENU</a></li><li
        ><a href="#">MENU</a></li>
    </ul>
</div>

세로 가운데 정렬 ( Height Middle )

line-height를 이용한 정렬

* {margin: 0;padding: 0;}
ul, li { list-style: none; }
a {text-decoration:none;}
.box-middle-wrap{border:1px solid #000;width:300px;height:300px;margin:0 auto;text-align:center;line-height:300px;}
.box{display:inline-block;line-height:160%;border:1px solid #000;vertical-align:middle;}
<div class="box-middle-wrap">
    <div class="box">
        <p>세로로</p>
        <p>가운데 정렬</p>
    </div>
</div>

block 요소에 line-height를 높이와 똑같이 적용하면, 기본적으로 세로 가운데 정렬이 됩니다.
이것을 응용하여 block 요소의 자식을 inline-block으로 만든 후, line-height를 주게 되면 가운데 정렬이 됩니다.
이 때 자식 요소의 inline-block 요소에는 별개의 line-height를 적용하여 오류를 방지합니다.

그리고 line-height 요소에 vertical-align을 적용해주지 않으면 가운데에서 살짝 벗어나보이는 효과가 생깁니다.

 

inline-block과 vertical-align:middle;을 이용한 정렬

* {
    margin: 0;
    padding: 0;
}
ul, li {
    list-style: none;
}
a {
    text-decoration: none;
}
.box-middle-wrap {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    text-align: center; /* 자식이 inline-block일 때, text-ailgn:center를 해주면 가로 가운데 정렬 */
}
.box {
    border: 1px solid #000;
}
span.middle {
    display: inline-block;  /* 자기 자신을 middle로 만든 후*/
    width: 0;       /* 가로 너비를 0으로 하여 보이지 않게 합니다.*/
    height: 100%;       /* 세로 너비는 부모 크기 만큼 으로 하여*/
    vertical-align: middle; /* 자신을 기준으로, 즉 100% 기준으로 정렬합니다. */
}
span.middle+* {
    display: inline-block;  /* 그 후 옆 요소에도 inline-block을 적용하고 */
    vertical-align: middle; /* 똑같이 middle을 적용하면, 세로 가운데 정렬 완성*/
}
<div class="box-middle-wrap">
    <span class="middle"></span><div class="box">
        <p>세로로</p>
        <p>가운데 정렬</p>
    </div>
</div>

span과 div를 붙여 쓴 이유는 공백 때문입니다. 붙여 쓰지 않으면 공백 때문에 .box의 너비가 100%일 때 줄바꿈이 도비니다.

 

before에 inline-block을 적용하기

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.box-middle-wrap {
    border: 1px solid #000;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    text-align: center;
}

.box {
    border: 1px solid #000;
}

.child-middle:before {      
    content: "";        /* 따로 태그를 쓰지 않고 before가 span.middle 역할을 합니다.*/
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}

/**
 * :before + * 같은 선택자는 적용되지 않기 때문에
 * 다음과 같이 first-child에 적용합니다.
 **/
.child-middle>*:first-child {
    display: inline-block;
    vertical-align: middle;
}
<div class="box-middle-wrap child-middle">
    <div class="box">
        <p>세로로</p>
        <p>가운데 정렬</p>
    </div>
</div>

세로 정렬 응용

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.box-middle-wrap {
    border: 1px solid #000;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    text-align: center;
}

.mini {
    float: left;
    width: 75px;
    height: 75px;
    border: 1px solid #000;
    margin: 0 5px;
}

span.middle {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

span.middle+* {
    display: inline-block;
    vertical-align: middle;
}
<div class="box-middle-wrap">
    <span class="middle"></span><div class="box">
        <div class="mini"></div>
        <div class="mini"></div>
        <div class="mini"></div>
        <div class="mini"></div>
    </div>
</div>

이와 같이 사용할 수도 있습니다. list 요소를 부모로 감싼 후 가로 세로 가운데 정렬을 해준 것입니다.

양 끝 정렬 ( between )

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

.header {
    border-bottom: 1px solid #000;
    height: 100px;
    margin: 0 auto;
    max-width: 800px;
}

.header>div {
    width: 100%;
}

.header>div:after {
    content: "";
    display: block;
    clear: both;
}

.logo {
    float: left;
    line-height: 100px;
}

.gnb {
    float: right;
    height: 100px;
}

.gnb li {
    float: left;
    padding: 15px 40px;
    background: #aaf;
    margin-left: 1px;
}

span.middle {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

span.middle+* {
    display: inline-block;
    vertical-align: middle;
}
<div class="header">
    <div class="clear">
        <div class="logo">LOGO</div>
        <div class="gnb">
            <span class="middle"></span><ul class="clear">
                <li>MENU1</li>
                <li>MENU2</li>
                <li>MENU3</li>
                <li>MENU4</li>
            </ul>
        </div>
    </div>
</div>

float left, right와 세로 정렬을 이용하여 flex의 justify-content:space-between;과 align-items:center; 효과를 구현한 것입니다.

 

높이에 따른 너비 변화 효과

margin과 padding은 width를 상속받는다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.box {
    border: 1px solid #000;
}

.box.small {
    width: 100px;
    height: 50px;
}

.box.mini {
    width: 200px;
    height: 100px;
}

.box.default {
    width: 400px;
    height: 200px;
}

.box.big {
    width: 800px;
    height: 400px;
}

/**
  * margin과 padding의 퍼센트를 사용 하면, 부모의 width 너비를 상속받습니다.
  * 따라서 padding-top을 준 후, 자식에게 absolute 속성을 주면 가로세로를 똑같은 비율로 만들 수 있습니다.
 **/
.height-ratio {
    position: relative;
    padding-top: 40%;   /* margin과 padding의 퍼센트는 부모의 width에 영향을 받습니다.*/
    width: 40%;
}

.height-ratio>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #09F;
    color: #FFF;
}

.height-ratio>div:before {
    content: "test";
}
<div class="box small">
    <div class="height-ratio">
        <div></div>
    </div>
</div>
<div class="box mini">
    <div class="height-ratio">
        <div></div>
    </div>
</div>
<div class="box default">
    <div class="height-ratio">
        <div></div>
    </div>
</div>
<div class="box big">
    <div class="height-ratio">
        <div></div>
    </div>
</div>

padding-top, margin-top은 부모의 width 너비를 상속받아 사용합니다.
position의 top과 bottom 속성은 height 너비를 상속받아 사용합니다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.box {
    border: 1px solid #000;
}

.height-ratio:after {
    content: "";
    display: block;
    clear: both;
}

.height-ratio>li {
    position: relative;
    padding-top: 20%;
    width: 20%;
    margin: 2.5%;
    float: left;
}

.height-ratio>li>div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #09F;
    color: #FFF;
}

.height-ratio>li>div:before {
    content: "test";
}
<div class="box">
    <ul class="height-ratio">
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
        <li><div></div></li>
    </ul>
</div>

이 상태에서 사이트의 너비를 줄이면 아래와 같은 현상을 확인할 수 있습니다.
사이트의 너비에 따라서 높이도같이 변하는 레이아웃을 만든 것입니다.

가로세로 너비에 따른 비율변환

 

새로운 단위 : vw ( view width ) 를 이용할 수도 있습니다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.height-ratio:after {
    content: "";
    display: block;
    clear: both;
}

/**
 * 100vw는 브라우저의 가로 너비입니다.
 * 1vw는 브라우저 가로너비의 1/100 입니다.
 * 높이에 vw를 적용하면 브라우저의 가로너비에 영향을 받게 됩니다.
 **/
.height-ratio>li {
    position: relative;
    height: 20vw;
    width: 20vw;
    margin: 2.5vw;
    float: left;
    background: #09F;
    color: #FFF;
}
<div class="box">
    <ul class="height-ratio">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
</div>

이렇게 작성해도 똑같은 효과를 볼 수 있습니다.

 

순수하게 CSS로 만드는 레이어(모달) 팝업

css에는 :target 이라는 가상 셀렉터가 있습니다.
a href="#layer" 를 클릭하면 id가 layer인 태그에 target 속성이 활성화 됩니다. 이것을 이용하여 레이어 팝업을 만들 수 있습니다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.layer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow: auto
}
/**
 * 주소에서 layer를 가르키고 있으면 target이 활성화되고, layer 팝업이 오픈됩니다.
 **/
.layer:target {
    display: block;
}

.layer>div {
    background: #f5f5f5;
    margin: 10px;
    width: 50%;
    height: 50%;
    position: relative;
    padding: 20px;
    text-align: left;
}

.layer .close {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    color: #FFF;
    background: #09F;
    padding: 5px 10px;
}

span.middle {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

span.middle~* {
    display: inline-block;
    vertical-align: middle;
}
<a href="#layer">레이어 오픈</a>
<div class="layer" id="layer">
    <span class="middle"></span><div class="box">
        <a href="#" class="close">X</a>
        <div class="layer-content">
            popup
        </div>
    </div>
</div>

span.middle을 이용하여 세로에서 가운데 정렬이 되도록 만들었습니다.

 

응용 1) 레이어 스크롤

    <div class="layer" id="layer">
        <span class="middle"></span><div class="box">
            <a href="#" class="close">X</a>
            <div class="layer-content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui voluptas doloribus ut repellendus omnis possimus ipsa recusandae, iusto aspernatur eum unde. Esse similique, qui quo cupiditate a quasi ducimus corporis accusantium saepe tempore sed soluta? Provident quidem architecto modi sequi ut, molestiae excepturi. Neque ex corporis adipisci quis necessitatibus est nihil laboriosam doloremque, tempora omnis aspernatur sapiente nam ea hic doloribus repudiandae earum fugit odit ratione asperiores deserunt nesciunt minima placeat, sed! Architecto voluptates molestias, neque rem quas eius sed magnam autem sint ea culpa. Similique neque eligendi, porro optio nostrum pariatur cum iste, sint? Quaerat quasi maxime reprehenderit, obcaecati architecto quis expedita laboriosam iusto repudiandae hic perferendis cumque esse vitae, dolorem, similique est beatae. Ipsam, modi deleniti qui vero recusandae iusto rerum debitis et dolores incidunt minus veritatis sed possimus! Ducimus fugit doloribus minus rerum voluptatibus nemo, repellendus corporis quas delectus, iusto quod provident explicabo aut illum at excepturi, eos, eius asperiores omnis tempora quia vitae harum accusamus? Eveniet ullam harum, quisquam consequuntur, aliquam nihil eum, impedit perferendis delectus nam dignissimos culpa rem repellendus nobis. Minima consequatur consectetur nesciunt in adipisci, explicabo aspernatur, asperiores quo dolores ducimus unde ratione porro optio. Nobis impedit nulla, facere maiores qui quo vero, perferendis esse distinctio quis ut obcaecati aperiam. Expedita asperiores, eaque molestias dicta obcaecati fugiat unde magni voluptate. Consequuntur temporibus, nobis praesentium consequatur possimus dolorem ab repellat, corporis ullam aliquam? Odio aspernatur aut eligendi aliquid ducimus esse architecto, pariatur. Qui, soluta voluptatibus? Ut perspiciatis ad beatae, quidem, quos dolorem atque nihil inventore quas, at adipisci voluptas assumenda ratione repellat ab tempora eveniet nulla! Consequatur ex reiciendis vel molestiae, accusantium cum nisi dolore ab voluptatum! Iste eligendi, dicta minima adipisci architecto, dolorem exercitationem earum nobis, consequuntur eum unde ipsam nulla amet eius. Tempora repellat quod voluptatum, alias suscipit neque asperiores possimus aspernatur voluptate exercitationem minus inventore hic excepturi ex expedita cumque perferendis vitae porro harum omnis unde accusamus earum. Iste aliquam ducimus voluptas sapiente omnis libero necessitatibus cupiditate praesentium, earum beatae, aspernatur eius soluta sint doloremque labore. Quae unde assumenda dicta saepe excepturi fuga ex suscipit rem ipsa incidunt repellendus esse obcaecati, animi nam, ab qui impedit, vel illo porro. Magni enim dicta similique tempora aliquam mollitia hic, ex vel provident, autem aliquid, nobis quod laborum distinctio animi nemo velit, quibusdam omnis molestias officiis natus laboriosam nisi! Eveniet doloribus quos aliquid ullam rem placeat maiores eaque, natus necessitatibus, molestiae veniam provident quae maxime vitae. Sequi voluptas laudantium reiciendis inventore beatae quibusdam, fugit repellat dolore sunt, ipsam aut dolores dicta natus, maiores necessitatibus fuga pariatur harum in, dolorum quidem nisi obcaecati sit quo itaque. Tenetur voluptatem corrupti nesciunt neque accusamus. Assumenda impedit quo fugiat nostrum autem cumque quis minima minus, eligendi quos non accusamus harum placeat repellendus dicta, provident aliquam ad. Esse similique alias odio iste perferendis natus veniam exercitationem quibusdam neque soluta, voluptatem ducimus quas saepe expedita maxime, repellendus doloribus molestiae deleniti dolorem impedit. Excepturi repellat quibusdam fugit explicabo, voluptas minus, ipsum tempora ab commodi eos sit a cum ducimus placeat reiciendis officiis ipsa quisquam. Iste exercitationem laudantium, possimus doloribus rem, quisquam? Perferendis unde dolorum dignissimos labore praesentium nihil corrupti, doloremque quam esse consectetur maiores earum, deserunt quis? Vero deserunt ex voluptatem, saepe mollitia unde animi ratione, debitis consequuntur officiis, atque fugit obcaecati error quidem sint, adipisci numquam odit? Accusamus maxime quia velit, asperiores cupiditate sunt. Omnis quam temporibus provident, labore quas eaque possimus repudiandae inventore adipisci harum numquam nostrum molestias enim laudantium voluptates aperiam maiores similique error, reiciendis, id. Voluptatem, perferendis magnam et impedit officia, eligendi veniam unde tempora, corrupti voluptates quis. Aut similique voluptate necessitatibus iusto impedit, ex corrupti doloremque doloribus dolor neque! Necessitatibus esse odit illo cupiditate sit laborum minima dolore, iste accusamus vitae natus, velit temporibus eligendi officiis, voluptatum! Quia dicta, sunt blanditiis voluptas quaerat laboriosam ducimus voluptatum harum facere excepturi cumque expedita, sapiente, nemo corporis iure aliquam beatae dignissimos odio exercitationem error maxime. Officia soluta repudiandae, et corrupti natus a consequatur quia accusantium recusandae earum enim facilis ea nihil. Nemo facilis odio vel beatae fuga, nulla illum officia, rem architecto modi est facere corporis enim, similique cum! Dolore in fugit labore perspiciatis consectetur nobis facilis iusto possimus odio saepe quod perferendis unde, eaque et maxime qui deserunt voluptas laboriosam sapiente. Alias provident libero non exercitationem, pariatur saepe harum dignissimos error eos? Suscipit labore ab in iure quidem quibusdam, molestias nostrum vero. Reiciendis pariatur optio aliquid facere explicabo molestiae dolorum tempore, eos soluta rem magnam delectus alias repellat odit facilis quam. Sequi optio est fugiat iure eos molestiae assumenda pariatur placeat aspernatur veritatis excepturi, nostrum doloribus laborum facilis suscipit? Incidunt porro impedit ullam mollitia perspiciatis optio quaerat repudiandae deleniti minus, quibusdam similique dolorum excepturi veritatis explicabo et iure eos harum tempora illum expedita unde aspernatur facere assumenda earum. Odio maiores excepturi ducimus voluptatum quod placeat vel, magni enim natus cumque, deleniti odit laboriosam molestias officiis eos! Nostrum eos, totam reiciendis repellendus dicta, aliquid, sequi dolores quisquam possimus atque officia! Fuga facere at quod architecto, praesentium maxime dolor sit cum, voluptate exercitationem animi nihil ea nesciunt eum maiores voluptatum repellendus quaerat distinctio qui. Quia, sunt pariatur officiis explicabo tempora repudiandae magnam porro ex modi debitis laudantium vitae nulla similique quidem eos reiciendis, dolores cum neque commodi esse. Ducimus ex magni, voluptate optio suscipit repellendus officiis ea eos tenetur doloremque commodi ipsa facilis necessitatibus repellat! Consequuntur vitae, impedit aliquam nemo quos rem facilis maiores esse harum expedita. Veritatis quibusdam, beatae iste numquam fugit aut reprehenderit, delectus adipisci unde eum omnis asperiores. Asperiores debitis natus reprehenderit ex sapiente voluptatibus aliquid labore error magnam et, animi vitae totam harum illum nostrum veritatis aliquam incidunt. Unde recusandae ex libero ipsa culpa in debitis dolorem. Velit assumenda, officia maxime voluptatem dolore incidunt voluptate illum hic officiis non fugit sit vero quae alias tenetur ab laboriosam, delectus maiores aperiam nobis eos commodi aliquam facere! Ut earum, fugiat aut rerum libero veritatis doloribus doloremque voluptatum quae debitis tempora ipsam sint, minus consectetur dolores commodi est ipsum reprehenderit eaque itaque placeat ab vitae repellendus mollitia magnam. Quibusdam.
            </div>
        </div>
    </div>

lorem을 이용하여 layer-content에 있는 내용을 늘렸습니다. 이 때 자연스럽게 스크롤이 생기는 효과를 만들 수 있습니다.

 

응용 2) 다수의 layer

여러개의 레이어 팝업이 필요할 때 다음과 같이 작성할 수 있습니다.

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

a {
    text-decoration: none;
}

.wrap ul {
    display: inline-block;
    border: 1px solid #000;
    padding: 20px;
}

.wrap ul:after {
    content: "";
    display: block;
    clear: both;
}

.wrap li {
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid #000;
}

.wrap li>a {
    display: block;
    height: 100px;
    color: #09F;
    transition: 0.3s;
}

.wrap li>a:hover {
    background: #f5f5f5;
}

.layer {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow: auto
}

.layer:target {
    display: block;
}

.layer>div {
    background: #f5f5f5;
    margin: 10px;
    width: 50%;
    position: relative;
    padding: 20px;
    text-align: left;
}

.layer .close {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    color: #FFF;
    background: #09F;
    padding: 5px 10px;
}

span.middle {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

span.middle~* {
    display: inline-block;
    vertical-align: middle;
}
<div class="wrap">
    <ul>
        <li>
            <a href="#layer1">iusto odit quos.</a>
            <div class="layer" id="layer1">
                <span class="middle"></span><div>
                    <a href="#" class="close">X</a>
                    <div class="layer-content">
                        mollitia ut consequatur. Dolor cupiditate ad illo sit temporibus, vero 
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#layer2">suscipit quasi optio!</a>
            <div class="layer" id="layer2">
                <span class="middle"></span><div>
                    <a href="#" class="close">X</a>
                    <div class="layer-content">
                        iste officiis, illum error laboriosam. At eveniet, cumque quae. Ducimus 
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#layer3">temporibus odio ut.</a>
            <div class="layer" id="layer3">
                <span class="middle"></span><div>
                    <a href="#" class="close">X</a>
                    <div class="layer-content">
                        architecto sunt eveniet commodi minima quia vitae quos dignissimos, numquam, 
                    </div>
                </div>
            </div>
        </li>
        <li>
            <a href="#layer4">laborum dolor magni!</a>
            <div class="layer" id="layer4">
                <span class="middle"></span><div>
                    <a href="#" class="close">X</a>
                    <div class="layer-content">
                        laudantium reiciendis consequatur quas illo quisquam. Iste unde vel ab 
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

이렇게 하면 편하게 레이어 팝업을 만들 수 있게 됩니다.

 

 

전체 결과물 다운로드 : css_pattern.zip