[ CSS / HTML ] 전체화면 가리기, overlay를 중앙에 오게하는 방법
2024. 4. 17. 19:52ㆍ· FRONT-END/└ CSS
환경 : Visual Studio Code
[ Overlay 디자인 ]
- 화면 위의 화면을 구현
- 아래 화면이 비치게 만드는 방법 두 가지
(1) 불투명도(opacity) 조절 - 내용물도 영향을 받는다
(2) 배경색에 알파(alpha) 조절 - rgba 사용
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체화면 가리기</title>
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
.overlay {
background-color: rgba(0, 0, 0, 0.3);
opacity: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999999;
}
.overlay > .container {
background-color: white;
border-radius: 2px;
padding: 20px;
margin: 20px auto;
}
.overlay > .component {
position: absolute;
/*(1)번 방식 - 크기가 고정이어야 하지만 모든 브라우저에서 작동*/
/* top: 50%;
left: 50%;
margin-left: -100px; /*전체 이미지 200px의 반 만큼만 왼쪽을 땡기기
margin-top: -100px; */
/*(2)번 방식 - 크기와 무관하게 가운데 정렬되지만,
1번보다 여러 브라우저에서 적용되지 않는 경우가 있음 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>화면 보호기</h1>
</div>
<div class="cell">
<a class="link" href="https://www.google.com">구글로 이동</a>
</div>
</div>
<!-- 화면 전체를 가릴 수 있도록 영역을 구현 -->
<div class="overlay">
<!-- 영역 안에는 container를 배치하여 새로운 화면을 구현 -->
<!-- 정중앙에 배치하고 싶다면 .component를 배치 -->
<img class="component" src="image/loading.gif" width="200" height="200">
</div>
</body>
</html>(+) overlay 클래스의 배경 색상을 rgba로 부여하여 overlay를 구현하였다.
(+) .component는 한 가운데 위치하도록 구현하였다.
- 배치 방법은 크게 4 가지이다.
(1) top, left, margin을 사용하는 방법
(2) top, left, transform을 사용하는 방법
(3) display:flex 사용하는 방법
(4) display:grid 사용하는 방법
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ CSS' 카테고리의 다른 글
| [ CSS / HTML ] 텍스트 디자인 설정 (0) | 2024.04.19 |
|---|---|
| [ CSS / HTML ] 아이콘 디자인 (0) | 2024.04.18 |
| [ CSS / HTML ] relative를 이용한 디자인 (0) | 2024.04.15 |
| [ CSS / HTML ] 배치방식 이해 (0) | 2024.04.14 |
| [ CSS / HTML ] 이미지 꾸미기 (0) | 2024.04.13 |