[css] box로 보이게 하는 css

들어가며

box처럼 보이는 css를 만들고 div태그에 적용하는 예제입니다.

 

내용

div태그 여러개 만듭니다. 각 div태그에는 square css를 사용하게 설정합니다.

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

 

css를 설정합니다. border를 설정하여 테두리를 만들고 display를 inline-block으로 설정하여 한 라인에 box가 오도록 설정합니다.

.square {
  height: 80px;
  width: 80px;
  background-color: white;
  border: 1px solid black;
  display: inline-block;
}