구현한 기능에 버그가 있어 급하게 수습하고, 변경된 기능에 따라 UI도 바꿔주었는데 위와 같은 에러가 발생하였다.

내가 무언가 에러를 발생시킬 만한 일을 하지 않았고, 처음 보는 에러라서 살짝 당황했지만 사실 이건 다소 어이없는 짓을 저질렀을 때 발생하는 에러이다.

1. p 태그.

에러 문구의 뜻은 다음과 같다. p 태그는 p 태그의 자식 요소가 될 수 없다. UI를 급하게 수정하면서 p 태그 하위에 또 다른 p 태그를 집어넣었는데 이게 에러의 원인이 된 것이다.

<p>
    <p>'텍스트'</p>
</p>

p 태그는 중첩해서 사용할 수 없다.

p 태그는 페이지에서 문단을 표시하는 용도로 사용되며, 오직 텍스트를 표현하는 태그 이외의 다른 태그는 p 태그 내부에서 사용할 수 없다.

<p>
	'텍스트'
    <b>'텍스트'</b>
</p>

이런 경우는 화면에 '텍스트''텍스트' 로 출력되며 문제가 없는 사용 방법이다.

<p>
	'텍스트'
    <div>'텍스트'</div>
</p>

div는 텍스트를 표현하는 태그가 아니므로 에러가 발생한다.

2. HTML 규칙을 지키자.

p 태그의 사용 규칙을 어겼다고 모두 에러가 발생하는 것은 아니다. 어느 정도의 규칙 위반은 웹 브라우저에서 알아서 보정해주기 때문. 그러나 엄연한 문법 위반 행위이고, 브라우저에서 보정해줬다고 해도 에러가 발생하지 않는다 정도이지 UI가 개발 의도대로 출력되도록 알아서 다 해준다는 뜻이 아니다. 규칙은 규칙!