display 프로퍼티의 종류

1) block 레벨요소

• block 요소의 특징은 화면전체의 가로폭을 차지하여 다음 block 요소를 사용하면 항상 새로운 라인에서 시작하게된다. 위아래로 쌓이는 것처럼 보인다 생각하면 된다.

- width, height, margin, padding 프로퍼티 지정이 가능하다.

block 레벨요소의 종류

• div

• h1 ~ h6

• p

• ol

• ul

• li

• hr

• table

• form

2) inline 레벨요소

• inline요소는 block요소와 다르게 중복해서 사용하면 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하게되며 문장의 중간에도 들어가게 사용할수가 있다.

• inline요소가 차지하는 공간은 content의 너비만큼이다.

• width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정할수 있다.

inline 레벨요소의 종류

• span

• a

• strong

• img

• br

• input

• select

• textarea

• button

3) inline-block 레벨요소

• inline-block 요소는 inline 요소처럼 한줄에 표현되면서 block 요소의 특징인 width, height, margin, padding 프로퍼티 지정이 가능하며 상, 하 여백도 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
• inline요소처럼 content너비만큼 가로폭을 차지한다.
  
  
  사용법
  
  inline 레벨요소의 태그나 block 레벨요소의 태그를 사용할때 해당 css에 display: inline-block 이렇게 입력하여 성질을 바꿀수있다.