사소한 삽질 - CSS(반투명 div)

CSS에서 오브젝트의 투명도를 조절하는 방식은 두가지가 있다.

rgba(red green blue, alpha)

.className {
  background-color:rgba(0, 0, 0, 0.8) /*검은색(0,0,0) 80% 투명도*/
}

r[0~255], g[0~255], b[0~255], a[0~1]
여기에서 a값을 조절하여 투명도를 조절할 수 있다.

opacity

.className {
  background-color: #000; /*검은색(0,0,0)*/
  opacity:0.8 /* 80% 불투명도 */
}

opacity값을 이용해 투명도 조절이 가능하다.
허용되는 값의 범위는 [0~1]이다.

주의

opacity는 하위의 모든 노드들이 opacity에 적용받는다. 부모가 opacity값이 있으면 자식 node들도 투명해지기 때문에 주의해야 한다.