[CSS] opacity

 

 

▶ opacity 

  - 요소의 투명도 지정.

 

[속성 값]
  - 0부터 1 사이의 소수점 단위의 숫자 값 지정.

  - 기본값 1.

  - 소수점 값 입력 시 0은 생략 가능(ex. 0.5 = .5)

 

 

[사용 예시]

  .half{ opacity: 0.5 } /* 50% 투명도. 반투명 */ 
  .transparent{ opacity: 0 } /* 0% 투명도. 투명 */ 
  .box{ opacity: .75 } /* 75% 투명도. 반투명 */ 
  .full{ opacity: 1 } /* 100% 투명도. 불투명 */ 

 

 

 

※ display: none;과 opacity: 0;
- display: none;과 opacity: 0; 사이 혼돈에 주의.

HTML 구조

opacity: 0; 사용 예시

  - opacity: 0;은 요소가 화면상에 존재하지만 단지 보이지 않는 것. 자리는 차지하고 있음.

 

 

 

display: none; 사용 예시

  - display: none;은 요소 자체가 없어지면서 화면상에서 완전하게 사라진 개념. 존재하지 않는 것.