inline, block의 차이점

inline, block

태그는 웹 브라우저에 탑재된 스타일시트에 따라 기본적인 CSS속성을 가지고 있다. 그 중에 inline과 block이라는 속성은 화면 레이아웃과도 직접적인 연관성이 있다.

inline 속성

inline요소는 항상 블록 요소안에 포함되어 있으며 인라인 요소안에 다른 인라인 요소가 포할될 수 있다. 그리고 기본적으로 컨텐츠가 끝나는 지점까지를 넓이로 가지게 된다. 그래서 임의로 width, height로 변형을 줄 수가 없다. 인라인 요소는 line-height로 줄의 높낮이를 조절할 수 있고 text-align으로 텍스트의 중앙,좌,우측 정렬을 할 수 있다. 인라인 요소의 다음에는 줄바꿈이 없고 우측으로 바로 이어서표시가 된다.

inline 요소

• <a>
• <i>
• <abbr>
• <img>
• <strong>
• <b>
• <input>
• <sub>
• <br>
• <code>
• <em>
• <small>
• <tt>
• <map>
• <textarea>
• <label>
• <sup>
• <q>
• <button>
• <cite>

inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.

block 속성

Block요소는 모든 인라인 요소를포함할 수 있고 다른 블럭 요소도 일부 포함 할 수 있다. 그리고 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 되며 width,height,margin,padding등을 사용하여 형태를 변경하여 레이아웃을 수정할 수 있다. 그리고 블럭 요소 다음에는 줄바꿈이 이루어진다.

block 요소

• <address>
• <article>
• <aside>
• <blpclgquote>
• <canvas>
• <dd>
• <div>
• <dl>
• <hr>
• <header>
• <form>
• <h1>
• <h2>
• <h3>
• <h4>
• <h5>
• <h6>
• <table>
• <pre>
• <ul>
• <p>
• <ol>
• <video>

block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있다.