[CSS] Block vs Inline

 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 작업을 시작할 때,

이렇게 inline, block 성질을 생각하면서 HTML 태그를 선택해야 할까요?

물론 대부분 inline, block 성질에 의해 태그가 결정되지만,

아무 태그나 사용해도 결국은 CSS를 통해 얼마든지 성질을 바꿀 수 있습니다.

아무리 block 요소의 성질을 가진 <p> 태그도

css을 사용하여 inline 스타일로 바꾸면 <span>과 똑같은 디자인이 됩니다.

inline 성질을 갖도록 하는 CSS property는 display와 float 이 있습니다.

 

.inlineP {

display: inline-block;

}

.floatLeft {

float: left;

}

.floatRight {

float: right;

}

 

해당 property에 위와 같은 값을 부여하면,

요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.

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

 

.blockSpan {

display: block;

}

 

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

 

 none

 

display 라는 property를 배운 김에 none 값도 배워봅시다!

 

.hide {

display: none;

}

 

index.html 의 21줄을 보면 HTML은 존재하는데 화면에 보이지 않습니다.

hide 클래스에 부여한 스타일 때문에 그런데, 해당 요소에서 hide라는 클래스를 제거하면 요소가 다시 보일 것입니다.

display: none; 이라는 값을 주면, 해당 요소는 화면에서 보이지 않습니다.

어차피 안 보일 요소는 왜 작성하는 것일까요?

여러 이유 중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.

네이버 검색창에 텍스트를 입력한 순간, 아래에 관련 목록이 뜨는 것을 볼 수 있습니다.

원래는 해당 영역이 display: none; 으로 보이지 않다가, 텍스트를 입력하는 순간,

JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다.

아마 그 새로운 클래스에는 display: block; 이라는 값이 있었을 것입니다.

이렇게 클래스 이름에 따라 요소에 display: none display: block 이 있었다가 없었다가 하면서

요소를 보이게 / 안 보이게 할 수 있는 것입니다.

정말 많이 쓰이는 기법입니다.

 

 그 외

---

display 에 대한 값으로 block, inline-block, none 을 살펴보았습니다.

이것 말고도 list-item 과 table 같은 좀 더 특이한 값도 있는데 거의 사용하지 않아서 다루지 않겠습니다.

---

참고자료 : https://developer.mozilla.org/en-US/docs/Web/CSS/display

display - CSS: Cascading Style Sheets | MDN

wecode