이런 형식의 로그인 페이지를 만들고 싶어서 코드를 작성해 보았다.
물론 결과는 똑같이 나왔지만, 알려주신 현직자분의 코드는 나와 조금 차이가 있었다.
다음은 회원가입 페이지 만들어보기.
이런 형식의 페이지고, 내가 작성한 코드는
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
#legend {
background-color: gray;
font-size: 150%;
font-weight: bolder;
}
</style>
<span id="legend">회원가입</span>
<p>원활한 서비스 이용을 위해 회원가입을 해주세요</p>
<section>
<label>아이디</label> <input type="text">
<div></div>
<label>이메일</label> <input type="email">
<div></div>
<label>비밀번호</label> <input type="password">
<div></div>
<label>닉네임</label> <input type="text">
</section>
<section>
<fieldset>
<legend>성별</legend>
<ul>
<li><input type="radio"> 남성</li>
<li><input type="radio"> 여성</li>
<li><input type="radio"> 선택안함</li>
</ul>
</fieldset>
<fieldset>
<legend>사용 기술</legend>
<ul>
<li><input type="checkbox"> HTML</li>
<li><input type="checkbox"> CSS</li>
<li><input type="checkbox"> JavaScript</li>
<li><input type="checkbox"> Python</li>
<li><input type="checkbox"> Django</li>
<li><input type="checkbox"> Github</li>
<li><input type="checkbox"> PostgreSQL</li>
</ul>
</fieldset>
</section>
<button>회원가입</button>를 입력하세요그리고 현직자가 작성한 코드.
<h2>회원가입</h2>
<form action="">
<p>원활한 서비스를 이용을 위해 회원가입을 해주세요</p>
<label>
아이디 <input type="text" required>
</label>
<label>
이메일 <input type="email" required>
</label>
<label>
비밀번호 <input type="password" required>
</label>
<label>
닉네임 <input type="text" required>
</label>
<fieldset>
<legend>성별</legend>
<label>
<input type="radio" name="gender" value="men" required> 남성
</label>
<label>
<input type="radio" name="gender" value="women"> 여성
</label>
<label>
<input type="radio" name="gender" value="none"> 선택 안함
</label>
</fieldset>
<fieldset>
<legend>사용 기술</legend>
<label>
<input type="checkbox" name="skill" value="html"> HTML
</label>
<label>
<input type="checkbox" name="skill" value="css"> CSS
</label>
<label>
<input type="checkbox" name="skill" value="javascript"> JavaScript
</label>
<label>
<input type="checkbox" name="skill" value="python"> Python
</label>
<label>
<input type="checkbox" name="skill" value="github"> GitHub
</label>
<label>
<input type="checkbox" name="skill" value="postgresql"> PostgreSQL
</label>
</fieldset>
<button>회원가입</button>
</form>역시 Form태그로 묶는 방식과 태그를 글자에만 묶는 것, fieldset 태그에서, input내의 name과 value로 묶는 것,required를 쓰는 것이 차이가 있었다. li태그를 사용한 부분도 조금 차이가 있었다.
다음은 글 목록 페이지 만들기
아주 간단해 보인다 해보자!
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<h1> 글목록 </h1>
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td><a href="https://www.instagram.com/weniv_official/">
위니브에서 수강생분들에게 알려드립니다.</a></td>
<td>홍길동</td>
<td>2023.04.25</td>
<td>999</td>
</tr>
<tr>
<tr>
<td>2</td>
<td><a href="https://www.estsoft.ai/">
이스트소프트 백엔드 개발 오르미 1기 모집 </a></td>
<td>홍길동</td>
<td>2023.03.24</td>
<td>999</td>
</tr>
</tr>
</tbody>
</table>
</div>
</body>
</html> 코드는 간단하지 않았다
나는 제목을 h1태그를 사용해서 작성했지만 tbable내의 caption을 사용한 것과, time 태그를 사용해서 datetime을 사용하지 않은 것이 차이가 있었다.
상처만 남은 html 실습 1번 끝.....
Studying in Tech University of Korea