HTML/DAY 30 _ 23.10.05
Login page Basic
민지짱민지최고
2023. 10. 11. 09:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<!-- left side start -->
<div class="col">
<div class="row mt-5">
<div class="col text-center fs-4 fw-bold">
이거시 광고! 이미지 가운데 정렬이뭘까
</div>
</div>
<div class="row">
<div class="col">
<img class="img-thumbnail" src="./img/jjangguAd.jpeg">
</div>
</div>
</div>
<!-- left side end -->
<!-- middle start -->
<div class="col-6">
<!-- LOGO start -->
<div class="row mt-5">
<div class="col">
<img class="img-fluid" src="./img/jjangguLogo.jpg">
<!-- img : img-fluid를 쓰면 사진을 비율에 맞춰줌. -->
</div>
</div>
<!-- LOGO end -->
<!-- ID start -->
<div class="row mt-5">
<div class="col text-center fs-4 fw-bold"> ID
<!-- font관련 class들
font size , font weight -->
</div>
<div class="col-10">
<input class="form-control" type="text" placeholder="아이디">
<!-- form-control : 웬만한 input들에 쓰면 좋다 -->
</div>
</div>
<!-- ID end -->
<!-- PW start -->
<div class="row mt-2 mb-3">
<div class="col text-center fs-4 fw-bold">PW</div>
<div class="col-10">
<input class="form-control" type="password" placeholder="비밀번호">
<!-- placeholder : 요즘스타일로 form안에 연한색 글씨 rgrg? -->
</div>
</div>
<!-- PW end -->
<!-- Button start -->
<div class="row"></div>
<div class="col d-grid">
<!-- d-grid : 넓은정렬 = 버튼에 필수! -->
<input class="btn btn-primary" type="button" value="Login">
</div>
<div class="row"></div>
<div class="row mt-2">
<div class="col d-grid">
<a class="btn btn-outline-primary" href="./resister.html">회원가입</a>
</div>
</div>
<div class="row mt-2">
<div class="co1 text-center text-secondary fs-6">
아직 회원이 아니라면 <span class="fw-bold fs-6 text-danger">당장 가입</span>하세요! 이득임!!
</div>
</div>
<!-- Button end -->
</div>
<!-- middle end -->
<!-- right side start -->
<div class="col"></div>
<!-- right side end -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
이거시 광고! 이미지 가운데 정렬이뭘까
