Notice
Recent Posts
Recent Comments
Tags more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[CSS] 모달창 기본소스 본문

웹퍼블리싱/CSS

[CSS] 모달창 기본소스

http://portfolio.wonpaper.net 2023. 8. 21. 09:55

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
body {
    margin:0;
}
 
div {
    box-sizing:border-box;
}
 
.black-bg {
    width:100%;height:100%;
    background:rgba(0,0,0,0.5);
    position:fixed;padding:20px;
}
 
.white-bg {
    width:100%;background:white;
    border-radius:8px;
    padding:20px;
}
</style>
 
<body>
<div class="black-bg">
    <div class="white-bg">
        <h4>제목입니다.</h4>
        <p>상세페이지 내용입니다.</p>
    </div>
</div>
</body>
 cs

 

 

 

'웹퍼블리싱 > CSS' 카테고리의 다른 글

[CSS] flex 로 더보기 만들어보기  (0) 2024.01.23
[CSS] 모바일 해상도에 따른 최대치로 지정  (0) 2023.10.17
[CSS] Youtube 태그 반응형 모바일 너비에 맞게 넣기  (0) 2023.01.26
[CSS] 말풍선 , 툴팁 기능 구현 ToolTip  (0) 2023.01.21
[CSS] 긴줄을 말줄임 표시하기  (0) 2023.01.17
'웹퍼블리싱/CSS' Related Articles more
Comments