2021-03-15
opacity 구글 번역상에서 불투명이라는 단어로 해석된다. 말 그대로 색에 투명도를 부여할 수 있는 css 속성이다. 오늘은 이를 통해 배경색의 변화를 주는 방법을 알아보자.
- opacity
opacity의 기본(default) 값은 1이다. 1이 원색 그 자체로써 투명도를 부여하지 않은 것을 뜻한다. 해당 속성은 0부터 1까지의 범위를 가지며, 자유롭게 값을 부여할 수 있다.
- 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
margin: 10px;
width: 300px;
height: 25px;
background : blue;
/* 문자 색 지정 */
color: silver;
}
#one{
opacity: 0.1
}
#three{
opacity: 0.3
}
#five{
opacity: 0.5
}
#seven{
opacity: 0.7
}
#nine{
opacity: 0.9
}
</style>
</head>
<div id="one"> opacity 0.1 </div>
<div id="three"> opacity 0.3 </div>
<div id="five"> opacity 0.5 </div>
<div id="seven"> opacity 0.7 </div>
<div id="nine"> opacity 0.9 </div>
<div id="df"> opacity 1 </div>
<body>
</body>
</html>
div 태그에 배경색을 각각 부여해주고 이후 opacity통해 각각 다른 투명도를 부여해 주었다. 결과는 아래와 같으며, 부여된 opacity의 숫자가 작을수록 점점 투명도가 높아지는 것을 확인할 수 있다.
