CSS - 12. Block vs Inline

1. Block vs Inline

대부분의 HTML element(이하 요소)는 block 요소이다.

예를 들어, <header>, <footer>, <p>, <li>, <table>, <div>, <h1> 등이 모두 block 요소에 해당하는 태그들이다.

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

 

block 요소와 성질이 반대인 inline 요소도 있다. <span>, <a>, <img> 태그 등이 inline 요소이다.

inline은 말 그대로 inline요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

 

첫 번째부터 네 번째까지는 <p>태그 같은 block 요소이다. 노란색 영역이 해당 요소가 차지하는 영역이다.

텍스트는 짧은데 그 이상으로 영역을 차지하고 있는 걸 볼 수 있다. block 요소들은 이런 식으로 항상 새 줄에서 시작하면 좌우로 최대한 늘어난다.

마지막 'span의 오른쪽 정렬'이라고 작성된 것은 inline요소인 <span>태그를 사용했다. 그림과 같이 딱 텍스트만큼의 영역만 차지하고 있다.

저 이후에 inline 성질을 가진 태그가 더 있었다면, 새로운 줄에 시작되는게 아니라 바로 오른쪽에 그려졌을 것이다.

 

홈페이지 디자인을 받아서 HTML 작업을 시작할 때, 아무 태그나 사용해도 결국 CSS를 통해 얼마든지 성질을 바꿀 수 있다.

아무리 block 요소의 성질을 가진 <p> 태그도 css를 사용하여 inline 스타일로 바꾸면 <span>과 똑같은 디자인이 된다. inline 성질을 갖도록 하는 CSS property는 display와 float가 있다.

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

위 코드처럼 해당 property에 위와 같은 값을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 된다.

반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있다.

.block-span {
  display: block;
}

위의 CSS로 <span>은 <p>태그와 똑같은 성질을 갖게 된다.

 

---

2. none

.hide {
  display: none;
}

display에 none이라는 값을 주면, 해당 요소는 화면에서 보이지 않는다. 이러한 기능을 쓰는 여러 이유 중 하나는 interactive 한 웹을 구현할 수 있기 때문이다. 네이버 검색창에 텍스트를 입력한 순간, 아래에 관련 목록이 뜨는 것을 볼 수 있다. 원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간, JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것이다. 그 다른 클래스에는 display: block;이라는 값이 있었을 것이다. 이렇게 클래스 이름에 따라 요소에 display: none <-> block 이 있었다가 없었다가 하면서 요소를 보이게/안보이게 할 수 있는 것이다. 정말 많이 쓰이는 기법이다.