[CSS] 요소를 투명하게 만드는 여러가지 방법들

css hidden 썸네일

투명하게 만들기

 

CSS의 기능만으로 요소를 화면에서 보이지 않게 할 수 있다. 

아래의 방법들을 통하여 요소를 투명하게 설정 할 수 있다.

 

방법1.  opacity 0 설정

div{opacity : 0;}

opacity는 불투명도라고 한다. 불투명도 값이 0 이면 요소는 화면에서 보이지 않게 된다. 

opacity의 단점으로는 요소와 자식요소도 함께 투명해지기 때문에

요소에만 투명도를 유지하고 싶다면 다른 방법을 사용해야 된다.

공간을 차지한다.

 

opacity 캡쳐 / 자식도 투명해진다

 

방법2. rgba에서 a를 0값으로 설정하기 

div{color : rgba(0,0,0,0); background: rgba(0,0,0,0);}

배경색과 글자색에 a에 투명을 주면 해당요소가 보이지 않게 된다

자식요소에 설정을 따로 하지 않으면 요소의 속성을 상속받기에 설정하면 자식요소는 보이게 된다. 

opactiy와 다르게 자식은 영향을 받지 않게 설정이 가능하다

 

 

요소에 RGBA값 설정 자식은 보인다.

 

 

방법3. display none 설정

div{display : none;}

요소의 display 속성을 none 바꾸게 되면 화면에서 보이지 않게 된다. 

display none의 경우 공간에서 사라지기 때문에 자리를 차지 하지 않는다

위의 opacity와 마찬가지로 자식요소도 함께 보이지 않게 된다. 

 

display none 설정 요소가 아예 화면에서는 사라져 있다 관리자 모드에서는 요소가 있는걸 확인

 

방법4. visibility hidden 설정

div{visibility : hidden;}

visibility의 속성을 hidden으로 바꾸게 되면 요소가 화면에서 보이지 않게 된다.

공간을 차지한다. 자식도 투명해진다.

자식도 투명해진다. 하지만 영역은 차지 한다.

 

코드 팬

css에서 작업한 내용은 코드 팬에서 확인가능하다

See the Pen 투명 CSS by 윤재현 (@jh91) on CodePen.