Back to List

쉽게 놓치고 지나갈 수 있는 실수 정리 : HTML (1)

사이드 프로젝트에서 겪은 HTML 경고 사례를 바탕으로 body 시멘틱과 input autocomplete 같은 놓치기 쉬운 포인트를 정리합니다.
HTML
Accessibility
Semantic HTML
Autocomplete
Web
2021-09-017 min read
안녕하세요. 저희 회사에서는 개발하면서 Warning과 Error관해 깐깐한 편인데요. 이전 회사와, 공부할 때는 원하는 기능만 되면, 개발이 완료되었다고 생각했었는데, Warning까지 다 잡아가면서 개발을 하니, 확실히 배우는 부분이 많습니다. 그래서 오늘은 많지는 않지만, 현재 사이드 프로젝트를 하면서 보였던 쉽게 놓치고 지나갈 수 있는 실수를 포스팅해보겠습니다.
  1. body태그
  2. input:passowrd 태그
1. body태그
HTML 시멘틱에 대해서 알고 나서부터 신경 쓰면서 개발을 진행하고 있습니다. <div> 난사를 막고, 좀 더 가독성 있는 코드를 짜고 싶은 욕심에 개발하고 있는 사이드 프로젝트에서도 적용시키려고 하고 있습니다.
 // app.tsx

 const app = ()= >{

 return (
    <body>
    	<Router>

    ...
현재 진행하고 있는 사이드 프로젝트에 앞부분입니다. body 태그와 main 태그를 고민하던 도중, 개발 초기 당시에 왜 그렇게 생각했는지 모르겠지만, <body> 태그로 선정하고 진행을 했습니다. 

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

그랬더니 두둥... 개발자 도구 Console 탭에 버젓이 Warning이 떠 있었습니다. 짧은 영어 실력으로 읽어본바. body는 div의 자식이 될 수 없다는 것 같습니다. 저는 위에 <div>를 잡아 둔 적이 없는데 말이죠. 개발자 도구에서 Elements탭을 보니
<div id="root">
	<body>

    ...
제가 선언하지 않은 div가 선언되어있었습니다. 그래서 고민하던 도중, 태그를 변경하기로 했습니다. <main> 태그로요
  return (
    <main>
    	<Router>

        ...
변경했더니 문제가 사라졌습니다. 변경과 동시에 몇 가지 확인해본 부분이 있어서 같이 공유드립니다.
<body>HTML 문서에 단 하나의 <body> 요소만 존재 할 수 있습니다.
브라우저 화면에 보이는 것들이 주로 들어갑니다.
<head> 태그와 대조적입니다.
<div>의 자식이 될 수 없습니다.
<main><body> 태그 요소의 주된 내용(content)를 정의 할 때 사용합니다.
단 하나의 <main> 요소만 존재 할 수 있습니다.
<header>,<nav>, <aside>,<article>, <footer> 요소의 자식이 될 수 없습니다.
2. input:password 태그
 로그인 페이지 구성할 때 많이 사용하는 <input type="password"/> 인데요.
"Password field is not contained in a form..."

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

 노란 문구가 거슬려 확인해 보니. Password는 form 안에 있어야 하나 봅니다. 이 부분은 어렵지 않으니 <form>으로 감싸서 줍니다. 
"Input elements should have autocomplete attributes..."

이전 스크린샷 안내

원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.

새로운 문제가 생겼습니다. password에서는 autocomplete 요소가 있어야 한다고 하는 것 같습니다. 부끄럽지만 autocomplete 요소가 뭔지 전혀 이해가 가질 않아, 열심히 검색해봤습니다.https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete [HTML autocomplete 특성 - HTML: Hypertext Markup Language | MDNautocomplete 특성을 사용하면 사용자 에이전트의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다.developer.mozilla.org](https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete)자동 완성에 대한 부분인데, password가 자동되는 것이 문제가 될 수 있으니 막으라고 하는 듯합니다.
autoComplete="off"
을 추가해줬습니다. password니 아무래도 off가 맞는 듯하여 off로 진행해서, 경고문구를 해결했습니다만,
참고: 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동 완성하는 것도 막을 수 없습니다. The autocomplete attribute and login fields 문서를 참고하세요.
라고 합니다.. 조금 아쉬운 부분인 듯합니다.
오늘은 제가 사이드 프로젝트하면서, 간과했던 부분들을 정리해봤는데요. 개인적으로 이런 부분까지 신경 쓰면서 개발하다 보면, 제 성장 속도가 빨라지는 듯하여 개발이 더 재밌어지는 듯합니다. 그리고 디버깅하고 문제를 해결하는 것보다 사실 간단한 문제는 포스팅할 때 더 많은 시간이 쏟지만 그러면서 더 양질의 학습이 되는 것 같아서 뿌듯합니다. 앞으로도 더 신경 쓰며 개발하고, 휘발될 수 있는 정보들은 포스팅하는 습관을 들여야겠습니다.