21년이되며 크라우드 펀딩 프로젝트를 새로 시작하게되었다.
그리고 우리 제품을 홍보할 수 있도록 홈페이지를 만들기로하였다.
홈페이지 제작은 내가 맡게되었지ㅎㅎ(두근두근)
요즘 스파르타 코딩클럽 강의를 들으며 코수정란(?)에서 코린이(?)로 성장 중이며, 1주차 강의부터 복습하며 우리 홈페이지를 만들어 보려한다.
첫번째로 로그인 페이지!
심플함을 추구하니..(절대 나의 한계가 아니다^^ 그저 심플함을 추구 할뿐이다(🤣)
이 화면을 만들기위해 짠 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
.login {
width: 500px;
margin: 200px auto auto auto;
}
.title{
margin: 0px 0px 0px 150px;
}
.id{
margin: 20px 0px 0px 160px;
}
.pw{
margin: 20px 0px 0px 160px;
}
.button{
margin: 20px 0px 0px 160px;
}
</style>
</head>
<body>
<div class = "login">
<h1 class = "title">로그인 페이지</h1>
<hr>
<p class = "id">ID: <input type="text" /></p>
<p class = "pw">PW: <input type="text" /></p>
<p class = "button"><button>로그인 하기</button></p>
<hr>
</div>
</body>
</html>이렇게 코수정란(?) 나는 class 하나하나 이름을 주어 margin을 넣어주었다.
하지만 강의를 다시 들으며 text-align을 넣어주면 된다는 것을 (그걸 이제야😓)깨달았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<style>
.login {
width: 500px;
margin: 200px auto auto auto;
text-align: center;
}
</style>
</head>
<body>
<div class = "login">
<h1 class = "title">로그인 페이지</h1>
<hr>
<p class = "id">ID: <input type="text" /></p>
<p class = "pw">PW: <input type="text" /></p>
<p class = "button"><button>로그인 하기</button></p>
<hr>
</div>
</body>
</html>훨씬 깔끔 간단-!
폰트도 변경해준다.
구글폰트에서 가져온 노토산스
부트스트랩 이용하기
아래의 부트스트랩 탬플릿을 활용해 버튼을 간편하게 변경해주었다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title></title>
</head>
<body>
</body>
</html>버튼으로 마우스를 가져가면 흰색버튼이 아래처럼 색이 변하며 마우스도 손가락으로 변한다. 후후
점점 그럴싸해지는 첫 홈페이지 아주 기대중이다😆
매일 배우고 성장 중 담는 개인기록