이전에 로그인 화면에 이어서 회원가입 화면을 구현했다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
</head>
<body>
<h1>회원가입</h1>
<div class="container">
<h2>계정 정보를 입력해 주세요.</h2>
<form>
<ul>
<li>계정 이메일</li>
<li><input type="text" name="id" id="id" placeholder="아이디를 입력하세요."><button type="button" class="btn_IdDup_chk">중복체크</button></li>
<li>비밀번호</li>
<li><input type="password" name="pw" id="pw" placeholder="비밀번호를 입력해주세요."></li>
<li><input type="password" name="pw2_chk" id="pw2_chk" placeholder="비밀번호 재입력."></li>
<li>닉네임</li>
<li><input type="text" name="nick" placeholder="닉네임을 입력하세요."></li>
<li>전화번호</li>
<li><input type="tel" name="tel" placeholder="전화번호 입력하세요."></li>
<li><button onclick="location.href='login.html'" type="button" class="btn_register_pre">이전</button><button type="button" class="btn_register_next">다음</button></li>
</ul>
</form>
</div>
</body>
</html>문제점 1.
위와 같이 <ul> <li>를 섞어서 구현했다.
이렇게 구현한 이유는 로그인 화면에서 <ul>, <li>에서 사용하지 않았기 때문에 활용하기 위해서 그리고 옳지 않아 보이긴 하지만 옳지 않은 이유를 좀 더 명확하게 구분하기 위해서 사용하였다. (틀리면 이유를 알고 다시 또 고치면 되니까)
일단 개인적으로 코드를 깨끗하게 짠다고 생각하는 네이버의 로그인 폼을 보겠다.
div로 묶어서 class를 form_list로 주었다. 사실 form_list인 이유는 그들만 알겠지만 확실한건 모든 객체 하나하나를 div로 묶었다는 걸 알 수 있다.
| div를 자주 사용하는 이유 div를 하나 하나 모두 묶는 이유가 CSS 제어가 쉬움 최신 레이아웃 시스템인 flex / grid가 div 중심 반응형 레이아웃 구현이 용이하다는 점 |
여기서 flex / grid가 뭐하는 태그?
이 부분은 사실 CSS에 속하는 내용이다. 나중에 한 번에 다룰 것 같으니 간단하게만 소개하겠다.
flex : block 특성으로 컨테이너를 정의.(수평으로 정리한다) 반대에는 inline 태그가 있고 이는 수직으로 정리한다. 물론 그 외에도 여러 가지 방향이 있다.
grid : 2차원 행/열이 존재한다. 쉽게 생각해서 4개의 도형을 x y축으로 각각 이동 시킬수있다고 생각하면 편할 것 같다.
문제점 2.
버튼 필드에 label이 빠짐
이유는 모바일, 웹 브라우저 등에서 호환성을 모두 커버하기 좋음
label로 감싸면 클릭 또는 터치의 영역이 확대되기 때문에 접근성이 용이해짐
수정 코드
<body>
<h1>회원가입</h1>
<div class="container">
<h2>계정 정보를 입력해 주세요.</h2>
<form>
<div class="register email text">
계정 이메일
</div>
<div class="regist item email">
<input type="text" name="id" id="id" placeholder="이메일을 입력하세요.">
<button type="button" class="btn_IdDup_chk">중복체크</button>
</div>
<div class="register password text">
비밀번호
</div>
<div class="register item password">
<input type="password" name="pw" id="pw" placeholder="비밀번호를 입력해주세요.">
</div>
<div class="register item password check">
<input type="password" name="pw2_chk" id="pw2_chk" placeholder="비밀번호 재입력.">
</div>
<div class="register nickname text">
닉네임
</div>
<div class="register item nickname">
<input type="text" name="nick" placeholder="닉네임을 입력하세요.">
</div>
<div class="register tel text">
전화번호
</div>
<div class="register item tel">
<input type="tel" name="tel" placeholder="전화번호 입력하세요.">
</div>
<label class="register_btn_area">
<button onclick="location.href='login.html'" type="button" class="btn_register_pre">이전</button>
<button type="button" class="btn_register_next">다음</button>
</label>
</form>
</div>
</body>이와 같이 모두 div로 변경하였고, class명은 css에서 따로 쓸 일이 생기면 그때 수정하기 위해서 제각각으로 두었다.
손봐야 할 점이 한두 개가 아닌 것 같지만 확실히 label의 사용이유와 div를 묶어야 하는 이유를 알았다.
'Front-End > HTML' 카테고리의 다른 글
| [CSS] Scroll-Snap (0) | 2025.11.23 |
|---|---|
| CSS에 대한 나의 생각과 고찰 (0) | 2025.11.23 |
| CSS와 로그인 페이지 UI 제작과정 (0) | 2025.11.22 |
| HTML의 기본구조 및 Semantic 구조란? (0) | 2025.11.21 |
| 로그인 화면 버튼 구현 (0) | 2025.11.21 |