이번에는 해당 html 요소를 투명하게 만드는 css opacity 속성에 대해서 알아보는 시간을 갖겠습니다.
- opacity란
opacity에는 0.0부터 1.0까지의 값을 넣을 수 있는데, 0.0에 가까워질수록 해당 요소는 투명해지고
1.0에 가까워질수록 불투명해지는 특징을 갖고 있습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>exhtml</title>
<style type="text/css">
div {
border: 1px solid black;
}
.container {
background-color: #CFFFE5;
width: 200px;
height: 100px;
}
.content {
margin: 0 auto;
background-color: yellow;
width: 100px;
height: 50px;
}
.content:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
안녕하세요.
</div>
</div>
</body>
</html>
(바로 전 포스팅 margin auto의 코드를 가져왔습니다.)
먼저 예상을 했을 때, 0.0에 가까워질수록 투명해진다 했으니 자식 div(content)에 마우스를 올리면
div 영역이 불투명해질 것입니다.
한 번 해 볼까요?
일반 상태와 비교했을 때 불투명해진 것이 눈에 띕니다.
opacity 속성은 다른 포스팅에 비해 내용은 짧지만 실사용 시 버튼 위로 마우스를 올리면 투명해지는 등
활용할 곳이 많기에 잘 인지해 두시면 쓸 일이 있을 것입니다.
'웹 개발 > 주요 태그, 속성들' 카테고리의 다른 글
| css block, inline, inline-block 속성 (0) | 2021.12.22 |
|---|---|
| css box-sizing 속성 (0) | 2021.12.22 |
| css margin:0 auto (0) | 2021.12.20 |
| css min&max-width&height 속성 (0) | 2021.12.19 |
| css overflow 속성 (0) | 2021.12.19 |
댓글