box-sizing

만약 우리가 글자가 안에 들어가며 파란색 10px두께의 테두리를 가지고 글자와 사각형 변과의 간격이 10px인 총100^2px 넓이의 사각형을 만들고 싶다.
너비가 100px, 높이가 100px인 사각형을 만들고 border를 10px, padding을 10px로 부여한다.

그럼 오류가 생기게 된다. 결국 우리가 만든 사각형은 (100px + 20px(양 옆 padding) + 20px(양 옆 border))=140^2px의 넓이를 갖게 된다.

그래서 우리는 box-sizing 속성을 이용할 것이다.

box-sizing: border-box

를 부여하게 되면 우리가 원하던 조건의 100^2px의 사각형이 만들어진다.

이 속성을 inline-grid 라이브러리에 추가하게 되면 비로소 많이 사용하는 라이브러리의 모습이 된다.

.inline-grid {
  font-size:0;
}
.inline-grid > * {
  font-size:1rem;
  display:inline-block;
  vertical-align:top;
  box-sizing:border-box;
}
'''

BMX사이트 구현

상단바 재구현(border-width를 이용하여)

우리가 옛날에 bmx상단바를 구현할 때 <|>문자로 구현했었다. 이제는 더 수준높은 방식으로 border와 inline-grid를 사용하여 구현해보자.

<div class="con">
  <div class="logo-bar">
    <a href="#">BMX</a>
  </div>
  <div class="menu-bar">
    <nav class="menu-box-1">
      <ul class="inline-grid">/*li태그들에게 border를 추가했을때, width와 겹치지 않고 정렬될 수 있도록 
        라이브러리 inline-grid를 추가해준다.*/
        <li><a href="#">BRAND</a></li>
        <li><a href="#">VISUAL</a></li>
        <li><a href="#">STYLE</a></li>
        <li><a href="#">MEDIA</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">STORE</a></li>
        <li><a href="#">CUSTOMER</a></li>
      </ul>
    </nav>
  </div>
</div>

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

a {
  color:inherit;
  text-decoration:none;
}

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

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

/* 커스텀 */
.con {
  width:1200px;/*전체적인 사이트의 넓이를 정해준다.*/
  height:1500px;
  margin-left:auto;/*사이트를 가운데 정렬해준다.*/
  margin-right:auto;
}

.logo-bar {
  margin-top:20px;
  text-align:center;
}

.logo-bar > a {
  font-weight:bold;
  font-size:4rem;
  letter-spacing:-0.3rem;
}

.menu-bar {
  margin-top:20px;
}

.menu-box-1 > ul > li {
  width:calc(100% / 7);
}

.menu-box-1 > ul > li > a {
  display:block;
  text-align:center;
  font-weight:bold;
  border:0 solid black;/*border로 사각형을 만들어주고*/
  border-width:0 1px;/*위,아래 두께를 0, 양 옆 두께를 1px로 만들어준다.*/
}
/*첫번째와 마지막 border를 제외한 border들은 1px두 개가 겹친 2px이므로 첫번째와 마지막 borderd의 두께를
2px로 바꾸어준다.*/
.menu-box-1 > ul > li:first-child > a {
  border-left-width:2px;
}

.menu-box-1 > ul > li:last-child > a {
  border-right-width:2px;
}

아래 이미지들까지 추가한다면

img-box

이미지를 사용할 경우, img태그는 display속성이 inline-grid이기 때문에 글자로 취급되어 아래 여백이 생기게된다.

그래서 개발할 때 이것을 div태그로 감싸고 그 너비를 100%, display속성을 block으로 바꾸어주면 조금 더 이미지를 잘 다룰 수 있게된다.