* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
안녕하세요! 1주차 로그인페이지 만들기를 하다가 로그인 박스를 화면의 정중앙에 배치하고 싶어서 시도해보고 있었습니다.
강의 영상에서는 margin의 좌우를 auto로 하여 양 옆 여백을 다 밀어서 화면의 중앙부로 이동시킨것을 알 수 있었습니다.
이를 활용하여 위 아래 여백 또한 auto를 이용하여 (위 오 아래 왼) 여백을 다 밀어 '로그인 박스' 통채로 화면의 정중앙부에 위치 시키려고 시도하였는데요,
margin : auto;를 진행하여도 좌우 배치만 중앙으로 오고 위아래는 움직이지 않았습니다.
margin : auto auto auto auto;를 해보아도 똑같았구요.
혹시 이렇게 margin 설정을 하면 안 되는건가요?
그렇다면 화면의 정중아에 배치를 하려면 어떻게 해야하나요?!
(background-color는 div 크기 및 위치 확인을 위해 삭제하지 않았습니다.)
보고 계신 화면 전체를 캡처해 주시면,
튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top: 30px;
border-radius: 8px;
background-image: url('https://i.namu.wiki/i/X-l3aX0Db2E0XHcGTNt1aTz8mrGdXtZ3ovj6EBNmwh49tHigxDwqwMJghtJCR9JKYwiR2Dwa1aPETl5Z9EqNxQ.webp');
background-position: center;
background-size: cover;
}
.card {
width: 300px;
background-color: green;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}
</style>
</head>
<body>
<div class="card">
<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>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
