1. display 프로퍼티

display 프로퍼티는 layout 정의에 자주 사용되는 아주 중요한 프로퍼티이다.

display의 값으로 사용되는 키워드는 다음과 같다:

• block ⇒ block 특성을 가지는 요소로 지정
• inline ⇒ inline 특성을 가지는 요소로 지정
• inline-block ⇒ inline block 특성을 가지는 요소로 지정
• none ⇒ 해당 요소를 화면에 표시하지 않는다 (공간조차 사라짐)

HTML요소는 display 프로퍼티를 따로 설정하지 않으면 기본적으로 block또는 inline값을 가진다.

(예를 들어 p태그의 display 기본값은 block이다.)

또한 display 프로퍼티는 상속되지 않는다.

1.1 block 레벨 요소

block 특성을 가지는 요소(block 레벨 요소 또는 block 요소)는 아래와 같은 특징을 갖는다.

• 항상 새로운 라인에서 시작한다.
• (따로 지정하지 않으면) 화면 크기 전체의 가로폭을 차지한다. (width: 100%)
• width, height, margin, padding 프로퍼티 지정이 가능하다.
• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다
• block 레벨 요소 예
  • div, h1~h6, p, ol, ul, li, hr, table, form 등

1.2 inline 레벨 요소

inline 특성을 가지는 요소(inline 레벨 요소 또는 inline 요소)는 아래와 같은 특징을 갖는다.