퇴사를 하고 2020년 4월부터 종로그린컴퓨터아트학원에서 웹디자인과 html,css,jquery를 배우고있다.
웹디자이너&웹퍼블리셔 과정인데, 디자인은 흥미가 있어서 재밌게 배웠지만, 코딩은 어려워서 애쓰고 있다..^^
그래서 여기서 기록을 남기면서
복습을 하려고한다.
학원 시험으로 만들었던 테이블인데,
아이디, 비밀번호, 휴대폰 등 을 입력하는 테이블구성이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>테스트3</title>
<style>
//기본셋팅
@font-face{
font-family: "notom";
src:url('../../../font/NotoSansKR-Regular.eot');
src:url('../../../font/NotoSansKR-Regular.eot?#iefix') fotmat("eot"),
url('../../../font/NotoSansKR-Regular.woff') format("woff"),
url('../../../font/NotoSansKR-Regular.otf') format("opentype");
font-weight: normal;
font-style: normal;
}
//폰트를 참조해준다.
.font1 {font-family: notom; font-size: 12px; color: #333333; font-weight: bolder; position: absolute;}
.font2 {font-family: notom; font-size: 14px; font-weight: bold; color: #333333; position: relative; left: 50px;}
//폰트 정의
body { margin: 0; padding: 0; }
.btn0 {background-color: #0066ba; border: 0; color: #ffffff; border-radius: 5px; height: 100px; height: 40px;}
.btn1 {background-color: #0066ba; color: #ffffff; width: 100px; height: 30px; border: 0; border-radius: 5px; }
.btn2 {background-color: #aaaaaa; color: #ffffff; width: 100px; height: 30px; border: 0; border-radius: 5px; margin-left: 25px;}
//버튼 정의
.div1 {width: 1000px; height: 400px; border: 1px solid #cccccc; margin: 0 auto; font
family: 'notom'; position: absolute;}
.tablecss {width: 900px; height: 240px; border: 1px solid #0067b8; margin: 0 auto; list-style: none; padding: 0; position: relative; bottom: 20px; left: 45px;}
.tablecss > li {width: 120px; height: 40px;}
.tablecss > li:nth-child(1) {width: 120px; border: 1px solid #0067b8;}
.div1 ul li {float: left; } //
.div1 ul {float: left; list-style: none;}
.li {width: 120px; height: 40px;}
//div 클래스 정의
.text1 {width: 200px; height: 30px;}
.text2 {width: 400px; height: 30px;} //텍스트 크기 정의
.divbtn {width: 600px; height: 30px; text-align: center; margin-top: 30px; position: relative; left: 350px; bottom: 10px; }
</style>
</head>
//회원가입 테이블
<body>
<div class="div1">
<p><font class="font2">간편회원가입</font></p>
<br><br>
<ul class="tablecss" >
<ul class="css1">
<li class="li"> <font class="font1">회원아이디</font></li>
<li><input type="text" class="text1"> <input type="button" value="중복확인" class="btn0"></li>
</ul>
<br><br>
<ul class="css1">
<li class="li"><font class="font1">패스워드</font></li>
<li><input type="password" class="text1"></li>
<li class="li"><font class="font1">패스워드확인</font></li>
<li><input type="password" class="text1"></li>
</ul>
<br><br>
<ul class="css1">
<li class="li"><font class="font1">회원인증 휴대폰</font></li>
<li><input type="text" class="text1"><font class="font1"> "." 포함하지 않고 숫자만 입력하시면 됩니다.</font></li>
</ul>
<br><br>
<ul class="css1">
<li class="li"><font class="font1">회원 이메일</font></li>
<li><input type="text" class="text2"></li>
</ul>
<br><br>
<ul class="css1">
<li class="li"><font class="font1">VIP 회원코드 번호</font></li>
<li><input type="text" class="text2"> <font class="font1"> ※ VIP 회원코드를 가지고 계신 고객분은 입력해 주시길 바랍니다.</font></li>
</ul>
<br><br>
<ul class="css6">
<li class="li"><font class="font1">구매의사 소프트웨어</font></li>
<li><input type="radio" name="a">윈도우10
<input type="radio" name="a">MS-OFFICE
<input type="radio" name="a">X-BOX게임
</li>
</ul>
</ul>
<div class="divbtn">
<ul class="css7">
<li><input type="button" value="회원가입" class="btn1"></li>
<li><input type="reset" value="가입취소" class="btn2"></li>
</ul>
</div>
</div>
</body>
</html>
위의 코드를 작성하면 아래와 같은
'HTML &CSS 복습' 카테고리의 다른 글
| class, display,ol,ul,li,span,video 속성 이용 연습 (0) | 2020.05.28 |
|---|
