반응형
반응형
웹 서비스를 개발하다보면 필수적으로 팝업 레이어를 사용하게 되는데요.
아래와 같은 팝업 레이어를 다른 라이브러리나 프레임워크를 사용하지 않고 html와 pure css로 만들어보겠습니다.
html과 css 는 아래와 같습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./main.css" />
<title>Document</title>
</head>
<body>
<button id="layer_button">레이어 팝업</button>
<div class="layer" id="layer">
<div class="layer_content">
레이어
</div>
</div>
<script>
const layer_button = document.getElementById("layer_button");
const layer = document.getElementById("layer");
layer_button.addEventListener("click", function(e) {
layer.setAttribute("style", "display: flex");
});
layer.addEventListener("click", function(e) {
layer.setAttribute("style", "display: none");
});
</script>
</body>
</html>
main.css
.layer {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
justify-content: center;
align-items: center;
}
.layer_content {
width: 200px;
height: 300px;
background-color: #fff;
}
레이어 중앙 정렬 방법
1. flex
여기서 레이어를 중앙 정렬하기 위해 display: flex 를 사용했습니다.
layer 클래스를 갖는 요소가 flex-container 의 역할을하기 때문에 display: flex 속성을 사용하고,
중앙 정렬을 하기 위해 아래 두 속성을 넣어주었습니다.
justify-content: center;
align-items: center;중앙 정렬을 할 수 있는 방법은 flex이외에도 vertical-align 속성을 이용해서 해결할 수 있습니다.
2. vertical-align 상하 중앙 정렬
Vertical-align 을 사용해서 중앙 정렬을 하기 위해서는 아래와 같이 css 와 js 코드를 수정해주어야합니다.
main.css
.layer {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
}
.layer::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.layer_content {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 300px;
background-color: #fff;
}
index.html
<script>
const layer_button = document.getElementById("layer_button");
const layer = document.getElementById("layer");
layer_button.addEventListener("click", function(e) {
layer.setAttribute("style", "display: block");
});
layer.addEventListener("click", function(e) {
layer.setAttribute("style", "display: none");
});
</script>위와 같이 html 과 css 를 작성하게 되면 아래영상 처럼 동작하는 팝업 레이어를 만들 수 있습니다.
저는 추가로 레이어 배경을 클릭하면 레이어가 닫히도록 자바스크립트를 작성했는데요.
layer.addEventListener("click", function(e) {
layer.setAttribute("style", "display: none");
});위와 같이 작성하면 layer 요소를 클릭했을 경우 레이어를 숨겨주는 동작을 하게 됩니다.
'웹 개발 > UI' 카테고리의 다른 글
| css Flex IE 이슈 정리 (0) | 2021.01.12 |
|---|---|
| 퍼블리셔가 알면 유용한 웹 사이트 (feat. 크롬 확장프로그램) (0) | 2020.06.20 |
| HTML, CSS로 사이드바 만들기 (0) | 2020.06.06 |
| Flexbox로 반응형 레이아웃 만들기 (0) | 2020.06.06 |
| HTML CSS로 이미지 슬라이드, 롤링배너 , 캐러셀 만들기(owlCarousel.js) (0) | 2020.06.05 |
댓글