티스토리 뷰
django 내용은 아니지만 지금 나를 도와주고 있는 친구가 페북 틀만 CSS로 따라서 만들어 보라 그래서 우선 로그인 화면만 만들어보았다. (동형암호 보고서 내느라 정신이 없어 1주일만에 코딩을 했다.)
부트스트랩 안 쓰고 CSS 복습 용으로 CSS로만 만들어서 조금 어색할 순 있다. (박스 크기나 색깔은 그냥 대충 비슷해보이는 걸로 함) 완전한 모습을 원하시는 분이면 보지 않기를 추천한다. 그리고 정말 기초적인 내용으로 만든거라 따로 설명도 하지 않겠다. (다음에는 프로필 부분을 따라 만들 것이다.)
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>facebook_copy</title>
<link rel="stylesheet" href="facebook_copy.css">
</head>
<body>
<div class="init">
<div class="frame">
<div class="logo">
<h2>Facebook</h2>
<h3>Facebook에서 전세계에 있는 친구, 가족, 지인들과 함께 이야기를 나눠보세요.</h3>
</div>
<div class="authentication">
<form class="login" action="#" method="#">
<input type="text" placeholder="Email address"><br><br>
<input type="password" placeholder="Password"><br><br>
<button type="submit" class="submit">Login</button><br><br>
<a href="#" class="">비밀번호를 잊어버리셨나요?</a>
<hr>
<button type="button" class="signup">회원가입</button>
</form>
</div>
</div>
</div>
</body>
</html><css>
body{
background-color:rgb(245, 245,245);
}
.init{
width: 60%;
margin: 0 auto;
margin-top: 200px;
}
.frame{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.logo h2{
font-size: 50px;
font-weight: 700;
color: rgb(35, 60, 235);
padding: 30px;
margin: auto;
}
.logo h3{
margin-right: 30px;
margin-left: 20px;
}
.authentication{
background-color: white;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
border-radius: 6px;
}
.login{
border-radius: 8px;
padding: 25px;
text-align: center;
}
.login input{
font-size: 25px;
line-height: 50px
}
.login .submit{
font-size: 25px;
width: 275px;
background-color: #1877f2;
color: #fff;
}
.login .signup{
font-size: 25px;
background-color: #0ae728;
color: #fff;
padding-left: 25px;
padding-right: 25px;
}
뭔가 주커버그가 페이스북 처음 만들었을 때도 이거보단 잘 만들었을 것 같은 후진 느낌이다. ㅋㅋㅋㅋㅋ
'django' 카테고리의 다른 글
| django / 검색 기능 (0) | 2021.01.03 |
|---|---|
| django / 게시글 정렬 구현 (0) | 2021.01.03 |
| django / multiple authentication backends 에러 처리 (1) | 2020.12.29 |
| django / 비밀번호 변경 (0) | 2020.12.29 |
| django / 소셜 로그인 구현 (0) | 2020.12.29 |
댓글