CSS rgba 속성

브라우저 내에서 모달창을 하나 띄운다고 했을때, 모달창 외에 다른 배경은 투명색으로 나타나야한다면

어떻게 해야할까 ?

이럴때 background color 를 rgba 로 조절해주면 된다.

rbg 는 빨간색, 녹색, 파랑색 색의 3원색을 나타내고 a는 불투명도 속성을 나타낸다. 1로 갈수록 불투명도가 커진다.

    .div{
      background-color: rgba(0, 0, 0, 0.2);
      width: 200px;
      height: 200px;
    }

   .div{
     background-color: rgba(0, 0, 0, 1);
     width: 200px;
     height: 200px;
   }

투명도는 opacity 속성을 줘도 되지만 모달창은 모달창의 투명도는 없어야하지만 뒤에 배경 내용들은 투명하게 보여야 하므로 opacity 로 조절하기보다 rgba 로 조절을 하는것이 더 효율적이다