본문 바로가기
Programming 💾

[html🌎] Option 태그 사용 시에 주의해야 할 점!

by 베이비 직장인 2022. 3. 30.
반응형

소개글

자바 스프링 프레임워크를 기반으로 한 프로젝트를 개발 중에, 메일로 "에러가 발생해서 운용이 불가능하다"라는 내용의 메일을 받아 조사한 내용입니다. 에러 내용은 왠지 모르게 DB에 "AA      "와 같은 느낌으로 공백이 들어가 있었습니다. "AA     "는 SELECT 태그에서 선택된 값의 TEXT를 가져와 등록하는 칼럼이었습니다.

 

 

어딘가 잘못되었을 거라고 생각은 했지만, 원인을 찾는데는 시간이 걸렸습니다. 먼저, bootstrap-select.js에서 확인을 했지만, 이미 option 태그에 공백이 가득 찬 상태였습니다. 그래서 오늘은 혹시나 나와 같은 문제로 시간을 버릴까 그리고 복습을 하는 겸 다시는 실수하지 않기 위해 원인을 적어보겠습니다.

 

 

도움이 될만한 다른 글

2022.03.30 - [IT Products] - [신제품💻] 갤럭시A33 스펙, 디자인, 가격, 출시일 알아보기! 📱

 

2022.03.28 - [IT Products] - [신제품💻] 갤럭시A53 스펙, 디자인, 가격, 출시일 알아보기! 📱

 

2022.03.27 - [IT Products] - [신제품💻] 갤럭시A73 스펙, 디자인, 가격, 출시일 알아보기! 🔍

 

Option 태그 사용 시에 주의해야 할 점!

결국 위의 문제의 원인은 Option태그를 열고 나서 닫는 태그 </option>을 넣지 않았기 때문에 생긴 일이었습니다. 원래는 Option태그는 닫지 않아도 괜찮을 것이라고 생각했지만, 닫는 태그가 없었기 때문에 위와 같은 문제가 생겼습니다.

 

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select>
		<option>닫는 태그 X
		<option>닫는 태그 O</option>
	</select>
</body>
</html>

 

 

다음과 같은 html 파일을 실행시키면, option으로는 "닫는 태크 X", "닫는 태그 O"가 표시될 것입니다. 하지만 그 안의 내용물은 다음과 같습니다. 

 

 

"닫는 태그 X "

"닫는 태그 O"

 

 

닫는 태그를 깜빡하고 사용하지 않았기 때문에 이상한 공백이 Option Text로 들어가 버렸었습니다.....

만약 Option Text에 공백이 들어가 있다면, option 태그를 닫았는지 확인하면 될 것 같습니다!

 

 

 

 

 

반응형

댓글