col-6 같이 가로폭을 2등분으로 만드는 경우, width를 50% 주고, display: inline-block; 속성값을 넣어주면, 전체 가로 길이 1463px 중에서 박스마다 731.5 픽셀 씩만 차지 하니까 2개의 div 박스가 한 줄에 있어야 하는데 2번째 div 박스는 밑으로 떨어지네요.
그래서, margin: 0px;
padding: 0px; 도 넣어줘봤지만, 여전히 2번째 박스는 밑으로 떨어집니다.
아마도, 크롬 브라우져의 기본 스타일링이 있어서 그런가보다 해서 appearance: none;을 넣어줬는데도 역시 문제가 해결되지 않습니다.
Q. 분명히 2개의 Div 박스가 width를 50% 씩 차지하기 때문에 display: inline-block; 속성을 줬을 때는 한 줄에 붙어야 하는데, 왜 2줄로 나눠어지는 건가요?? 이 문제를 어떻게 해결할 수 있을지요?
물론, float을 사용하면, 문제가 해결되지만, 상식적으로 이 상황이 이해가 안 되서 질문 드립니다. 감사합니다.
- HTML 코드
<div class="row">
<div class="col-6">이렇게 사용하면</div>
<div class="col-6">가로폭이 2등분됩니다.</div>
</div>
- SCSS 코드
@mixin name($color, $w) {
// float: left; // => float 을 사용하면, 문제가 해결됩니다.
appearance: none; // 혹시 몰라서 해봤는데, 안 됩니다.
display: inline-block;
box-sizing: border-box;
background-color: $color;
width: $w;
margin: 0px;
padding: 0px;
}
.col-6 {
@include name(green, 50%);
// width: 50%;
}
