14. HTML Block vs Inline

1.HTML Block vs Inline

1. Block과 Inline

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

 

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

 

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

 

block 요소와 성질이 반대인 inline 요소도 있습니다.

<span>, <a>, <img> 태그 등이 inline 요소입니다.

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

 

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

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

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

.test1 {
  display: inline-block;
}
.test2 {
  float: left;
}
.test3 {
  float: right;
}

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

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

 

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

.test4 {
  display: block;
}

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

2. None

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

.test5 {
  display: none;
}

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

 

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

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

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

 

원래는 해당 영역이 display: none; 으로 보이지 않다가,

텍스트를 입력하는 순간,

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

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

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

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

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