* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
웹개발 종합반 강의 1주차 강의 1-6 8:28초 쯤에 나오는 내용에 대한 궁금증입니다! 강의에서는 margin: auto; 가 상하좌우 다 최대한 미세요!의 느낌이라고 알려주시는데 좌우로는 작동하나 상하로는 작동이 안되는 것 같아서 왜 안되는지 궁금합니다.
높이를 설정하지 않아서 그런 것 같아서
.wrap height를 1000px; 을 주고 했는데도 안되네요.
정리하자면
margin: 값; 으로 입력한다면 값이 상하좌우에 다 적용되는 것으로 알고 있는데
그렇다면 margin: auto; 로 입력한다면 상하좌우로 다 적용되어
로그인 페이지가 위로 붙는 것이 아닌 상하 공간도 최대한 밀어서
가운데 위치해야할 것 같은데 왜 상하 공간은 그대로 이고
좌우 공간만 밀어지는지 궁금합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>로그인페이지</title>
<style>
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-position: center;
background-size: cover;
border-radius: 10px;
padding-top: 40px;
}
.wrap {
width: 300px;
margin: auto;
height: 1000px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>
</div>
</body>
</html>
