스파르타 코딩클럽 웹개발 1주차 강의
만들어둔 로그인 화면을 가운데로 가져오려면 ?
개발일지(1)에서 만든 페이지의 내용을 가운데로 가져오려면 어떻게 해야할까
-박스를 씌운 다음 양쪽 여백이 같아진다면 ?
거꾸로 생각하면 내가 가운데 있다는 뜻이랑 같아진다 ?
양쪽 여백을 잡으려면 27일 개발일지(1)에서 작성한 여백 주는 법 padding or margin을 사용하면 될 것 같다. 안 쪽 여백을 줄 때 padding을 사용했으니까, div라는 박스 바깥의 여백을 줘야할 것 같다. 그럼 margin을 사용하면 되지 않을까? 일단 한 번 해보자.
일단 현재 페이지는 이렇다. 왼쪽에 다 붙어있는 모습을 볼 수 있다. 이걸 이제 가운데로 정렬해야 하는데,
<div class="title">
<h1>Log in page</h1>
<h5>ID, PW를 입력하세요.</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="password" /></p>
<button>로그인</button>현재 코드를 보면 div 태그 밑에 p 태그(문단 태그라고 보는 편이 쉬움)까지 전부 다 가운데로 옮겨야하기 때문에 div 태그를 한 번 더 감싸서 한 레이아웃에 넣는 게 좋을 것 같다는 생각이 들었다. 그래서 아래 코드를 보면 div 태그를 wrap 이라는 이름을 줘서 레이아웃을 크게 하나 더 설정했다.
<div class="wrap">
<div class="title">
<h1>Log in page</h1>
<h5>ID, PW를 입력하세요.</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="password" /></p>
<button>로그인</button>
</div>
일단 div 태그를 하나 더 만들었으니 wrap에 style을 추가해야 할 듯. (아직 레이아웃이 설정 됐는지 inspect 해서 보지 않으면 안보이니까 bgcolor을 설정해 봐야겠다.
.wrap{
background-color: lemonchiffon;
}style 태그 안에 .wrap{} 을 넣어서 background color을 lemonchiffon으로 설정했다. 보통 처음 시작하면 rgb밖에 안쓰던데 나는 그런 못생긴(?) 쨍한 색들이 눈이아파서 파스텔 컬러를 선호하는 편. 이렇게 코드를 작성하면 화면에는 아래 사진처럼 뜬다. 27일 개발일지(1)에서 본 것 처럼 div 레이아웃 전체에 배경색이 들어간 것을 알 수 있다.
그런데 이게 거의 웹 페이지에서 보이는 전체 가로길이만큼을 차지하고 있으니까 로그인 페이지 사이즈처럼 width를 줄여줘야 할 필요가 있을 듯.
.wrap{
background-color: lemonchiffon;
width: 300px;
}넓이를 로그인 div랑 똑같이 300px로 줄여줬으면, 이제 양 옆 여백을 맞출 수 있을 것 같다.
쭉- 미는 코드는 auto !
margin: 0px auto 0px auto;
위 코드처럼 해도 되고
margin-left: auto;
margin-right: auto;
이렇게 해도 되지만 나는 위쪽 여백도 주고 싶어서 4개 다 적는 걸로 .. !
.wrap{
background-color: lemonchiffon;
width: 300px;
margin: 80px auto 0px auto;
}위 코드에서 background-color만 없애면 이제 완성 - !
그럼 아래 사진처럼 로그인 페이지가 완성된다.
전 코드는 여기에 ↓↓↓ 💛💜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chloe's page</title>
</head>
<style>
.title {
color: white;
width: 300px;
height: 200px;
border-radius: 30px;
text-align: center;
padding-top: 40px;
background-image: url("https://cdn.sanity.io/images/1wyn2xo2/production/ffa5c1eac62729439af1304ed93847ea56c50e5e-2272x1128.jpg?fp-x=0.5&fp-y=0.7525672156054148&w=1088&h=612&fit=crop&crop=focalpoint&auto=format");
background-position: center;
background-size: cover;
}
.wrap{
width: 300px;
margin: 80px auto 0px auto;
}
</style>
<body>
<div class="wrap">
<div class="title">
<h1>Log in page</h1>
<h5>ID, PW를 입력하세요.</h5>
</div>
<p>ID : <input type="text" /></p>
<p>PW : <input type="password" /></p>
<button>로그인</button>
</div>
</body>
</html>
