<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오류 페이지</title>
<style>
/* div { border: 1px solid red; } */
.wrap {
height: 100vh; /* vh : 뷰포트 기준 높이 비율 단위 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#icon-emark {
border: 2px solid red;
border-radius: 50px;
padding: 10px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: red;
font-weight: 900;
font-size: 25px;
text-shadow: 0px 0px 20px;
box-shadow: 0px 0px 15px;
}
#btn-back {
border: none;
width: 200px;
border-radius: 10px;
background-color: black;
color: white;
padding: 10px;
margin: 10px;
cursor:pointer;
}
</style>
</head>
<body>
<div class="wrap">
<span id="icon-emark">!</span>
<h3>죄송합니다. 페이지를 찾을 수 없습니다.</h3>
<p>잘못된 접근입니다. 다시 시도해주세요.</p>
<button id="btn-back">이전으로</button>
</div>
</body>
</html>
.wrap {
height: 100vh; /* vh : 뷰포트 기준 높이 비율 단위 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
height:100vh
wrap 요소의 높이를 뷰포트 높이의 100%로 설정한다
브라우저 창의 높이에 맞게 요소가 전체 높이를 차지하게 된다
display : flex; : flexbox 레이아웃을 사용하여 자식 요소들을 정렬하고
배치하는 방법을 정의한다
flex-direction: colum : 자식 요소들을 수직으로(위에서 아래로)정렬한다
justify-content: center;
자식 요소들을 수직 방향 위에서 아래로 가운데에 정렬한다
align-items: center;
자식 요소들을 수평 방향으로 가운데 정렬한다
#icon-emark {
border: 2px solid red;
border-radius: 50px;
padding: 10px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: red;
font-weight: 900;
font-size: 25px;
text-shadow: 0px 0px 20px;
box-shadow: 0px 0px 15px;
}
border: 2px solid red;
border-radius: 50px;
2px를 실선 solid 테두리를 추가한다
border-radius : 50px; 요소의 모서리를 둥글게 만들어
원형에 가깝게 만든다.
text-align: center;
line-height: 30px;
line-height: 30px;
요소의 줄 높이를 30픽셀로 설정하여
텍스트가 수직으로도 가운데 정렬되도록 만든다