1. Display 속성
모든 HTML element는 아무런 CSS를 적용하지 않아도 기본적으로 브라우저에 표현되는 default 표시값으로 block element를 가진다.
CSS layout 정의에 자주 사용되는 중요 속성들
block : block 특성을 가지는 요소(block 레벨 요소)로 지정
inline: inline 특성을 가지는 요소(inline 레벨 요소)로 지정
inline-block: inline-block 특성을 가지는 요소(inline-block 레벨 요소)로 지정
none: 해당 요소를 화면에 표시하지 않는다 (공간조차 사라진다)
2. block 요소
항상 새로운 라인에서 시작하기 때문에 옆에 다른 요소를 붙여넣을 수 없다. width와 같은 속성 값을 지정이 가능하며 block 요소 내에 inline 요소를 포함할 수도 있다.
예를 들어 <div>, <h1~h6>,<p>,<ol>,ul>,<header>,<footer>,<table>과 같은 태그들이 있다.
3. inline 요소
block요소와 성질이 반대된다. 말 그대로 inline 요소는 요소들 끼리 서로 한 줄에 위치할 수 있다. 문장 중간에도 들어갈 수 있지만 width와 같은 속성 값을 지정 할 수 없으며 inline 요소 내에 block요소를 포함할 수도 없다. 예로는 <span>,<a>,<br>과 같은 태그들이 있다.
4. inline-block요소
block 과 inline 요소의 특징을 모두 갖는다. inline 요소와 같이 한 줄에 위치 할 수 있으며, width와 같은 속성을 모두 지정할 수 있다. 예로 <img>, <input>, <button> 과 같은 태그들이 있다.
