2022.04.26
웹 css 전체 중앙 정렬
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Nanum+Pen+Script&family=Nunito:wght@200&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="container">
<div class="titlebox">
<h1 class="mytitle">로그인 페이지</h1>
<p class="titleTxt">아이디와 비밀번호를 입력해주세요</p>
</div>
<div>
<p>ID: <input type="text"></p>
<p>PW: <input type="text"></p>
<button class="myBtn">로그인하기</button>
</div>
</div>
</body>
</html>
mystyle.css
.container {
/*background-color: green;*/
width: 400px;
margin: auto;
text-align: center;
}margin:auto 는 구역들이 중앙 정렬 되는거고
text 같은 요소들은 기본 정렬댐
-----
text-align:center 해주면
글 요소들도 가운데 정렬이 댐
-----
크기를 볼라면 배경색을 넣어보고,(전체 다 잡혀 있으면 크기 조절)
크기를 정해주면 양옆으로 동등한 마진이 들어가서 중앙정렬이 댐
-----
button 중앙 정렬
.Btn{
margin: auto;
display: block;
}margin: auto;
display: block;
'coding > CSS' 카테고리의 다른 글
| 배경 이미지 넣기 공식 (0) | 2022.04.26 |
|---|---|
| 구글 웹폰트 (0) | 2022.04.26 |
| 부트스트랩 사용법 2 (0) | 2022.04.26 |
| 부트스트랩 사용법 (0) | 2022.04.26 |