728x90
반응형
▶ 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; 사이 혼돈에 주의.
- opacity: 0;은 요소가 화면상에 존재하지만 단지 보이지 않는 것. 자리는 차지하고 있음.
- display: none;은 요소 자체가 없어지면서 화면상에서 완전하게 사라진 개념. 존재하지 않는 것.
728x90
반응형
'CSS' 카테고리의 다른 글
[CSS] font(2) - font-style (0) | 2020.09.09 |
---|---|
[CSS] font(1) (0) | 2020.09.09 |
[CSS] overflow (0) | 2020.09.09 |
[CSS] display (0) | 2020.09.08 |
[CSS] box-sizing (0) | 2020.09.08 |