html form관련한 질문입니다
본문
요런식으로 html만들고싶어..문의드립니다..굉장히어렵네요..
답변 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
* { margin: 0; padding: 0; }
/* for flexible test */
/* .wrap { position: absolute; width: 50%; left: 20%; top: 30%; } */
.frm * { box-sizing: border-box; }
.frm { background-color: #eee; display: inline-block; width: 100%; }
.frm fieldset { background-color: #fff; margin: 0.5em; border: 0.08em solid #ccc; }
.frm legend { display: none; }
.frm ul { list-style-type: none; }
.frm ul li { border-bottom: 0.08em solid #ddd; }
.frm ul li:last-child { border-bottom: 0 none; }
.frm input { width: 100%; border: 0 none; padding: 1.0em; }
.frm input {
background-image: url(https://thumb7.shutterstock.com/display_pic_with_logo/1660276/428770555/stock-vector-simple-set-of-interface-related-vector-line-icons-contains-such-icons-as-accept-decline-zoom-428770555.jpg);
background-repeat: no-repeat;
}
.frm input[name="id"] { background-position: calc(100% + 350px) 80%; }
.frm input[name="pw"] { background-position: calc(100% + 350px) 58%; }
.frm input[name="pw_confirm"] { background-position: calc(100% + 350px) 36%; }
.frm input[type="radio"] { width: auto; }
.hide { display: none; }
.ta_c { text-align: center; }
.width_48 { display: inline-block; width: 48%; }
.frm a.instead_radio {
text-decoration: none;
background-color: #fff;
border: 0.08em solid #ccc;
border-right: 0 none;
color: #777;
margin: 0.3em 0 0.3em 0;
padding: 0.4em 0;
text-align: center;
}
.frm a.instead_radio:last-child {
border-right: 0.08em solid #ccc;
}
.frm a.instead_radio:hover,
.frm a.instead_radio:active {
background-color: #777;
color: #eee;
}
</style>
</head>
<body>
<div class="wrap">
<form class="frm">
<fieldset>
<legend>accout</legend>
<ul>
<li><input type="text" name="id" placeholder="아이디" /></li>
<li><input type="password" name="pw" placeholder="비밀번호" /></li>
<li><input type="password" name="pw_confirm" placeholder="비밀번호 재확인" /></li>
</ul>
</fieldset>
<fieldset>
<legend>personal</legend>
<ul>
<li><input type="text" name="nm" placeholder="이름" /></li>
<li class="ta_c">
<div class="hide">
<input type="radio" value="male" />남자
<input type="radio" value="female" />여자
</div>
<a href="#" class="width_48 instead_radio">남자</a><a href="#" class="width_48 instead_radio">여자</a>
</li>
</ul>
</fieldset>
</form>
</div>
</body>
</html>
그렇게 만드시면 되는데,
어떻게 뭐라고 답변을 드리면 좋을까요 ?
외주도 아니고
제작문의도 아니고
막힌 부분에 대한 질문도 아니고
'질문하는 방법'이 기묘한 느낌입니다
답변을 작성하시기 전에 로그인 해주세요.
