HTML 인라인, 블록, 인라인블록

인라인(inline) 요소

<span>, <a>, <br>, <em>, <strong>, <input>, <label>, <img>

하나의 태그가 브라우저에서 실제로 코딩괸 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소들. 행 안의 일부분이라고 보면 된다. 텍스트 레벨 요소라고 하기도 한다.

1. 가로 배치 된다.
2. 컨텐츠에 따라 사이즈가 자동 설정된다. (사이즈 조절 불가)
3. 상하 마진을 가질 수 없다. (좌우만 가능)
   
   width와 height값을 입력했지만 텍스트 크기에 맞춰진 모습. 그리고 margin: 50px이지만 좌우에만 적용 됐다.

블록(block) 요소

<div>, <table>, <h1>~<h6>, <p>, <form>, <ul>,<ol>, <li>, <dl>, <dt>, <dd>, <pre>, <blockquote> 등

하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소들

1. 기본적으로 세로 배치 된다.
2. width: 100% 값이 기본으로 들어가 있기 때문에 따로 지정해주지 않으면 브라우저 좌우를 꽉 채운다. 인라인과 달리 width, height 값을 부여할 수 있다.
3. margin이 상하좌우 모두 적용된다.

인라인블록(inline-block) 요소

<button>, <select> 등

인라인 요소와 블록 요소의 성질을 모두 가지고 있다.

1. 가로로 배치된다. (인라인 특성)
2. 사이즈 조절이 가능하다. (블록 특성)
3. 상하좌우 마진 값 조절 가능 (블록 특성)

-

태그마다 갖고 있는 display 값이 다르긴 하지만 diplay속성을 입력해주어 내가 원하는 display 속성으로 변경해주면 된다!

??: 마진 상하좌우 다 넣고 크기 조절도 하고 싶네~
-> display: block으로 처리한다.

??: 아 근데 가로로 배치하고 싶네
-> display: inline-block으로 처리한다.