CSS 속성 - 투명도 (opacity)

투명도(opacity)란?

요소의 투명도를 나타내준다

1 : 불투명

0 ~ 1 : 0부터 1사이의 소수점 숫자만큼 투명도를 가진다

Untitled

코드를 통해서 봐보자

1, html 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./opacity.css" />
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

부모 자식 관계의 div 태그를 하나 만들고 각각 클래스 이름을 붙여주었다!

2, CSS 코드

.parent {
  width: 100px;
  height: 100px;
  padding: 30px;
  background-color: orange;
}

.child {
  width: 200px;
  height: 100px;
  background-color: royalblue;
}

위의 코드를 보면 부모 box보다 자식 box의 width가 더 길다

하지만 따로 overflow를 지정하지 않았기 때문에