가변 그리드 (Fluid Grid)

가변 그리드 (Fluid Grid)

1. 가변 그리드

 - 가변적 : 객체 or 물체 or 사물이 늘어나거나 줄어들거나 성질이 변하는 것

 - 그리드 : 격자나 눈금 (웹에서의 그리드는 가로 or 세로 크기, 여백, 단 수 등 구조 설계를 위한 것을 뜻함)

 

2. 가변 그리드 공식

 - 정확한 가변 크기의 박스를 만들기 위해선, 공식이 존재

    → 가변 크기의 %값 = (가변 크기로 만들 박스의 가로 너비 ÷ 그 박스를 감싸고 있는 박스의 가로 너비) x 100

 - 예를 들어, 아래와 같이 테두리 박스의 너비가 960px이고 노란 박스의 너비가 300px이면, (300 ÷ 960) x 100 = 31.25%

 

3. 서로 다른 크기의 박스를 가변 크기로 변환

 - 960px의 테두리 박스 안에 각 300px, 600px의 박스를 생성하여, 가변 크기로 변환

    → 화면의 너비에 따라 비율에 맞춰 박스의 크기도 달라짐을 확인할 수 있음

<div id="wrap">
    <div class="container">
        <div></div><div></div>
    </div>
</div>

/* 가장 테두리 박스 */
#wrap {
    /* wrap박스는 상위의 박스가 없으므로 너비를 임의로 90%로 설정 */
    width: 90%;         /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid black;
}

/* 테두리 박스의 자식 박스 */
.container {
    width: 93.75%;      /* 900px ÷ 960px */
    height: 492px;
    margin: 0 auto;
    border: 4px solid black;
}

/* 300px와 600px 박스 */
.container div {
    display: inline-block;
    height: 100%;
}

/* 300px 박스 */
.container div:first-child {
    width: 33.333333%;  /* 300px ÷ 900px */
    background-color: lightblue;
}

/* 600px 박스 */
.container div:last-child {
    width: 66.666667%;  /* 600px ÷ 900px */
    background-color: lightcoral;
}