오늘은 간단한 로그인 폼 만들기 연습을 해보았습니다.
따라해 볼 모델은 다음과 같습니다
HTML
<!DOCTYPE html>
<html>
<head>
<title>로그인 폼</title>
<link href="./index_default.css" rel="stylesheet" />
</head>
<body>
<div class="device">
<h2>Sign in</h2>
<div class="login_form">
<input type="email" placeholder=" email" class="email" />
<input type="password" placeholder=" password" class="password" />
</div>
<div class="forgot_password">
<h3>Forgot Password?</h3>
</div>
<div class="remember_me">
<input type="checkbox" />
<label for="remember_me"><b>Remember Me</b></label>
</div>
<div class="sign_in_button">
Sign in
</div>
<div class="or">
<b>OR</b>
</div>
<div class="another_login">
<div class="twiter">twiter</div>
<div class="facebook">facebook</div>
</div>
<div class="need_an_account">
<span id="need_an_account"><b>need an account?</b></span>
<span id="sign_up"><b>Sign up</b></span>
</div>
<div class="forgot_your_password">
<span id="forgot_your_password"><b>forgot your password?</b></span>
<span id="retrive"><b>Retrive</b></span>
</div>
</div>
<script>
sign_button = document.querySelector('.sign_in_button');
function clickMenuHandler(){
sign_button.classList.add('button_active');
}
sign_button.addEventListener('click', clickMenuHandler);
</script>
</body>
</html>
CSS
.device{
position: absolute;
top: 50%;
left: 50%; // 컨테이너 시작점이 가운데로 배치되기 때문에 밑처럼 해줘야
margin: -300px 0 0 -150px; //1-4줄까지 화면 크기를 바꿔도 유동적으로 가운데 정렬
width: 300px;
height: 600px;
border: 1px solid whitesmoke;
border-radius: 20px;
padding: 10px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
//수평그림자길이-양수, 수직그림자길이-양수, 그림자의 흐림반경(blur값), 그림자의 확산거리(spread값)- x, 그림자 색
}
h2{
text-align: center;
}
.login_form{
width: 280px;
margin-top: 60px;
display: flex;
flex-direction: column; //default값이 row이므로 수직정렬을 위해서 column으로 설정한다
}
.email{
margin-bottom: 10px;
border-radius: 5px;
}
.password{
border-radius: 5px;
}
.forgot_password{
font-size: 10px;
color: red;
text-align: right;
padding-right: 10px;
}
.remember_me{
font-size: 12px;
color: gray;
}
.sign_in_button{
margin-top: 30px;
background-color: red;
border-radius: 20px;
color: white;
text-align: center;
width: 280px;
height: 40px;
font-size: 10px;
line-height: 40px;
}
.button_active{
background-color: blue;
}
.or{
color: gray;
text-shadow: gray;
margin-top: 30px;
margin-bottom: 20px;
}
.another_login{
width: 285px;
height: 40px;
display: flex;
justify-content: space-between;
}
.twiter{
background-color: darkblue;
width: 128px;
height: 39px;
border-radius: 20px;
text-align: center;
color: white;
font-size: 10px;
line-height: 39px; //텍스트 수직 가운데 정렬
}
.facebook{
background-color: lightblue;
width: 128px;
height: 39px;
border-radius: 20px;
text-align: center;
color: white;
font-size: 10px;
line-height: 39px;
}
.need_an_account{
margin-top: 30px;
font-size: 13px;
}
#need_an_account{
color: gray;
}
#sign_up{
color: red;
}
.forgot_your_password{
font-size: 13px;
margin-top: 6px;
}
#forgot_your_password{
color: gray;
}
#retrive{
color: red;
}
+ 새로 배운 내용 정리
<label for="input_name">Name : </label>
<input id="input name" type="text">input은 html에서 많이 쓰는 element 중 하나이다. 따라서 고유의 id 값을 쓰면 좋다.
또한 label 과 보통 같이 쓰는데 input 이 뭔지를 나타내주기 위해 보통 input id와 동일하게 작성한다.
그리고 둘다 inline 속성이므로 한 줄에 같이 표시된다.
a[href^="naver"] {
color: puple;
}속성 값을 [ ] 안에 작성한다. 클래스 또한 속성 값이다.
예시: <p class="editor-note">My cat is very grumpy</p> 이라면 class 부분이 Attribute 이다.
^ 뜻은 속성 값 href 가 naver로 시작하면 글자 색을 보라색으로 바꾼다.
a[href$=".com"] {
color: purple;
}href 속성값이 .com 으로 끝나는 a 태그에 모조리 적용시키고 싶다면 $ 를 붙이도록 한다.
// HTML
<ol>
<li id="special>First</li>
<li>Second</li>
</ol>// CSS
li#special {
color: pink;
}li 의 id값이 special 만 적용한다.
'👩🏻💻 TIL' 카테고리의 다른 글
| Sqld 2과목 3장 필기 정리 (0) | 2021.05.12 |
|---|---|
| 2020_05_27_TIL (0) | 2020.05.27 |
| 2020_05_26_TIL (0) | 2020.05.27 |
| 2020_05_23_TIL (0) | 2020.05.23 |
| 2020_05_09_TIL (0) | 2020.05.09 |