1. html
<body>
<div id="wrap">
<div id="login_area">
<div id="login_header">
<img src="./images/logo_mwusinsa.svg">
</div>
<form>
<input type="text" placeholder="아이디를 입력해 주세요."><br>
<input type="password" placeholder="비밀번호를 입력해 주세요."><br>
<button type="submit">로그인</button>
</form>
<div id="auto_login">
<input type="radio"> 자동로그인
</div>
<div id="menu">
<span>회원 가입</span><span>아이디 찾기</span><span>비밀번호 찾기</span>
</div>
</div>
</body>
2. css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrap{
width: 400px;
height: 900px;
margin-left: 50px;
}
#wrap>#login_area{
width: 400px;
height: 400px;
padding-top: 50px;
}
#wrap>#login_area>#login_header{
padding-left: 70px;
padding-bottom: 50px;
}
#wrap>#login_area>form{
padding-left: 25px;
}
#wrap>#login_area>form>input{
width: 330px;
height: 50px;
margin-bottom: 10px;
border: 1px solid black;
color: rgb(174, 182, 193);
font-size: 13px;
padding-left: 10px;
font-weight: 500;
}
#wrap>#login_area>form>button{
width: 330px;
height: 60px;
margin-top: 10px;
margin-bottom: 20px;
color: white;
background-color: black;
font-size: 15px;
font-weight: bold;
}
#wrap>#login_area>#auto_login{
padding-left: 25px;
margin-bottom: 30px;
color: rgb(174, 182, 193);
font-size: 14px;
font-weight: bold;
}
#wrap>#login_area>#menu{
padding-left: 15px;
color: rgb(174, 182, 193);
font-size: 14px;
font-weight: bold;
}
#wrap>#login_area>#menu>span:first-of-type,span:nth-child(2){
border-right: 1px solid rgb(174, 182, 193);
padding-right: 20px;
padding-left: 20px;
}
#wrap>#login_area>#menu>span:nth-child(3){
padding-left: 20px;
}
- 메뉴 가상요소로 구분 bar 넣기-
[HTML][CSS] css가상요소 이용해서 구분 bar 넣기(로그인창 옵션)
0. 로그인창 옵션 >> 전에 포스팅했던 무신사 로그인 창 옵션 부분을 가상요소를 이용해서 다시 만들어보았습니다. 1. html 회원 가입 아이디 찾기 비밀번호 찾기 > util_menu 클래스를 만들어 옵션 넣
ddoddo27.tistory.com
'HTML & CSS' 카테고리의 다른 글
| [HTML][CSS] form 태그, label태그 (0) | 2020.12.25 |
|---|---|
| [HTML][CSS] input 태그 -placeholder,value,checkbox,radio등 (0) | 2020.12.24 |
| [HTML][CSS] audio, video, embed 태그 (0) | 2020.12.23 |
| [HTML][CSS] :first-child, :first-of-type,:nth-child 선택자 (0) | 2020.12.22 |
| [HTML][CSS] display 속성 - block, inline, inline-block (0) | 2020.12.21 |