[html] 인라인(inline), 블록(block) 요소

• 인라인(inline)

- 수평 방향으로 요소가 배치. 줄 바꿈 적용 안됨

- 박스의 크기를 설정하는 width와 height 속성이 적용되지 않음

- 상하단 마진인 margin-top, margin-bottom 속성이 적용되지 않음

 

(예시)

: <span>

: <a>

: <img>

: <input>

: <textarea>

: <br>

: <button>

: <select>

: <option>

: <script>

 

• 블록(block)

- 앞 뒤에 자동 줄 바꿈이 일어나 새로운 줄에 요소가 표시. 수직 방향으로 배치

- 박스 크기 설정하는 width, height 속성 적용 됨

- 모든 마진 설정이 가능

 

(예시)

: <div>

: <p>

: <h1> 에서 <h6>

: <form>

: <table>

: <ul>

: <ol>

: <li>

: <video>

: <header>

: <footer>

: <section>

 

• 인라인-블록(inline-block)

- 수평 방향으로 배치. 줄 바꿈 안일어남

- 블록 방식과 같이 박스의 크기 설정 가능

- 블록 방식과 같이 모든 마진 설정 가능