가상선택자를 사용해 backgroud 넓이와 높이 적용

가상선택자를 사용해 원하는 넓이와 높이를 calc로 만들어보자.

참고한 홈페이지 삼성반도체

<section>section</section>
<div  class="wrap">
    <div class="inner">
        <ul>
            <li>box</li>
            <li>box</li>
            <li>box</li>
            <li>box</li>
        </ul>
    </div>
</div>
<section>section</section>

/******* reset CSS *******/
* { margin: 0; padding: 0; box-sizing: border-box; }
li { list-style: none; }

/******* custom CSS *******/
section { width: 100%; height: 150px; background: #e9e9e9; }
.wrap { position: relative; padding: 50px 0; }
/* wrap::before를 이용하여 background-color를 만들어준다. */
.wrap::before {
    display: block;
    content: 'beforeBG';
    width: 100%;
    height: calc(100% - 150px);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
.inner { position: relative; max-width: 800px; margin: auto; }
.inner ul::after { display: block; content: ''; clear: both; }
.inner ul li:not(:first-of-type) { float: left; width: 32%; margin-left: 2%; height: 200px; background: yellowgreen; }
.inner ul li:nth-of-type(2) { margin-left: 0; }
.inner ul li:first-of-type { width: 80%; height: 200px; margin: 0 auto 20px; background: gold; }

파랑색(bottom: 0)을 기준으로 위에서 150px 떨어진 곳에 before이 적용된다.