코딩도전기/CSS
CSS_Test
by 코도꼬마
2023. 2. 6.
Notice 팝업하기
- Opacity와 z-index를 활용해서 공지사항 띄워보기
- HTML에서 배운 dialog를 활용
<head>
<style>
<!--background 설정-->
div.bg{
width: 98%;
height: 89%;
position: absolute; <!-- z-index 설정하기 위해서 absolute로 지정 -->
background-color: black;
top: 0px;
left: 0px;
opacity: 0.2;
z-index: 1;
}
div.notice{
border: 1px solid black;
width: 400px;
text-align: center;
position: absolute;
top: 15%;
left: 30%;
z-index: 3;
background-color: white;
}
div.txt{
text-align: left;
margin: 10px;
}
</style>
</head>
<body>
<dialog open>공지사항입니다.</dialog>
<div class="notice">
<h2>공지사항</h2>
<div class="txt">
<p>다음과 같은 사항을 공지합니다.</p>
<p>공지 내용1</p>
<p>공지 내용2</p>
<p>공지 내용3</p>
<a href="#">닫기</a>
</div>
</div>
<div class="bg"></div>
</body>
Sprite image
- 여러장의 이미지를 하나의 이미지로 병합해 놓은 이미지
- 2D 도트게임에서 사용하는 개념으로 이제는 웹에서도 사용
- 여러 이미지를 적은 용량으로 효과적으로 사용할 수 있음
<head>
<style>
li.bird1{
<!-- 전체 이미지에서 설정한 크기만큼의 이미지만 보여줌 -->
width: 110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); */
/*background-image는 좌표지정이 안됨(이미지를 움직일 수 없음)*/
/*background는 좌표를 지정해 이미지를 움직일 수 있음*/
background: url('../img/spriteImg.png') 0px 0px;
}
li.bird2{
width: 110px;
height: 110px;
/* background-image: url(../img/spriteImg.png); */
background: url('../img/spriteImg.png') -109px 0px;
}
li{
list-style-type: none;
float: left;
}
li.bird3{
clear: left;
width: 110px;
height: 110px;
background: url('../img/spriteImg.png') 0px 0px;
}
li.bird3:hover{
clear: left;
width: 110px;
height: 110px;
background: url('../img/spriteImg.png') -109px 0px;
}
li.bird4{
width: 110px;
height: 110px;
background: url('../img/spriteImg.png') -215px 123px;
}
li.bird4:hover{
width: 110px;
height: 110px;
background: url('../img/spriteImg.png') -215px 0px;
}
</style>
</head>
<body>
<ul>
<li class="bird1"></li>
<li class="bird2"></li>
</ul>
<ul>
<li class="bird3"></li>
<li class="bird4"></li>
</ul>
</body>
default
2-1 hover
2-2 hover
