<body>
<!--이미지 파일-->
<div class="main_image">
<p style="text-align: center;"><img src="./cookie.jpg" width="200"></p>
</div>
<!--로그인 텍스트-->
<div class="login_h">
<h2><b><p style="text-align: center; color: black;">HTML 태그가 뭐야?</p></b></h2>
</div>
<div class="login-email">
<!--이메일-->
<p style="text-align: center;"><input type="text" placeholder="E-mail"></p>
</div>
<div class="login-pw">
<!--패스워드-->
<p style="text-align: center;"><input type="password" placeholder="PW"></p>
</div>
<!-- form사용 = 이후에 데이터를 제출하기 위해서 미리 도안화 -->
<form>
<!--로그인 버튼 / 회원가입 버튼(예정)-->
<p style="text-align: center;">
<a style="text-align: center;"><button id="btn_register">회원가입</button></a>
<a style="text-align: center;"><button id="btn_login">로그인</button></a>
</p>
</form>
<!-- 버튼 눌림 감지 -->
<script>
const loginButton = document.getElementById("btn_login");
loginButton.addEventListener("click", () => {
alert("하이");
}
);
</script>
</body>
위의 코드는 내가 작성한 코드이다.
하지만 몇 가지 문제점이 있음을 발견, 그것은 form 태그와 div 태그의 구조가 적절하지 않다는 것이다.
해당사항을 변경해 보겠다.
| 문제점 1. form은 보통 input과 버튼을 함께 감싸야함 2. <p>안에 <botton>을 넣는 건 가능하지만 의미적으로 <p>는 문단용, 버튼을 감쌀 필요는 없다. 3. <a>안에 <botton>은 옳지 않음, <botton>자체가 클릭 가능한 요소이기 때문에 <a>로 감싸면 중첩의 의미가 혼동된다. |
코드 변경
<body>
<!--이미지 파일-->
<div class="main_image">
<p style="text-align: center;"><img src="./cookie.jpg" width="200"></p>
</div>
<!--로그인 텍스트-->
<div class="login_h">
<h2><b><p style="text-align: center; color: black;">HTML 태그가 뭐야?</p></b></h2>
</div>
<!-- form사용 = 이후에 데이터를 제출하기 위해서 미리 도안화 -->
<form id="login_form" style="text-align: center;"><!--form으로 이메일, 패스워드를 감쌈-->
<!--이메일-->
<div class="login-email">
<input type="text" placeholder="E-mail">
</div>
<!--패스워드-->
<div class="login-pw">
<input type="password" placeholder="PW">
</div>
<!--로그인 버튼 / 회원가입 버튼(예정)-->
<p style="text-align: center;">
<button id="btn_register">회원가입</button>
<button id="btn_login">로그인</button>
</p>
</form>
<!-- 버튼 눌림 감지 -->
<script>
const loginButton = document.getElementById("btn_login");
loginButton.addEventListener("click", () => {
alert("하이");
}
);
</script>
</body>
자세히 뜯어서 보자.
1. form은 보통 input과 버튼을 함께 감싸야함
2. <p>안에 <botton>을 넣는 건 가능하지만 의미적으로 <p>는 문단용, 버튼을 감쌀 필요는 없다.
3. <a>안에 <botton>은 옳지 않음, <botton> 자체가 클릭 가능한 요소이기 때문에 <a>로 감싸면 중첩의 의미가 혼동된다.
<!-- form사용 = 이후에 데이터를 제출하기 위해서 미리 도안화 -->
<!-- form으로 모두 엮은 모습-->
<form id="login_form" style="text-align: center;"><!--form으로 이메일, 패스워드를 감쌈-->
<!--기존 이메일-->
<div class="login-email">
<p style="text-align: center;"><input type="text" placeholder="E-mail"></p>
</div>
<!--변경 이메일-->
<div class="login-email">
<input type="text" placeholder="E-mail">
</div>
<!--패스워드-->
<div class="login-pw">
<input type="password" placeholder="PW">
</div>
<!--로그인 버튼 / 회원가입 버튼(예정)-->
<p style="text-align: center;">
<button id="btn_register">회원가입</button>
<button id="btn_login">로그인</button>
</p>
</form>단순히 div로만 묶여있던 텍스트들을 form으로 로그인 버튼까지 한 번에 묶어 가운데 정렬을 한 모습이다.
기존 이메일과 패스워드에 p 태그로 묶여있던것을 제외해 버렸다. 이유는 p태그는 문단용이기 때문
기존 버튼에 <a>태그를 이용했는데 이는 중첩되는 행위 이유는 아래와 같다.
a vs botton
a href="...."은 단순 링크 이동이 목적
botton + form은 데이터 전송, 서버 처리가 목적임
즉, 이후에 서버로 데이터를 보내도록 구현을 진행할 예정이므로 a보단 botton 태그가 좀 더 올바르다.
다음 포스팅으로는 <script>에 있는 값을 js로 옮기도록 하겠다.
'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 |