๋ฐ์ํ
HTML ๊ณผ CSS๋ก ํ์๊ฐ์ ํผ ๋ง๋ค๊ธฐ
์ธ ๋ฒ์งธ ํ์ ๋ง๋ค๊ธฐ ํผ์ด๋ค.
ํ์ ๋ง๋ค๊ธฐ ํผ์ CSS๋ฅผ ์ฌ์ฉํ ๊ฒ์ ์ฒ์์ธ๋ฐ
์๊ฐ๋ณด๋ค ๊ฒฐ๊ณผ๊ฐ ๋์์ง ์๋ค.
์ด๋ ๊ฒ ์ ์ ์ฑ์ฅ ํ๋ ๊ฑธ๊น?๐ฅฐ ๋ณ ๊ฑฐ ์๋์ง๋ง ๋ฟ๋ฏํ๋ค.
๋์ค์ ๋ ๋ง์ ๊ธฐ๋ฅ์ ๋ฃ๊ณ
์ง๊ธ ๋ง๋ ๊ฒ๊ณผ ์ฝ๋๋ฅผ ๋น๊ตํ๋ฉฐ ๊ฐ์ ํ๋ฉด ์ข์ ๋ฏ ํ๋ค.
๐ก ์ด์ ์ ์์ฑํ ํ์๊ฐ์ ํผ๊ณผ ๋น๊ตํด๋ณด์ธ์.
์ฒซ ๋ฒ์งธ ํ์๊ฐ์ ํผ (ํด๋ฆญ)
๋ ๋ฒ์งธ ํ์๊ฐ์ ํผ (ํด๋ฆญ)
์ฝ๋
<HTML>
<!DOCTYPE html>
<html lang="ko">
<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>์์ฝฉ ์ฝ๋ฉ์ค์ฟจ ํ์๊ฐ์
</title>
<link rel="stylesheet" href="./day3_4.css"/>
</head>
<body>
<div class="main" style='box-shadow:1px 1px 7px 0px rgb(115, 115, 243)'>
<div class="header"><h1>์์ฝฉ ์ฝ๋ฉ์ค์ฟจ ํ์๊ฐ์
</h1></div>
<form>
<input id="email" type="email" placeholder="์ด๋ฉ์ผ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="name" type="text" placeholder="์ด๋ฆ์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="pw" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<input id="confirm_pw" type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ๋ค์ ์
๋ ฅํด์ฃผ์ธ์." required />
<br>
<div class="num>">
<input type='tel' id="tel" name='userPhoneNumber' placeholder="010" maxlength="3" required /> -
<input type='tel' id="tel" name='userPhoneNumber' placeholder="1234" maxlength="4" required /> -
<input type='tel' id="tel" name='userPhoneNumber' placeholder="5678" maxlength="4" required />
</div>
<div class="cert">
<div class="cert1">
<span id="sp1">00000000</span>
<button id="certsubmit" type="submit" class="pure-button pure-button-primary">์ธ์ฆ๋ฒํธ์ ์ก</button>
</div>
<span id="sp2" >3:00</span>
<button id="certcheck" type="submit" class="pure-button pure-button-primary">์ธ์ฆ์๋ฃ</button>
</div>
<select>
<option size="1" disabled selected>์ง์ญ์ ์ ํํ์ธ์.</option>
<option>์์ธ</option>
<option>๊ฒฝ๊ธฐ๋</option>
<option>์ ์ฃผ</option>
<option>์ถฉ์ฒญ๋</option>
<option>์ ๋ผ๋</option>
<option>๊ฒฝ์๋</option>
</select>
<br>
<div class="gender">
<input type="radio" value="female" name="gender" />์ฌ์ฑ
<input type="radio" value="male" name="gender" />๋จ์ฑ<br/>
</div>
<button type="submit" id="join" class="pure-button pure-button-primary">๊ฐ์
ํ๊ธฐ</button>
</form>
</div>
</body>
</html>
<CSS>
*{
box-sizing: border-box;
}
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.main{
border: 2px solid gray;
padding: 10px 80px 30px;
margin-bottom: 30px;
margin-top: 20px;
border-radius: 10px;
width: 460px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header{
margin-bottom: 30px;
}
h1{
color: rgb(76, 18, 238);
font-size: 25px;
}
#email{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
#name{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
#pw{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
#confirm_pw{
margin-bottom: 10px;
width: 350px;
height: 40px;
}
.num{
margin-bottom: 10px;
}
#tel{
border: 1px solid gray;
width: 101.5px;
height: 40px;
border-radius: 10px;
text-align: center;
}
.cert{
margin-bottom: 5px;
float: right;
}
span{
margin-bottom: 10px;
margin-right: 10px;
}
#sp1{
color: blue;
font-size: 15px;
margin-right: 20px;
margin-left: 20px;
}
#sp2{
color: blue;
font-size: 15px;
margin-right: 40px;
margin-left: 40px;
}
.cert1{
margin-top: 20px;
margin-bottom: 20px;
}
#certsubmit{
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid gray;
color: gray;
height: 30px;
width: 120px;
}
#certcheck{
background-color: whitesmoke;
border-radius: 5px;
border: 1px solid gray;
color: gray;
height: 30px;
width: 120px;
}
select{
margin-top: 20px;
margin-bottom: 20px;
width: 350px;
height: 40px;
}
.gender{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
font-size: 15px;
}
#join{
margin-bottom: 10px;
background-color: whitesmoke;
width: 350px;
height: 40px;
border-radius: 10px;
color: gray;
border: 1px solid gray;
}
๊ฒฐ๊ณผ
See the Pen Brand New join form by Kong Yang (@Kong-Yang) on CodePen.
๋ฐ์ํ
