위키문헌:블록 및 인라인 요소
| ← 위키문헌:틀 | 블록 및 인라인 요소 |
이 문서에서는 블록 요소와 인라인 요소의 차이와, 둘을 구분해야 하는 경우에 대해 설명하고 있습니다.
|
 | 요약: div 기반의 블록 요소를, span 기반의 인라인 요소 또는 <p> 태그 속에 넣지 마십시오.
|
블록 및 인라인 요소
편집위키문헌은 웹페이지 구조에 HTML을, 서식에는 CSS를 사용합니다. HTML을 간단히 표시하기 위해 '위키 문법'을 사용하기도 하지만, 최종 렌더링은 HTML로 이루어집니다.
HTML에는 근본적으로 두 요소, 블록 (block) 요소와 인라인 (inline) 요소가 있습니다. 일반적으로 내용물은 인라인 요소이며, 문서 전체의 구조를 만들 때 블록 요소를 사용합니다. 이 둘에는 다음과 같은 특성이 있습니다.
| 인라인 | 블록 | |
|---|---|---|
| HTML 태그 예시 | span, b, i | div, p, table, li, hr, h1-6 |
| 사용하는 공백 | 필요한 공백 하나만을 사용 | (기본값으로는) 컨테이너 전체를 채울 때까지 확장 |
| 새 줄 (줄바꿈) | 주변 요소와 같은 줄에 계속해서 존재 | 삽입된 곳에서 개행을 일으킴 |
| 정렬 | 상위 컨테이너에 따라 정렬 | 자체적인 내부 정렬 방식을 따름 |
| 폭 | 내용물에 따라 결정 | (기본값으로는) 컨테이너의 폭 전체. CSS로 조정 가능. |
| 포함할 수 있는 요소 | 인라인 요소만 | 블록 요소 및 인라인 요소 (둘 다) |
HTML 문서는 블록 요소와 인라인 요소가 서로서로의 안쪽에 짜인 형태로서 만들어집니다. 하지만, 인라인 요소 내에 블록 요소가 들어갈 경우 이는 유효하지 않으며, 인라인 요소는 인라인 요소만 가질 수 있습니다. 블록 요소는 다른 블록 요소나 인라인 요소 모두를 포함할 수 있습니다.
만약 인라인 요소 내 블록 요소를 넣을 경우, HTML이 유효하지 않아, 제대로 렌더링되지 않을 수 있으며, "HTML5 misnesting lint error"로서 특수:린트오류/html5-misnesting에 기록됩니다.
CSS의 display 성질을 사용해 인라인 요소 내에 블록 요소가 들어간 것처럼 할 수는 있으나, 인라인 요소에 display:block; 도는 display:inline-block;을 설정할 경우에도 속에 <div>가 들어가 있을 경우 HTML 형태 자체는 기형으로 남습니다.
문단 태그
편집문단 태그 (p) 자체는 블록 요소이지만, 블록 요소가 문단 태그 속에 들어가는 것도 유효하지 않습니다.
미디어위키에서는 간혹 텍스트를 p 태그로 엮어 버리기도 하는데, 이는 span 기반 틀을 사용하는 틀 내에서의 줄바꿈에서 문제가 생길 수 있습니다.
예를 들어, 밑처럼 쓰면 틀린 문법이 됩니다.
<span style="color:red;">{{{1}}}
{{{2}}}
</span>
이는 p 요소가 span 태그 안쪽에서 발생하기 때문입니다.
만약 코드를 쉽게 읽을 수 있게 하기 위해서 띈 것이라면, HTML 주석 기능을 사용해 줄바꿈을 막을 수 있습니다.
<span style="color:green;">{{{1}}}<!--
이 내용은 주석 안에 있습니다. 출력문에서 표시되지 않습니다.
-->{{{2}}}
</span>
줄 바꿈을 원한다면, <span> 대신 <div>를 사용해야 합니다.
블록 및 인라인 틀
편집위키문헌의 틀 중 {{작게}} 등 일부는 인라인 요소를, {{가운데}} 등 일부는 블록 요소를 사용합니다. 즉, 특수한 경우에는 한 틀 안에 다른 틀을 넣을 수 없습니다.
{{가운데| {{작게| div 안에 span이 있으므로 이는 허용됩니다.}}}}
{{작게| {{가운데| span 안에 div가 있으므로 이는 금지입니다.}}}}
위키문법 일부는 렌더링 과정에서 블록 기반 HTML로 변화하므로, 이 경우에도 인라인 요소 내에 넣어서는 안 됩니다.
<p> 태그 내에서의 줄바꿈
예시는 이렇습니다.
* 목록 또한
* 블록 기반입니다.
{|
| 표도 || 블록 || 기반입니다.
|}
인라인 기반 틀 일부는 대응하는 블록 기반 틀이 있습니다. 예를 들어, {{작게}}는 span 기반이며, {{작게 블록}}은 블록 기반입니다.
블록 기반 틀 안에는 다른 블록 기반 틀을 넣을 수 있습니다.
{{작게 블록| {{가운데| div 안에 div가 있으므로 이는 허용됩니다.}}}}
틀 목록
편집밑의 목록은 일반적으로 흔히 사용하는 틀을 요소별로 정리한 것입니다.
인라인 (span) 틀