웹 개발에서 잘 만들어진 "유지 관리 중 페이지 HTML"을 갖는 것은 웹 사이트 다운타임을 사용자에게 효과적으로 전달하는 데 필수적입니다. 기본 사이트에 액세스할 수 없는 경우에도 사용자 참여를 유지하면서 투명성을 보장합니다. 이 기사에서는 HTML 및 CSS를 사용하여 시각적으로 매력적이고 반응성이 뛰어나며 기능적인 페이지를 디자인하는 방법에 대해 자세히 설명합니다.
서버 업그레이드, 콘텐츠 업데이트, 보안 패치로 인해 웹사이트가 다운될 수 있습니다. "유지보수 중 페이지 HTML"은 사용자에게 이에 대해 알리고 사이트가 곧 다시 돌아올 것임을 확신시켜 줍니다. 이를 통해 신뢰를 쌓고 사용자 충성도를 유지하여 예상치 못한 가용성으로 인해 발생할 수 있는 좌절감을 최소화할 수 있습니다.
예를 들어 세일 기간 동안 전자상거래 사이트가 다운된 경우 명확하고 간결한 유지 관리 페이지를 통해 사이트가 다시 온라인 상태가 될 때를 알려 고객 불만을 완화할 수 있습니다.
세심하게 디자인된 유지보수 중 페이지 HTML은 사용자에게 알리는 것 이상의 역할을 하며 다운타임 중에도 사용자 경험을 향상시킵니다. 주요 이점은 다음과 같습니다.
-** 예상 가동 중지 시간 제공**: 사용자에게 사이트가 언제 다시 돌아올 것으로 예상되는지 알려줍니다.
훌륭한 유지 관리 페이지는 기능성과 미학을 결합합니다. 필수 요소는 다음과 같습니다.
https://layakcoder.com/under-maintenance-page-html/의 주요 목적은 정보를 명확하게 전달하는 것입니다. 전문 용어를 피하고 단순하고 안심할 수 있는 언어를 사용하십시오. 예는 다음과 같습니다.
귀하의 정체성을 강화하기 위해 웹사이트 브랜딩의 일관성을 유지하세요. 포함:
다음과 같이 사용자가 귀하에게 연락할 수 있는 대체 방법을 제공하세요.
HTML과 CSS를 사용하여 간단하면서도 세련된 "Under Maintenance Page HTML"을 만들어 보겠습니다.
유지보수 중 페이지 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" />
<!-- Bootstrap -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<!-- Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap"
rel="stylesheet"
/>
<!-- Material ui icons - google web fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div>
<p>This simple structure includes a header, a message, and a contact link.</p>
<h2>
Step 2: Adding CSS for Styling
</h2>
<p>Here’s the CSS to style your maintenance page:<br>
</p>
<pre class="brush:php;toolbar:false">*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%; /* 1rem = 10px */
}
body{
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
}
.main-title{
text-align: center;
margin-top: 4rem;
margin-bottom: 8rem;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
.main-title h1{
font-size: 7rem;
text-transform: uppercase;
font-weight: 800;
color: #555;
}
.main-title h2{
font-size: 4rem;
font-weight: 300;
text-transform: uppercase;
}
.svg-img{
display: block;
margin: auto;
}
svg{
display: block;
margin: auto;
}
#clock{
animation: clockHand 5s infinite linear;
transform-box: fill-box;
transform-origin: bottom;
}
#leftTree, #righTree{
animation: tree 2s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: bottom;
}
#man{
animation: manBody 1s ease-in-out infinite alternate;
transform-box: fill-box;
transform-origin: bottom;
}
#pc-circle{
fill: #6ace66;
stroke-width: 4;
animation: change-light 4s linear infinite alternate;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
line-height: 35px;
background-color: #f5f5f5;
font-size: 1.3rem;
}
@keyframes clockHand{
from{
transform: rotateZ(0deg);
}
from{
transform: rotateZ(-360deg);
}
}
@keyframes manBody{
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(10deg);
}
}
@keyframes tree{
from{
transform: rotateZ(10deg);
}
to{
transform: rotateZ(-20deg);
}
}
@keyframes change-light {
0% {
stroke: #cd61f8;
}
25% {
stroke: #6ace66;
}
75% {
stroke: #2995c0;
}
100% {
stroke: #e92949;
}
}
/* Media Queries */
@media (min-width: 640px){
.main-title h1{
font-size: 5rem;
text-transform: uppercase;
font-weight: 700;
color: #555;
}
.main-title h2{
font-size: 3rem;
font-weight: 300;
text-transform: uppercase;
}
}
@media (min-width: 768px){
.main-title h1{
font-size: 6rem;
text-transform: uppercase;
font-weight: 800;
color: #555;
}
.main-title h2{
font-size: 4rem;
font-weight: 300;
text-transform: uppercase;
}
}
@media (min-width: 1024px){
.main-title h1{
font-size: 7rem;
text-transform: uppercase;
font-weight: 900;
color: #555;
}
.main-title h2{
font-size: 5rem;
font-weight: 300;
text-transform: uppercase;
}
}
@media (min-width: 1200px){
.main-title h1{
font-size: 8rem;
text-transform: uppercase;
font-weight: 900;
color: #555;
}
.main-title h2{
font-size: 5rem;
font-weight: 300;
text-transform: uppercase;
}
.main-title{
text-align: center;
margin-top: 4rem;
margin-bottom: 4rem;
}
}
이 디자인을 사용하면 페이지가 깔끔하고 전문적이며 시각적으로 매력적입니다.
페이지를 역동적이고 흥미롭게 만들기 위해 애니메이션을 포함할 수 있습니다. 예를 들어 페이드인 효과는 다음과 같습니다.
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
.container {
animation: fadeIn 2s ease-in-out;
}
미디어 쿼리를 사용하여 페이지가 모든 기기에서 멋지게 보이는지 확인하세요.
@media (max-width: 768px) {
body {
padding: 20px;
}
.container {
width: 90%;
}
}
카운트다운 타이머
카운트다운 타이머는 상호작용을 추가하고 명확한 기대치를 설정합니다. JavaScript를 사용하여 구현하는 방법은 다음과 같습니다.
<p> <h2> 피해야 할 일반적인 실수 </h2> <p>*<em>페이지 과부하<br> *</em><br> 페이지 속도를 저하시킬 수 있는 너무 많은 요소나 무거운 스크립트를 추가하지 마세요. 간단하고 가볍게 유지하세요.</p> <p>*<em>주요 정보 누락<br> *</em><br> 항상 다음을 포함하십시오:</p>
*접근성 무시
*
모든 사용자가 페이지에 액세스할 수 있는지 확인하세요. 사용:
*실제 사례 및 영감
*
유머와 창의성
GitHub 및 Twitter와 같은 회사에서는 애니메이션 유지 관리 페이지에 유머를 자주 사용합니다. 예를 들면 다음과 같습니다.
대화형 기능
일부 웹사이트에는 사용자의 즐거움을 위해 미니 게임이나 재미있는 애니메이션이 포함되어 있습니다.
다운타임 동안 사용자 신뢰를 유지하려면 효과적인 "유지보수 중 페이지 HTML"을 디자인하는 것이 중요합니다. 명확한 메시지, 반응형 디자인, 애니메이션 및 카운트다운 타이머와 같은 매력적인 요소를 통합하면 잠재적으로 부정적인 경험을 긍정적인 경험으로 바꿀 수 있습니다.
잘 제작된 애니메이션 유지 관리 페이지는 전문성을 보여주고 기본 사이트를 일시적으로 사용할 수 없는 경우에도 사용자가 소중함을 느낄 수 있도록 해줍니다. 미니멀리스트 접근 방식을 선택하든 대화형 디자인을 선택하든 명확성, 접근성 및 사용자 참여에 중점을 두세요
위 내용은 유지보수 중 즐거운 페이지 HTML 및 CSS 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
