Westagram 로그인 화면을 만드는데 먼저 해야 한 것은 가운데 정렬이었습니다. 웹페이지의 창이 커지나 작아지나 중앙에 위치시키고 싶었습니다.
무엇을 써야할까?
여러가지 방법이 있지만, 가장 먼저 생각 한 것은 display, justify-content, align-items 이었습니다.
1. display: flex 이용하기
<body>
<main>
<div>
<h1>Westagram</h1>
<form>
<input />
<input />
<button></button>
</form>
<a></a>
</div>
</main>
</body>main{
display: flex;
justify-content: center;
align-items: center;
}부모태그인
main태그에 중앙정렬 코드를 부여합니다.
즉, 가운데 가고싶으면 부모한테 코드부여!
2. display: grid 이용하기
main{
display: grid;
place-items: center;
}
grid를 이용하는 조금은 생소한 방법입니다. 부모태그에grid를 부여해 격자를 만들어 자식들을 가운데 정렬할 수 있습니다.
3. position: relative 이용하기
main{
position: relative;
}
div{
position: absolute;
top: 50%;
left 50%;
transform: translate(-50%, -50%);부모태그인
main태그에position: relative를 부여하고 자식한테position: absolute를 부여하여top으로부터 50% 당기고left로부터 50% 당깁니다.
그런데 문제가 생겼습니다. 50%씩 당기면서 가운데 올 줄 알았지만, 오른쪽 아래에 위치하게 되었습니다. 이동기준이 왼쪽, 위 모서리라서 이러한 결과가 나온 것입니다.
이를 해결하기위해 코드 마지막줄에transform: translate(-50%, -50%)을 추가하여 수정 이동을 하여 정중앙에 위치 시킬 수 있습니다.
