CSS자체가 어렵기도 하고 디자인적인 감각이 부족하기 때문에 다른 사이트의 로그인 페이지를 카피하고자 한다.
일단 버튼들을 비슷하게 구성하고 form태그를 삽입하자
~/flask01/templates/new_login.html을 생성한다.
네이버 페이지의 html 소스를 분석해보자
F12를 들어가서 개발자도구를 들어가 Elements탭을 클릭한 뒤 가장 왼쪽의 화살표를 클릭한 후 로그인 화면에 가저가보자
아래와 같이 화면이 어떻게 구역이 나뉘어져있는지, Elements 탭에는 어떤 Class와 Tag들이 사용되었는지 알 수 있다.
그리고 하단에는 Style이라고하여 어떤 CSS가 사용되었는지 볼 수 있다.
이것들을 참고하여 인스타그램의 로그인 화면을 만들어보자
결과
더 이상은 못하겟다...
이정도 만드는데도 한참 걸렸다 역시 CSS는 너무 어려운것 같다...
이번 작업중 icon 작업이 가장 힘들었는데 아이콘의 위치가 absolute가 걸려있는데 동적으로 어떻게 처리하는지 전혀 모르겠더라...
화면을 줄여버리자 날아가버리는 아이콘
이제 파이썬과 연동만 하면 과제 끝
수정된 app.py
# 이상 생략
@app.route('/login', methods=['GET'])
def login_get():
msg = request.args.get('msg')
print("msg: ",msg )
return render_template('new_login.html', msg=msg)
#이하 생략
html 소스코드
<html>
<body >
<header class="heaer">
<div class="heaer_inner">
<img src="" alt="">
</div>
</header>
<div class="content" style="margin-top: 20%;">
<div class="login_wrap">
<!-- <ul class="menu_wrap" role="tablist">
<li class="menu_item" role="presentation">
<span class="menu_text menu_qr"><span class="text">ID 로그인</span></span>
</li>
<li class="menu_item" role="presentation">
<span class="menu_text"><span class="text">일회용 번호</span></span>
</li>
<li class="menu_item" role="presentation">
<span class="menu_text"><span class="text">QR코드</span></span>
</li>
</ul> -->
<ul class="panel_wrap">
<li class="panel_item">
<form method="POST" action="/login">
<div class="panel_inner">
<div class="id_pw_wrap">
<div class="input_row" id="id_line">
<div class="icon_cell" id="id_cell">
<span class="icon_id">
<span class="blind">아이디</span>
</span>
</div>
<input type="text" id="id" name="id" placeholder="아이디" title="아이디" class="input_text" maxlength="41" value="">
<span role="button" class="btn_delete" id="id_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>
<div class="input_row" id="pw_line">
<div class="icon_cell" id="pw_cell">
<span class="icon_pw">
<span class="blind">비밀번호</span>
</span>
</div>
<input type="password" id="pw" name="pw" placeholder="비밀번호" title="비밀번호" class="input_text" maxlength="16">
<span role="button" class="btn_delete" id="pw_clear" style="display: none;">
<span class="icon_delete">
<span class="blind">삭제</span>
</span>
</span>
</div>
</div>
<div class="btn_login_wrap">
<button type="submit" class="btn_login" id="log.login">
<span class="btn_text">로그인</span>
</button>
{% if msg != '' and msg != None %}
{{msg}}
{% endif %}
</div>
</div>
</form>
</li>
</ul>
</div>
</div>
</body>
</html>
<style>
.btn_login .btn_text {
font-size: 20px;
font-weight: 700;
line-height: 24px;
color: #fff;
}
body {
font-family: -apple-system,BlinkMacSystemFont,helvetica,"Apple SD Gothic Neo",sans-serif;
}
button, input, select, textarea {
border-radius: 0;
border: none;
background: 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
text-decoration: none;
cursor: pointer;
-webkit-text-size-adjust: none;
}
.input_row {
/* position: relative; */
display: block;
/* height: 100%; */
border: 1px solid #dadada;
padding: 16px 18px 15px;
border-radius: 6px;
box-sizing: border-box;
text-align: left;
box-shadow: 0 2px 6px 0 rgba(68,68,68,.08);
}
.id_pw_wrap .input_row:last-child {
border-radius: 0 0 6px 6px;
}
.btn_login {
margin-top: 20px;
display: block;
width: 100%;
padding: 13px 0 13px;
border-radius: 6px;
border: solid 1px rgba(0,0,0,.15);
background-color: #03c75a;
box-sizing: border-box;
}
.id_pw_wrap .input_row .icon_cell .icon_pw {
background-position: -129px -203px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* 아이디 아이콘 */
.id_pw_wrap .input_row .icon_cell .icon_id {
position: absolute;
top: 24.4rem;
left: 43.8rem;
margin-top: -8px;
background-position: -93px -203px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
/* pw 아이콘 */
.id_pw_wrap .input_row .icon_cell .icon_pw {
position: absolute;
top: 27.4rem;
left: 43.8rem;
margin-top: -8px;
background-position: -129px -203px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
.bullet_help, .captcha_form .image::after, .captcha_form .reload::after, .captcha_form .voice::after, .captcha_wrap .voice_box .icon_voice, .chatbot .icon_chatbot, .icon_delete, .id_pw_wrap .input_row .icon_cell .icon_id, .id_pw_wrap .input_row .icon_cell .icon_pw, .id_pw_wrap .input_row.on .icon_cell .icon_id, .id_pw_wrap .input_row.on .icon_cell .icon_pw, .img_lock, .img_wowpoint, .ip_relogin_box .relogin_close::after, .ip_relogin_box .relogin_tip::before, .keep_check .keep_text::before, .keep_check input:checked+.keep_text::before, .lang::after, .menu_id .menu_text::before, .menu_id.on .menu_text::before, .menu_id.on::after, .menu_ones .menu_text::before, .menu_ones.on .menu_text::before, .menu_ones.on::after, .menu_ones.on::before, .menu_qr .menu_text::before, .menu_qr.on .menu_text::before, .menu_qr.on::before, .nudge_banner .nudge_close .icon_nudge_close, .ones_text .bullet_set, .pop_img_lock, .qrcode_help_stepbox .popup_close::after, .qrcode_help_stepbox .step_title::before, .reconfirm_sub .captcha_form .image::after, .reconfirm_sub .captcha_form .reload::after, .reconfirm_sub .captcha_form .voice::after, .reconfirm_sub .captcha_wrap .voice_box .icon_voice, .sns_wrap li:nth-child(1) .sns_text::before, .sns_wrap li:nth-child(2) .sns_text::before, .sns_wrap li:nth-child(3) .sns_text::before, .step_ask .ask_text::before, .sub_desc .bullet_greendot, .sub_desc .bullet_lens, .time_wrap .btn_renewal::before {
background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_01_login_008d5216.png);
background-size: 266px 225px;
/* background-repeat: no-repeat; */
}
.input_text {
padding-left: 10px;
position: relative;
display: block;
width: 100%;
font-size: 16px;
font-weight: 400;
line-height: 19px;
letter-spacing: -.5px;
color: #222;
box-sizing: border-box;
z-index: 4;
}
.id_pw_wrap .input_row {
display: table;
table-layout: fixed;
width: 100%;
padding: 14px 17px 13px;
box-sizing: border-box;
}
.id_pw_wrap .input_row:first-child {
border-radius: 6px 6px 0 0;
box-shadow: none;
}
.panel_inner {
padding: 20px 28px;
}
.panel_item {
border: 1px solid #c6c6c6;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 5px 8px 0 rgba(68,68,68,.04);
}
ol, ul {
list-style: none;
}
.login_wrap {
box-sizing: border-box;
width: 460px;
margin: 0 auto;
}
/*
.menu_item {
position: relative;
display: table-cell;
vertical-align: top;
}
.menu_wrap {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
.header .logo {
background-image: url(https://ssl.pstatic.net/static/nid/login/m_sp_00_common_978240a6.png);
background-size: 244px 107px;
background-repeat: no-repeat;
display: inline-block;
margin-top: 108px;
vertical-align: top;
background-position: 0 -51px;
background-repeat: no-repeat;
width: 155px;
height: 30px;
}
.header .header_inner {
position: relative;
width: 743px;
margin: 0 auto;
text-align: center;
box-sizing: border-box;
}
.header {
padding-bottom: 48px;
box-sizing: border-box;
}
*/
</style>
비고
사실 로그인 페이지의 html과 CSS를 받아온다면 더욱 간단히 피싱 사이트를 만들 수 있을것 이다.
login 페이지를 카피한 html과 다운로드 받은 w_20220216.css
브라우저에서 확인해 본다면?
하지만 공부니까....
header, content, footer 모두 동일한 디자인을 확인 할 수 있다.
과제 끝
