HTML Basic Syntax 1

inline element and block element

HTML의 요소들은 두가지로 분류할 수 있다. 물론 현재 이와 같은 분류는 현재의 4.01.버전 이후부터는 더욱 세분화 되었다고 한다. HTML5에서는 그래서 두가지 분류말고도 더 많은 분류가 있다고 한다.
먼저 살펴볼 것은 두 요소의 가장 큰 차이점이다. inline element와 block element의 가장 큰 차이점은 block요소에서는 줄바꿈이 일어난다는 것이다. inline element는 줄바꿈이 일어나지 않아서 가로로 쌓이고 block element는 세로로 쌓이게된다. 대표적인 block element는 ul,li가 있을 것이다. 이것들은 display: inline이라는 설정을 css에서 해주지 않으면 세로로 쌓이게된다. 둘다 요소 안에는 텍스트와 인라인 요소를 포함시킬 수 있다. 그렇지만 inline요소는 안에 block요소를 포함할 수 없다.

또 display: inline-block로 display 값을 줄 수 있다. 이는 둘의 특징을 모두 가진 것을 말한다. 즉 inline처럼 줄바꿈 없이 가로로 쌓이고 block의 특징을 가져서 width와 height를 지정할 수 있다.
CSS에서 요소의 display속성 변경은 display: inline 또는 display: block을 통해서switching이 가능하다.

block요소들 몇개를 보면

• <address>
• <article>
• <p>
• <ol>
• <li>
• <ul>
• <header>
• <table>
• <section>

inline요소들을 몇개 보면

• <a>
• <i>
• <script>
• <br>
• <span>
• <abbr>
• <code>
  등이 있다.

Block-level elements

다음은 mdn에 나와있는 block element에 대한 설명이다.
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block"
블록 요소는 그것의 부모 요소의 수평 공간을 모두 차지한다. 그리고 요소의 height만큼 수직 공간을 차지한다. 그 결과 "블록"을 만든다. 이렇게 해석될 수있다. 또한 블록 요소는 언제나 새로운 줄에서 그 줄의 공간을 다 차지하면서 탄생한다.

inline elements

Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
인라인 요소는 그 요소를 정의하고 있는 다른 요소의 영향권 안에서 공간을 차지하므로서 컨텐트의 flow를 깨지 않는 요소를 말한다.

HTML 마크업시 어떠한 요소가 블록요소인지 inline인지 아는 것은 매우 중요하기 때문에 기본적으로 알아놓도록하자.

참고자료

• mdn