Nuke Olaf - Log Store
HTML5 - 블록 태그, 인라인 태그란? 본문
HTML 태그들을 공부할때 나왔던 블록 태그와 인라인 태그 키워드에 대해 제대로 공부하지 않아서, 웹 페이지의 구조와 표시방법에 대한 제대로된 이해가 없는 상태였다. 그래서 HTML 에 CSS 가 먹히지 않는 등 여러 문제가 있었다. 블록 태그와 인라인 태그에 대해 공부하고 정리함.
block 의 사전적 의미는, (단단한) 사각형 덩어리를 뜻한다.
inline 의 사전적 의미는 직렬의, 일렬로 늘어선 이라는 의미이다.
1. block 태그란?, inline 태그란?
모든 HTML 요소들은 스타일링을 위해 각 요소의 특성에 따른 default display value(기본 표시 값)를 가진다.
default display value 는 블록 레벨 요소(Block-level Elements) 와 인라인 요소(Inline-level Elements) 두 가지 범주로 나뉜다. 즉, 모든 HTML 요소는 블록레벨 요소이거나, 인라인 요소 이거나 둘 중 하나라는 뜻.
<div> 태그는 블록 요소이고, <span> 태그는 인라인 요소이다.
블록 요소는 항상 새 줄에서 시작하여 왼쪽에서 오른쪽으로 페이지의 전체 너비를 차지한다. 블록 레벨 요소는 한 줄 또는 여러줄을 취할 수 있고, 요소 앞 뒤에 줄바꿈이 있다. <h1>~<h6>, <ol>, <ul>, <li> 태그 등이 블록 요소에 속한다.
인라인 요소는 줄바꿈(새 줄에서 시작하는 것)을 일으키지 않고, 페이지의 전체 너비를 차지하지 않는다. 필요한 만큼만 너비를 차지한다. 여는 태그와 닫는 태그로 둘러쌓인 공간만을 차지한다. <a>, <em>, <img> 태그 등이 인라인 요소에 속한다.
* CSS 의 display 속성을 통해 요소의 시각적인 표현을 변경할 수 있다. 즉, 브라우저에게 블록 박스를 인라인 박스로 랜더링 하라고 지시할 수 있는 것이다.
2. <div> 태그와 <span> 태그로 알아보는 블록 요소와 인라인 요소의 차이
블록 요소인 <div> 태그는 일반적으로 다른 HTML 요소의 컨테이너로 사용되며, 나머지 HTML 요소를 분리하는데 사용된다. <div> 태그는 HTML 요소의 모양을 변경하지는 않는다. <div> 태그는 required attribute 는 없지만, style, class, id 와 같은 속성을 자주 사용한다. CSS 와 함께 지정된 블록의 내용을 스타일링하는데 주로 사용된다.
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid black">Hello World</div>
<p>The DIV element is a block element, and will always start
on a new line and take up the full width available
(stretches out to the left and right as far as it can).</p>
</body>
</html>
인라인 요소인 <span> 태그도 마찬가지로 HTML 요소의 컨테이너로 사용될 수 있다. 하지만 본질적으로는 주로 장문의 글과 같은 큰 텍스트 덩어리 내의 특정한 텍스트 부분만 스타일을 변경하고자 할 때 사용한다. <span> 태그도 required attribute 는 없지만, style, class, id 와 같은 속성을 자주 사용한다.
인라인 요소는 데이터나 다른 인라인 요소만을 포함할 수 있다. 즉, 블록 요소를 인라인 요소 안에 넣을 수 없다는 뜻이다.
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element,
and will not start on a new line and only
takes up as much width as necessary.</p>
</body>
</html>
<인라인 요소와 블록 요소 태그 리스트>
List of "inline" elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use content categories instead):
<a><abbr><acronym><audio> (if it has visible controls)<b><bdi><bdo><big><br><button><canvas><cite><code><data><datalist><del><dfn><em><embed><i><iframe><img><input><ins><kbd><label><map><mark><meter><noscript><object><output><picture><progress><q><ruby><s><samp><script><select><slot><small><span><strong><sub><sup><svg><template><textarea><time><u><tt><var><video><wbr>
Elements
The following is a complete list of all HTML "block-level" elements (although "block-level" is not technically defined for elements that are new in HTML5).
<address>Contact information.<article>Article content.<aside>Aside content.<blockquote>Long ("block") quotation.<details>Disclosure widget.<dialog>Dialog box.<dd>Describes a term in a description list.<div>Document division.<dl>Description list.<dt>Description list term.<fieldset>Field set label.<figcaption>Figure caption.<figure>Groups media content with a caption (see <figcaption>).<footer>Section or page footer.<form>Input form.<h1>, <h2>, <h3>, <h4>, <h5>, <h6>Heading levels 1-6.<header>Section or page header.<hgroup>Groups header information.<hr>Horizontal rule (dividing line).<li>List item.<main>Contains the central content unique to this document.<nav>Contains navigation links.<ol>Ordered list.<p>Paragraph.<pre>Preformatted text.<section>Section of a web page.<table>Table.<ul>Unordered list.
참고 사이트>>>
https://www.tutorialspoint.com/html/html_blocks.htm
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
'Language > [PHP]' 카테고리의 다른 글
| 웹개발 - 프론트엔드와 백엔드 분리하기 (0) | 2020.02.07 |
|---|---|
| HTML - <a> 태그란> (0) | 2020.02.04 |
| PHP - file_put_contents 가 실행되지 않음 (0) | 2020.02.03 |
| HTML - <form> 태그 : 사용자에게 입력값을 받기 (0) | 2020.02.03 |
| CSS 분리할때, background-image url 주의할 점 (0) | 2020.02.03 |
