이런 형식의 로그인 페이지를 만들고 싶어서 코드를 작성해 보았다.
물론 결과는 똑같이 나왔지만, 알려주신 현직자분의 코드는 나와 조금 차이가 있었다.
다음은 회원가입 페이지 만들어보기.
이런 형식의 페이지고, 내가 작성한 코드는
<!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번 끝.....
https://www.linkedin.com/in/penameyo/