본문 바로가기

HTML&CSS

문단을 표현하는 <p> 태그는 중첩해서 사용할 수 없다.

반응형

HTML 페이지에서 문단을 표시하는 용도로 사용하는 <p> 태그는 HTML 문서에서 가장 빈번하게 사용하는 태그 중 하나입니다.

레이아웃을 만드는 데 사용하는 블록 태그를 제외하면, HTML 페이지 안의 텍스트 내용을 표현하는 근간이 되는 태그가 <p> 태그입니다.

<p> 태그는 "paragraph"(문단) 단어의 앞머리 철자 "p"에서 따와서 사용하는 것입니다.

HTML에서 <p> 태그는 텍스트로 된 문단을 표현하는 용도로 사용되며, 여러 줄로 된 텍스트 영역을 표현합니다.

 

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

<p> 태그에는 중요한 특징이 있습니다.

<p> 태그 안에는 인라인 텍스트를 표현하는 태그만 올 수 있으며, 블록 태그, 또는 다른 <p> 태그는 올 수 없습니다.

<span>과 같은 텍스트 표현 태그는 사용할 수 있지만, 블록 태그, 또는 <p> 태그를  <p> 태그 안에 중첩해서 사용할 수 없습니다.

 

 

<p> 태그 안에 중첩해서 사용한 블록 태그, 또는 <p> 태그는 웹 브라우저에서 렌더링 되면서 <p> 태그 뒤로 모두 밀려 나오게 됩니다.

 

예를 들어 다음과 같이 작성한 HTML 코드는 문제가 없는 태그 사용처럼 보이지만

 

    <p>
        <span>문자열</span>
        <div><span>블록</span></div>
        <p>문단</p>
    </p>

 

실제 웹 브라우저에서 렌더링 될 때는 다음과 같은 HTML 태그 구조로 변경 변경됩니다.

 

<p>
	<span>문자열</span>
</p>
<div>
	<span>블록</span>
</div>
<p>문단</p>
<p></p>

 

중첩될 수 없는 태그가 중첩되었을 때, 즉 HTML 문서 구조에 오류가 있을 때 어떻게 처리를 하냐는 전적으로 웹 브라우저의 처리 기준에 맞춰서 정해집니다.

우리가 사용하는 대부분의 웹 브라우저(크롬, 신형 엣지, 파이어폭스)는 다음의 순서로 앞의 중첩 태그 오류를 보정합니다.

 

  1. 맨 앞의 시작 "<p>" 태그 뒤에 오는 "<span>문자열</span>" 태그까지는 정상 처리됩니다.

  2. "<p>" 태그 안에 중첩이 불가능한 블록 태그 "<div><span>블록</span></div>" 가 나오므로 먼저 앞의 열린 "<p>" 태그를 닫아서 태그를 종료합니다. 중요합니다!
    웹 브라우저는 중첩이 불가능한 태그가 중첩되어 나오면 앞서 열었던 태그를 일단 닫아서 종료합니다.
    그리고, 내부의 중첩된 블록 태그는 추가 된 닫는 태그 "</p>" 뒤에 위치하게 됩니다.
    <p>
    	<span>문자열</span>
    </p>
    <div>
    	<span>블록</span>
    </div>


  3. 그 뒤의 "<p>문단</p>" 태그는 앞서의 "<p>" 태그가 닫는 태그 "</p>"가 추가되면서 이미 닫혔으므로 앞서의 블록 태그와 마찬가지로 같은 레벨로 블록 태그 뒤에 표시됩니다.
    <p>
    	<span>문자열</span>
    </p>
    <div>
    	<span>블록</span>
    </div>
    <p>문단</p>


  4. 마지막에 있는 닫는 "</p>" 태그는 맨 앞의 <p> 태그가 "</p>"가 추가되면서 이미 닫혔기 때문에 외톨이로 남게 되고, 웹 브라우저는 "</p>" 태그 앞에 여는 "<p>" 태그를 추가해서 단독으로 분리된 "<p></p>" 태그를 생성합니다.

 

조금 번거로워 보이지만, 가장 중요한 핵심은 중첩이 될 수 없는 태그가 "<p>" 태그 안에 오면 그 위치에서 <p> 태그를 닫아서 태그를 종료하고, 안에 오는 중첩 불가능한 태그들을 같은 레벨로 뒤에 붙여서 표시를 한다는 것입니다.

 

웹 표준에는 태그 안에 블록 태그나 태그가 중첩되면 안 된다는 규격만 있지, 중첩이 되면 어떻게 처리해야 한다는 규격은 없기 때문에 구형 웹 브라우저, 또는 모바일 기기 내장 전용 웹 브라우저에서는 앞에서의 처리 방식과 다르게 처리될 수도 있습니다.

 

 

 

중첩된 <p> 태그를 방치하면 안 된다.

웹 브라우저가 중첩된 <p> 태그 안의 <p> 태그나 블록 태그를 자동으로 재배치를 해준다고 해서 그대로 두면 안 됩니다.

CSS 선택자로 태그를 선택할 때 많은 경우에 엉뚱한 태그가 선택되기 때문에 중첩 문제를 그대로 두면 안 됩니다.

 

예를 들어 다음과 같은 HTML 내용에서

 

<div></div>
<p>
    <span>문단1</span>
    <p><span>문단2</span></p>
</p>
<p><span>문단3</span></p>
<p><span>문단4</span></p>

 

다음의 CSS 선택자로 선택을 해서 텍스트 속성을 적용하면

 

div ~ p > span { color:#a00; font-weight: bold;}

 

"문단1", "문단3", "문단4"만 선택되어야 할 것 같지만, 중첩이 불가능한 "문단2"를 감싼 "<p>" 태그가 "문단1"을 감싼 "<p>" 태그 뒤로 붙게 되면서 "문단1", "문단2", "문단3", "문단4" 모두에 텍스트 속성이 적용됩니다.

 

이런 문제가 생기지 않도록 하려면 중첩이 안 되는 "<p>" 태그 안에는 블록 태그나 "<p>" 태그를 중첩해서 사용하지 않아야 합니다.

 

반응형

닫기