[HTML,CSS] display / visibility / opacity 의 속성정리

안녕하세요 !

 

오늘은 display  / visibility / opacity 의 속성에 대해서 정리해보겠습니다 :)

 

display  / visibility / opacity의 공통적인 부분에서 보이게 하느냐 안보이게 하느냐

 

즉 ! 가시성을 결정짓는 요소들이랍니다

 

한번 각각의 속성에 대해서 알아보도록 하겠습니다.

 

1. display

 

display는 레이아웃에서 자주 사용되는 요소입니다.

기본적으로 HTML은 block 또는 inline 특성을 갖습니다.

 

display 요소	설명	예시태그
block	블록박스-가로영역모두차지 / 줄바꿈o	div / p / h / ul / li / hr / ol / table h1~h6 / form
inline	인라인박스-글자화영역 / 줄바꿈x	span / b / i / a / br / button / textarea / img / input
inline-block	block과 inline의 짬뽕 / 줄바꿈x / 크기조정o
none	해당요소를 화면에서 없애버림 (영역조차사라짐)

 

* block 속성정리

• 새로운 라인에서 시작

• 화면 크기 전체의 가로영역을 모두 차지한다. (width: 100%)

• width, height, margin, padding 지정이 가능하다.

• block 요소 안에 inline 요소를 포함할 수 있다.

• width , height 요소를 미지정하면 자동적으로 width:100% height:auto 값으로 나타난다.

 

* inline 속성정리

• 새로운 라인에서 시작하지 않기때문에 중간에 들어갈 수 있다. 

• 콘텐츠(문자 등등)의 너비가 가로폭을  결정한다.

• width, height, margin-top/bottom를 지정할 수 없다. 이 경우에는 line-height로 지정해준다.

• inline 요소 내에 block요소를 포함할 수 없다.

 

* inline-block 속성정리

 

• 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.

• block과 inline요소의 특징을 모두 갖는다.

• block 레벨 요소처럼 width, height, margin, padding 지정 할 수 있다.  line-heigh로도 가능하다.

• inline속성과 같이 콘텐츠의 width가 너비를 결정한다.

 

2. visibility

 

visibility 속성은 요소를 보이게 할 건지 안보이게 할 건지를 지정합니다.

 

visibility 속성	설명
visible	해당요소를 보이게 한다.
hidden	해당요소를 보이지않게 한다. ( 공간은 사라지지않음)
collapse	table요소에 사용하며 행이나 열을 보이지않게 한다.
none	table 요소의 row나 column을 보이지않게 한다.

 

 

3. opacity

 

opacity는 투명도를 조절하는 것과 같습니다. 

범위는 0.0(투명100%) ~ 1.0(투명 0%) 로 값을 조절합니다.

 

 

* 기억해야하는 사항 *

display: none; 

= 요소보이지않음 + 차지하고있던 영역까지 없어짐

 

visibility : hidden   //  opacity : 0 ; 

= 요소 보이지 않음 + 차지하고 있던 영역은 남아있음