inline-grid 라이브러리

위처럼 생긴 빨간색 틀에 사각형 4개를 집어넣어

이렇게 만들고 싶다.
그렇다면 나는 display:inline-block으로 만들어 수평배열을 시킬 것이다.

코드를 적용시켜보면 알 수 있지만 inline의 요소들은 상상한 것보다 더욱더 글자로 취급받는것을 알 수 있다.
글자를 작성했을 때 가독성을 높이기위해 줄간 간격과 자간 간격이 사각형에 그대로 반영되는 것이다.

<section>
  <div></div><div></div><div></div><div></div>
</section>

코드가 enter되면서 띄어지는 여백을 없애기 위해 코드를 다 이어서 자간 간격을 없앤 후, 줄 높이인 line-height:0;를 주면 위 4각형을 만들 수 있다.
하지만 더 간편하고 정확한 방법은 글자로 취급되는 성질을 이용해 section태그의 font-size를 0으로 바꾸는 것이다. 추가로 vertical-align:top;을 사용해 해당하는 각 줄에 수직정렬할 수 있다.

이렇게 사각형을 배치하는 것을 gird라고 하는데 보통 개발자들은 이 형식을 만들기 위한 속성을 css에 미리 추가해두고 (.inline-grid{~})해당하는 엘리먼트를 grid 형식으로 만들고 싶다면 class에 inline-grid만 추가하는 방식으로 한다. 이것을 라이브러리라고 한다.

.inline-grid {
  font-size:0;
}
.inline-grid > * /*.inline-grid의 모든 자식태그들에게*/{
  display:inline-block;
  vertical-align:top;/*각 줄의 가장 위쪽에 배치하기*/
  font-size:1rem; /*부모에게 글자 크기를 0으로 하였지만 그 자식들은 글자를 사용해야하기 때문에
  다시 자식들에게는 글자 사이즈를 1rem(원래 사이즈)로 만들어준다.*/
}

활용하기 + 연산(calc)

위와 같은 형식을 만드려고한다.

<section class="box-1 inline-grid">
  <div class="w-1/6"></div>
  <div class="w-1/6"></div>
  <div class="w-3/6"></div>
  <div class="w-1/6"></div>
  <div class="w-2/6"></div>
  <div class="w-1/6"></div>
  <div class="w-3/6"></div>
</section>

/*css*/
/* 노말라이즈 */
body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

/* 라이브러리 */
.inline-grid {
  font-size:0;
}

.inline-grid > * {
  display:inline-block;
  vertical-align:top;
  font-size:1rem;
}

.w-1\/6 {
  width:calc(100% / 6);
}

.w-2\/6 {
  width:calc(100% / 6 * 2);
}

.w-3\/6 {
  width:calc(100% / 6 * 3);
}

.w-4\/6 {
  width:calc(100% / 6 * 4);
}

.w-5\/6 {
  width:calc(100% / 6 * 5);
}

.w-full {
  width:100%;
}

.box-1 {
  border:10px solid red;
}

.box-1 > div {
  height:300px;
}

.box-1 > div:nth-child(1) {
  background-color:red;
}

.box-1 > div:nth-child(2) {
  background-color:orange;
}

.box-1 > div:nth-child(3) {
  background-color:yellow;
}

.box-1 > div:nth-child(4) {
  background-color:green;
}

.box-1 > div:nth-child(5) {
  background-color:blue;
}

.box-1 > div:nth-child(6) {
  background-color:navy;
}

.box-1 > div:nth-child(7) {
  background-color:purple;
}

중복되는 넓이 기입을 막기위해 라이브러리처럼 넓이 식을 사용해 class를 부여하였다.
위처럼 계산식, 연산을 사용하고 싶으면 calc(~)의 ~에 식을 집어넣으면 된다. 주의할 점은 각 항마다 띄어쓰기를 반드시 해야한다.

vh, 화면 높이 비율로 엘리먼트 조절

우리가 웹의 크기를 늘리든 줄이든 웹에 해당하는 수평기준 위쪽을 모두 빨간색으로 색칠하고 싶다. 태그를 하나 만들어 높이를 50%로 만들면 될까?

아쉽게도 생각처럼 작동하지 않는다. 그렇다면 section태그의 부모인 body태그에게 넓이를 먼저 100%로 줘야할까? 정답은 그 부모인 html태그까지 주어야한다.(html의 부모는 웹 자체이다.)
!codepen[hapym0202/embed/bGXdyJj?default-tab=html%2Cresult]
하지만 생각을 해보자. 이 section태그가

<article>
  <div>
    <nav>
      <section></section>
    </nav>
  </div>
</article>

이런 식으로 구성되어있다면 section을 색칠하기 위해서 우리는 nav,div,article,body,html의 넓이를 정의해줘야하는 수고가 생긴다. 이런 상황에서는 vh,vw를 사용한다.

부모 태그들의 넓이를 정의하지 않더라도 화면 전체를 100으로 하고 50vh를 해주면 손쉽게 전체화면의 50%에 해당하는 높이를 가지게 된다.

활용하기

오늘 배운 내용을 모두 사용하여

이런 화면을 출력하여 보자.