<!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>Example01</title>
<link rel = "stylesheet" href="./style.css"/> <!-- css 파일에 속성 정의 -->
</head>
<body>
<!-- 네이버 회원가입 화면-->
<!-- 레이아웃 구성 -->
<!-- 컨테이너 레이아웃 -->
<div>
<!-- 가운데 레이아웃 -->
<div>
<!-- 로고 레이아웃 -->
<div id="logo-container">
<a id=logo>
NAVER
</a>
</div>
<!-- 컨테이너 레이아웃 -->
<div id="container">
<!-- 아이디 레이아웃 -->
<div class="content">
<div class="input-label">아이디</div>
<div class="inline">
<input class="input-style" type="text" />
</div>
</div>
<br />
<!-- 비밀번호 레이아웃 -->
<div class="content">
<div class="input-label">비밀번호</div>
<div class="inline">
<input class="input-style" type="password" />
</div>
</div>
<br />
<!-- 비밀번호 확인 레이아웃 -->
<div class="content">
<div class="input-label">비밀번호 확인</div>
<div class="inline">
<input class="input-style" type="password" />
</div>
</div>
<br />
<!-- 이름 레이아웃-->
<div class="content">
<div class="input-label">이름</div>
<div class="inline">
<input class="input-style" type="text" />
</div>
</div>
<br />
<!-- 생년월일 레이아웃-->
<div class="content">
<div class= "input-label">생년월일</div>
<div class="flex">
<!-- stlye display 요소를 inline으로 적용해서 바꿔줌-->
<div class="flex-1">
<input class = "input-middle-style" type="number" placeholder="년 (4자리)">
</div>
<div class="flex-1">
<!-- select -->
<select class="input-middle-style">
<option>월</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="flex-1">
<input class="input-middle-style" type="number" placeholder="일">
</div>
</div>
</div>
<br />
<!-- 버튼 레이아웃 -->
<div class="content">
<div class="inline">
<button class="join-button">가입하기</button>
</div>
</div>
</div>
<br />
</div>
</div>
</body>
</html>
style.css
body {
margin: 0;
}
a {
/* TEXT의 기본 꾸밈 제거 */
text-decoration: nones;
color: black;
}
#container{
margin : 0 auto;
min-width: 460px;
max-width: 768px;
}
#logo-container{
padding-top: 60px;
padding-bottom: 20px;
}
#logo {
/* 가로 가운데 정렬 */
margin: 0 auto;
display: block;
width: 240px;
height: 44px;
/*배경 이미지*/
background: url(https://static.nid.naver.com/images/ui/join/m_naver_logo_20191126.png);
/*빈 공간에 배경 이미지를 반복해서 보여줄건지*/
background-repeat: no-repeat;
background-size: 240px auto;
font-size: 0;
}
.inline{
display: inline;
}
.flex{
display: flex;
width: 100%;
justify-content: space-between;
}
.flex-1{
flex: auto;
}
.content{
width: 460px;
margin: 0 auto;
}
.input-style {
width: 430px;
height: 29px;
padding-left: 14px;
padding-right: 14px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #dadada;
}
.input-middle-style{
width: 119px;
display: block;
padding-left: 14px;
padding-right: 14px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #dadada;
}
.input-label {
margin-top: 19px;
margin-bottom: 8px;
/* 글자의 크기 */
font-size: 14px;
/* 글자의 굵기 */
font-weight: 700;
}
.join-button{
width: 100%;
margin-top: 30px;
padding-top: 15px;
padding-bottom: 15px;
font-size: 18px;
font-weight: 700;
color: #ffffff;
border: none;
background-color: #03c75e;
}
댓글