가입양식
이 종합예제는 지금까지 배운 html 과 css를 활용하여 직접꾸민 사이트이다.
사이트보러가기
코드보기
html 코드
<!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">
<link rel="styleSheet" href="./style.css">
<link rel="icon" href="./form.ico">
<title>회원가입</title>
</head>
<body>
<div class="box">
<h1>회원가입</h1>
<form>
<fieldset style="width : 500px;">
<legend>필수입력</legend>
<table>
<tr>
<td>
<label for="ID">아이디</label>
</td>
<td>
<input id="ID" type="text" placeholder="아이디를 입력하세요" required>
</td>
</tr>
<tr>
<td>
<label for="password1">비밀번호</label>
</td>
<td>
<input id="password1" type="password" placeholder="비밀번호 입력" required>
</td>
</tr>
<tr>
<td>
<label for="password2">비밀번호확인</label>
</td>
<td>
<input id="password2" type="password" placeholder="비밀번호 확인" required>
</td>
</tr>
</table>
</fieldset>
<fieldset style="width: 500px;">
<legend class="add">추가입력</legend>
<table class="add">
<tr>
<td>
<label for="name">이름</label>
</td>
<td>
<input id="name" type="text" placeholder="이름을 입력하세요">
</td>
</tr>
<tr>
<td>
<label>성별</label>
</td>
<td>
<label><input type="radio" name="성별" value="male"> 남자</label>
<label><input type="radio" name="성별" value="female"> 여자</label>
</td>
</tr>
<tr>
<td>
<label for="phone">휴대전화</label>
</td>
<td>
<input id="phone" type="tel" placeholder="'-'없이 입력">
</td>
</tr>
<tr>
<td>
<label for="mail">이메일</label>
</td>
<td>
<input id="mail" type="email" placeholder="이메일주소">
</td>
</tr>
<tr>
<td>
<label for="citizenNumber">주민등록번호</label>
</td>
<td>
<input id="citizenNumber" type="tel" placeholder="주민등록 앞자리 7자리">
</td>
</tr>
<tr>
<td>
<label for="adress">주소</label>
</td>
<td>
<input id="adress" type="adress" placeholder="주소를 입력해주세요">
</td>
</tr>
<tr>
<td>
<label for="detailAdress">상세주소</label>
</td>
<td>
<input id="detailAdress" type="adress" placeholder="상세주소를 입력해주세요">
</td>
</tr>
</table>
</fieldset>
<fieldset class="hobby" style="width: 500px;">
<legend>취미</legend>
<input type="checkbox"> 책 읽기<br>
<input type="checkbox"> 프로그래밍언어 공부<br>
<input type="checkbox"> 일<br>
<input type="checkbox"> 등산<br>
<input type="checkbox"> 수영<br>
</fieldset>
<div class="wrap">
<button class="btn-1" type="reset">다시작성</button>
<button class="btn-1" type="submit" >가입하기</button>
</div>
</div>
</form>
</body>
</html>css코드는 외부에서 폰트를 가져왔으며 각각의 글꼴을 적용시켰다.
특히 버튼에 hover했을 때의 변화는 after와 before를 활용하여 transition의 시간을 조절하여 작성했다. 색상은 배경색과 어울리도록 설정하였다.
글꼴은 어울리지 않지만 최대한 여러가지를 사용해보았다.
@font-face {
font-family: "KOTRA_BOLD-Bold";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "MaruBuri-Regular";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff")
format("woff");
font-weight: bolder;
font-style: normal;
}
body {
background-color: #001220;
background-image: url("./waves.svg");
background-size: cover;
}
h1 {
font-family: "KOTRA_BOLD-Bold";
text-align: center;
color: white;
}
.box {
font-family: "KOTRA_BOLD-Bold";
color: #312f5c;
position: absolute;
top: 10%;
left: 35%;
}
fieldset {
font-family: "MaruBuri-Regular";
background-color: rgba(255, 255, 255, 0.5);
}
fieldset:hover {
background-color: rgba(255, 255, 255, 0.7);
color: black;
}
.add,
.hobby {
font-family: "MaruBuri-Regular";
color: white;
}
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid #fff;
border-radius: 5px;
color: #fff;
display: inline-block;
font-size: 1em;
font-weight: bold;
margin: 1em auto;
margin-left: 10px;
padding: 0.6em 1.5em;
position: relative;
left: 25%;
}
button::before,
button::after {
background: #fff;
content: "";
position: absolute;
z-index: -1;
}
button:hover {
color: #001220;
}
.btn-1::after {
height: 0;
left: 0;
top: 0;
width: 100%;
}
.btn-1:hover:after {
height: 100%;
}
아래의 코드는 svg이미지 파일로 path태그를 보면 각각 path들의 좌표가 입력되어 있는 것을 알 수 있다.
이 좌표들의 연결로 마치 곡선으로 된 지형이 나타나는 것처럼 보이는 것이다.
아래의 코드는 css와 연결되어있다.
<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<rect x="0" y="0" width="900" height="600" fill="#001220"></rect>
<path d="M0 235L21.5 231C43 227 86 219 128.8 207C171.7 195 214.3 179 257.2 171.5C300 164 343 165 385.8 174.7C428.7 184.3 471.3 202.7 514.2 199.8C557 197 600 173 642.8 168.5C685.7 164 728.3 179 771.2 186.2C814 193.3 857 192.7 878.5 192.3L900 192L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#fa7268"></path>
<path d="M0 132L21.5 134.2C43 136.3 86 140.7 128.8 143.3C171.7 146 214.3 147 257.2 147C300 147 343 146 385.8 143.8C428.7 141.7 471.3 138.3 514.2 141.7C557 145 600 155 642.8 166C685.7 177 728.3 189 771.2 188.8C814 188.7 857 176.3 878.5 170.2L900 164L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#ef5f67"></path>
<path d="M0 161L21.5 154.3C43 147.7 86 134.3 128.8 123.7C171.7 113 214.3 105 257.2 109.5C300 114 343 131 385.8 137.7C428.7 144.3 471.3 140.7 514.2 139.3C557 138 600 139 642.8 136.7C685.7 134.3 728.3 128.7 771.2 123.8C814 119 857 115 878.5 113L900 111L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#e34c67"></path>
<path d="M0 106L21.5 102.2C43 98.3 86 90.7 128.8 86.2C171.7 81.7 214.3 80.3 257.2 84.2C300 88 343 97 385.8 103.2C428.7 109.3 471.3 112.7 514.2 105.5C557 98.3 600 80.7 642.8 75.3C685.7 70 728.3 77 771.2 76.5C814 76 857 68 878.5 64L900 60L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#d53867"></path>
<path d="M0 43L21.5 40C43 37 86 31 128.8 31.3C171.7 31.7 214.3 38.3 257.2 42.3C300 46.3 343 47.7 385.8 44.5C428.7 41.3 471.3 33.7 514.2 34.7C557 35.7 600 45.3 642.8 52C685.7 58.7 728.3 62.3 771.2 62.7C814 63 857 60 878.5 58.5L900 57L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#c62368"></path>
</svg>사이트 이미지
개선사항으로 현재는 동적인 버튼들과 정적인 바탕화면이지만 동적이 바탕화면을 만들고 싶다.
특히, svg와 캔버스를 활용하여 움직이는 바탕화면을 만들어 보려고 했지만 만든 화면과 회원가입 창이 분리되어 나타나는 오류를 해결하지 못했다.
좀 더 공부하고 앞으로 개선하겠다.
참고사이트
1. heiki
2. 눈누
3. colorspace
AllTimeDevelop