Inline-block 활용
<body>
<div class="container">
<div class="header"></div>
<div class="left-menu"></div><div class="right-content"></div>
<div class="footer"></div>
</div>
</body>.container {
width: 800px;
}
.header {
width: 100%;
height: 50px;
background-color: aquamarine;
}
.left-menu {
width: 20%;
height: 400px;
background-color: cornflowerblue;
/* float: left; */
display: inline-block;
}
.right-content {
width: 80%;
height: 400px;
background-color: coral;
/* float: left; */
display: inline-block;
}
.footer {
width: 100%;
height: 100px;
background-color: gray;
/* clear: both; */
}- display: inline-block 은 박스 사이즈만큼만 가로 행을 차지하게 해주는 속성이다 (즉, display: block 처럼 가로 한 줄을 하나의 박스가 차지하는 게 아닌 브라우저 가로 한 줄에 여러 작은 박스가 위치할 수 있게 해준다)
- inline-block 사용 시에는 left-menu와 right-content 사이에 띄어쓰기가 있을 경우 공간이 모자라 right-content가 아래로 내려오므로, 띄어 쓰기 없이 붙여 코드를 써주어야 한다
- (참고) font-size를 0px로 하거나 주석을 활용하면 줄바꿈을 할 수도 있지만 불편하다 - right-content or left-menu에 글씨를 적으면 글자의 baseline에 맞추어 옆 박스가 정렬되어 두 박스 간의 정렬이 틀어지므로, 한 쪽에 vertical-align: top 속성을 추가해주어야 한다.
- (참고) 글자의 baseline은 줄노트의 줄과 같은 위치(글자 하단에 맞추어 위치)
eunji yang