728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div, form{
box-sizing: border-box;
}
/* 통합시 제거할 속성*/
#content_3{
width :300px;
height: 600px;
}
#login_form{
width: 100%;
height: 30%;
}
/* #login_form>div, #login_form>form{ */
#login_form>*{
width: 100%;
}
#login_form_input{
height: 80%;
}
#login_form_etc{
height: 20%;
text-align: center; /* 요소 가운데 정렬*/
line-height: 30px;
}
#login_form_etc>a{
text-decoration: none;
color:black;
margin:10px;
font-size:12px;
}
#login_form_input>*{
height: 100%;
float: left;
}
#login_form_input_idPwd{
width: 65%;
}
#login_form_input_idPwd>input{
width: 100%;
height: 50%;
box-sizing: border-box;
}
#login_form_input_btn{
width: 35%;
}
#login_form_input_btn>input{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="content_3">
<!-- 1. 로그인 전체폼을 감싸는 div태그 -->
<div id="login_form">
<!-- 2_1. 입력을 받는 input요소들이 위치할 form 영역-->
<form action="test" id="login_form_input">
<!-- 3_1. 왼쪽 : 아이디, 비밀번호를 입력받을 input태그 영역-->
<div id="login_form_input_idPwd">
<input type="text" name="userId" placeholder="아이디 입력"><br>
<input type="password" name="userPwd" placeholder="비밀번호 입력">
</div>
<!-- 3_2. 오른쪽 : 큼지막한 버튼 영역-->
<div id="login_form_input_btn">
<input type="submit" value="로그인">
</div>
</form>
<!-- 2_2. 회원가입, id/pwd찾기 페이지 요청 a태그들이 위치할 div-->
<div id="login_form_etc">
<a href="">회원가입</a>
<a href="">ID/PWD 찾기</a>
</div>
</div>
</div>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| css 홈페이지화면구성 메뉴바 만들기 HTML (0) | 2023.05.19 |
|---|---|
| css 홈페이지화면구성 검색창 만들기 HTML (0) | 2023.05.18 |
| css 홈페이지구조잡기 세부_푸터바만들기 HTML (0) | 2023.05.18 |
| css 홈페이지 화면구조잡기(상세구조) 실습 HTML (0) | 2023.05.17 |
| 화면구조잡기 HTML (0) | 2023.05.17 |