CSS 모던한 그리드 레이아웃 예제

 

<div class="hub">

    <div class="text">

       허브<br>

       다양한 향기가 납니다.<br>

       하나씩 맡아보세요.

    </div>

</div>

 

.hub {

    margin: 30px;

    height: 40vh; /* vh 비율과 관련된 단위 */

    border-radius: 18px;

    background-image: url(https://cdn.pixabay.com/photo/2015/08/25/03/50/herbs-906140_1280.jpg);

    background-size: cover;

    background-position: center center;

    /* .text를 정렬하는 요소 */

    display: flex;

    align-items: flex-end;

    justify-content: center;

}

 

.text {

    background-color: white;

    border-radius: 18px;

    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);

   /* .text를 정렬하는 요소 */ 

    width: 80%;

    padding: 10px 10px;

    position: relative;

    top: 36px;

}