본문 바로가기
프로그래밍/HTML, CSS

CSS - display 와 visibility 프로퍼티 사용하기

by pentode 2018. 4. 20.

화면에서 HTML 요소를 숨기거나, 다시 보여주기 위해서 display 또는 visibility 프로퍼티를 사용합니다. 이러한 작업을 하기 위해서 display 프로퍼티는 none과 block 또는 inline 값을 사용하고, visibility 프로퍼티에서는 hidden과  visible  값을 사용합니다.


화면에서 HTML 요소를 숨기는 작업을 함에 있어 이 두 가지 프로퍼티에는 큰 차이가 존재합니다.


visibility:hidden 을 사용하면 그 요소가 차지하던 공간은 그대로 유지되고, 화면에 보이지만 않게 됩니다. display:none 을 사용하면 그 요소가 아예 없었던것 처럼 처리됩니다. 레이아웃에 변화가 오게 되는 것입니다.


두 가지의 프로퍼티의 특성을 잘 고려해서 사용해야 하겠습니다.


display 는 화면에서 요소들이 자리를 차지하는 방식을 변경할 수 있는 중요한 프로퍼티 입니다. HTML 요소는 화면에서 자리를 차지하는 방식에 따라 inline 요소와  block 요소로 나눌 수 있습니다.


block 요소는 <p>, <div>  같은 요소들입니다. 특징으로는 자동으로 개행이 되어 새 라인에서 시작하고, 너비는 차지할 수 있는 최대한의 너비를 가지게 됩니다. 높이는 포함하고 있는 컨텐츠의 높이가 됩니다.





inline요소는 <span>, <a>, <img> 와 같은 요소들로 너비와 높이는 포함하고 있는 컨텐츠에 맞게 결정되고, inline 요소들 끼리는 새 행으로 개행이 되지 않고 오른쪽에 붙어서 표시됩니다. 오른쪽에 표시할 너비가 모자라게 되면 개행이 됩니다. 





<img> 요소는 너비와 높이를 지정할 수 있지만, <span>, <a> 요소는 width, height 프로퍼티를 사용해서 너비와 높이를 변경할 수 없습니다. 지정하더라도 무시됩니다.


inline 요소의 특징을 가지면서 너비와 높이를 지정할 수 있게 하려면 display 프로퍼티를 inline-block으로 지정하면 됩니다. inline-block 으로 지정되면 자동 개행되지 않으면서 너비와 높이를 지정할 수 있습니다.




화면내의 요소들이 화면의 크기를 줄이면 오른쪽의 요소가 아래로 떨어져서 재배열 되게 하려면 <div> 요소와 float 프로퍼티를 사용하여 만들 수도 있지만, display:inline-block 을 사용해서 간단히 구현할 수도 있습니다.



다음은 display 프로퍼티와 visibility 프로퍼티에서 사용할 수 있는 값들입니다.



※ display

- none : 요소를 숨깁니다. 요소 자체가 없어진것처럼 되므로 요소들의 배치가 바뀝니다.

- inline : 크기는 포함하는 컨텐츠에 맞게 결정되고, 요소들이 개행되지 않으며, CSS로 너비와 높이를 지정할 수 없게 됩니다.

- block : 요소는 자동 개행되고, 너비는 차지할 수 있는 최대값, 높이는 컨텐츠에 맞게 결정됩니다. CSS 로 너비와 높이를 지정할 수 있습니다.

- inline-block : inline값의 특징을 가지지만 CSS로 너비와 높이를 지정할 수 있습니다.

- initial : 기본값으를 바꿉니다.

- inherit : 부모 요소의 값을 따릅니다.


display 프로퍼티가 가질 수 있는 값들은 모두 20여 가지가 됩니다. 위에서는 주로 사용되는 것들만 설명하였습니다.


※ visibility

- visible : 요소를 보이게 합니다.

- hidden : 요소를 감추지만 차지하고 있는 자리는 유지합니다.

- collapse : <table> 요소에서만 사용되며 row와 column 을 안보이게 합니다.

- initial : 기본값으로 바꿉니다.

- inheirt : 부모 요소의 값을 따릅니다.



※ 참고사항

visibility 퍼로퍼티의 collapse값을 column 에 사용할 때는 크롬브라우저에서는 동작하지 않았습니다.

-  컬럼에 적용예

<table>

<cols>

<col>

<col style="visibility:collapse">

</cols>

<tr>

...

</table>

반응형