21.Oct-05 CSS // inline-block - 다른 요소들과 어울리는 방법

display inline-block ;

(1) 워드 또는 한글에서 그림 배치 설정을'어울림'으로 하는 것 과 같다

(2) 내 크기만큼 차지 하는거다. 하나의 블록이 그 행의 20%만 차지하면, 다른 블록이 나머지 부분만큼 (80% 내 면) 차지하게 되는 것이다.

 

✔️Display: block -> 한 행을 전부 차지

Display: inline-block -> 내 크기만큼 차지

Display inline-block은 글과 어울림 형태와 같다. 출처: 코딩애플 강좌

🌟Inline-block을 사용시 애매한 공간 할당이 남거나, 띄어쓰기가 있을경우 박스사이 공백 제거가 어렵다.

 

20% + 스페이스바 + 80% 이므로 100%가 넘어가서 80% 블록은 아래로 밀린다. 출처: 코딩 애플 강좌

 

여기서 공백이라는 것은 코드 사이의 공백도 포함이다.. 이 스페이스 바 공간이 존재한다고 ㅠㅠ 실제 스페이스 바가 인식이 되어 윗 그림처럼 표시가 되어진다. 하지만, 이렇게 되면 코드가 따닥따닥붙어 매우 더러워지지 않는가?? 그러기위해 해결 방법이 존재한다. 출처: 코딩애플 강좌

🌟Inline-block 해결 방법:

(1) HTML 주석 <!----> 달기

<div class="container">

<div class="header"> </div>

<div class="left-menu"></div><!--

--><div class="right-content"></div>

<div class="footer"></div>

</div>

 

(2) 부모 태그에 font-size: 0px 선언하기

->이러면 스페이스바, 엔터 등도 모두 0px로 인식하기 때문에 공간을 차지하지 않는다.

❓이러면 박스안에 글씨를 어떻게 넣나?

❗️자식태그에 다시 font-size를 선언해주면됨. 부모 태그의 우선순위는 자식태그 속성에 후순위로 밀린다.

 

 

inline-block안에 글을 쓰게 되면 글이 하기 그림과 같이 글씨가 박스 안에 애매한 곳에 위치하게된다. 

출처: 코딩 애플 강좌

❗️ vertical-align: top 속성을 쓰게 되면 해결 가능

 

이유: Baseline이 옆에 존재하면 Display: inline-block 요소들이 baseline 위에 오려고 하기 때문!

 

출처: 코딩 애플 강좌

이렇게 파란 block이 오른쪽block의 글씨 baseline 위에 올라오려한다. 출처: 코딩 애플 강좌