HTML, CSS, JavaScript, jQuery/03.CSS
[CSS]03-10.z-index, opacity (화면 순서, 투명도 조절)
galil
2018. 10. 18. 09:30
z-index는 누가 화면 상단에 있을지 순서를 부여하는 것.
개념 자체는 x, y, z축 3차원 개념, 입체적인 개념인것 같다.
오브젝트가 겹쳤을 때 어떤 오브젝트가 위에 보이게 할 지 순서를 매기는 것이다.
공지, 팝업 같은 기능에 자주 쓰인다.
다음 opacity는 투명도 옵션을 말한다.
값은 0~1까지 부여되며
0으로 갈 수록 투명해진다.
0.2~0.5 정도가 반투명하게 사용 할 때 적당한 값이다.
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "img/btn.png">
<style>
div{
width: 300px;
height: 300px;
text-align: center;
}
#div1{
border: 3px dashed green;
background-color: yellow;
position: relative;
top: 10px;
z-index: 8;
opacity: 0.5;
}
#div2{
border: 3px dashed red;
background-color: orchid;
position: absolute;
top: 250px;
left: 20px;
z-index: 3;
}
#div3{
border: 3px dashed hotpink;
background-color: mediumspringgreen;
position: absolute;
top: 100px;
left: 250px;
z-index: 5;
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
</body>
</html>
예전에 예제로 사용한 화면에 공지를 띄어보자