inline-block

레이아웃을 구성할 때 float 외에 많이 쓰는 것중 하나인 inline-block

display : block (한행을 전부 차지)

display : inline-block (내 크기만큼 차지)

가로로 정렬할 때 float : left 이것만 쓸 수 있는 것은 아닙니다.

display : inline-block을 사용해봅시다.

<div class="container">
    <div class="header"></div>
    <div class="left"></div><div class="right"></div> 
    //이런식으로 공백을 없애줘야 한다.
    
    <div class="footer"></div>
</div>
 혹은 
<div class="container">
    <div>
       <div class="left"></div><!--
    --><div class="right"></div>
    </div>
</div>

main.css

.left{
    width: 30%;
    height: 400px;
    background: cadetblue;
    display: inline-block;
}
.right{
    width: 70%;
    height: 400px;
    background: coral;
    display: inline-block;

}

위의 코드는 박스를 만들어 왼쪽으로 정렬시키는 코드입니다.

display 속성만 inline-block으로 조정하면 가로로 배치가 가능합니다.

inline- block은 "내 폭과 높이만큼 자리차지하게 해주세요~" 라는 뜻입니다.

간편하지만 <태그> 사이에 스페이스바 공백이 있다면 그대로 보여주기 때문에

가로로 정렬하려면 태그 사이의 공백도 제거해줘야합니다.

이런게 귀찮습니다 float 쓰셈

주석은 실행되지 않는 코드입니다.

HTML 코드는 <!-- --> 이게 주석처리하는 코드이며

이 사이에 코드를 집어넣으면 실행되지 않습니다.

하지만 그래도 더러워보입니다.

다른 방식

1. left와 right 사이의 주석처리 혹은 공백제거

2. 부모 div에 font-size : 0

<div class="container" style="font-size: 0px">
    <div class="header"></div>
    <div class="left" style="font-size: 20px; vertical-align: top;">asd</div><div class="right"></div>
    <div class="footer"></div>
</div>

font-size 속성은 inherit 되기 때문에 안에 있는 <div>와 그 사이에 있는 공백도 font-size가 0px이 됩니다.

이러면 해결인데 HTML이 깨끗해질지 모르겠지만 CSS가 더러워질 수 있겠군요.

둘 중에 덜 더러워보이는 방법을 하나만 사용하시면 되겠습니다.

🎈. baseline이 옆에 존재하면 display : inline-block 요소들이 baseline 위에 오려고 함 > vertical-align: top속성 으로 해결

✨ 과제. 네이버 블로그 글목록 만들어보기 (blog1.html 파일)생성