728x90
반응형
블록 레벨 요소(Block-level Elements)
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다.
주요 블록 요소
<div> <p> <ul> <ol> <li> <h1>~<h6> <form> <header> <nav> <footer>
<section> <article> <aside> <table> <th> <td> <figure>
<figcaption> <caption> <blockquote>
특징
- 모든 인라인 요소를 포함할 수 있고 또다른 블록 요소도 일부 포함이 가능하다.
- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.
- width, height, margin, padding등을 사용하여 형태를 변형시켜 레이아웃을 수정할 수 있다.
- 블록 요소 다음으로는 줄바꿈이 이루어진다.
인라인 요소(Inline-Elements)
인라인 요소는 마크업을 할 때 가로로 정렬됩니다. 인라인 요소는 텍스트라고 생각하면 됩니다.
주요 인라인 요소
<span> <a> <em> <b>
<strong> <video> <audio>
특징
- 인라인 요소는 항상 블록 요소안에 포함되어 있다.
- 인라인 요소안에는 또다른 인라인 요소가 포함될 수 있다.
- 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 되기에 임의로 width, height로 변형을 줄 수가 없다.
- 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙, 좌,우측 정렬을 할 수 있다.
- 인라인 요소 다음은 줄바꿈이 없고 우측으로 이어서 표기가 된다.