TIL - 09 - CSS - Layout

inline, inline-block, block

block & inline

HTML elements의 대부분은 block 요소이다. (<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등..)

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다. block 요소와 반대되는 요소는 inline 이다.

block와 상반되는 inline 요소도 있다.(<span>, <a>, <img> 등..)
inline이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

block

• 블록 레벨 엘리먼트는 새로운 줄에서 시작(줄바꿈)해 좌우로 최대한 늘어난다.

inline

• 인라인 레벨 엘리먼트들은 줄바꿈이 일어나지 않는다.

inline-block

block요소와 inline를 가진 HTML elements들은 CSS를 활용하면 서로의 디자인으로 바꿀 수 있다.

block->inline
해당 property에 inline-block을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 된다. 이외에도 float도 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

inline->block
해당 property에 block을 부여하면, block 성질로 변하게 된다.

.block-span {
  display: block;
}

none

display: none;이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다.
이러한 값을 사용하는 이유는 interactive한 웹을 구현할 수 있기 때문이다.

포털사이트 검색창에 텍스트를 입력하면, 아래에 연관 검색어가 뜨는 것을 볼 수 있다.
원래 해당 영역이 display: none;이다가, 텍스트를 입력하는 순간 JavaScript가 검색 목록 요소에 다른 클래스로 교체한 것이다. 아마 그 새로운 클래스에는 display: block;이라는 값이 있을 것이다.

클래스 이름에 따라 요소에 display: none display: block 이 있었다가 없었다가 하면서 요소를 보이게 / 안 보이게 할 수 있는 기법으로 사용한다.