HTML을 공부하다 보면 태그를 연속해서 작성해도
옆에 붙어있는 것이 있고, 또 다른 태그는 내림 태그를 사용하지
않았음에도 자동으로 한 칸 내려가는 태그도 있다.
각 태그마다 지니고 있는 속성이 있는데, display 속성에 따라
위와 같은 결과가 발생한다.

오늘의 포스팅은 바로 display 기본 속성이다.

display 기본 속성

display는 레이아웃을 잡을 때 필요한 개념이다.
기본적으로 알고 있어야 하는 display의 속성은

1. inline
2. block
3. inline-block이 있다.

1. inline 속성

1. html 태그 중 span이나 a, img, input과 같은 태그는
   연속해서 태그를 써도 옆에 붙어있는 것을 알 것이다.
   이렇게 연속해서 무언가를 작성해도 옆에 배치되는 속성을
   inline 속성이라고 한다.

2. CSS로도 display 속성 부여가 가능한데, 간단하다.
   적용시킬 셀렉터에 display: inline; 이라고만 작성해주면 된다.

1.1 inline 속성 특

• 줄을 안 바꿔도 다른 요소와 같은 행에 위치할 수 있다.

• content의 너비만큼 가로폭을 차지한다.

• width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다

• inline 요소 안에서 block 요소를 포함하지 못한다.

2. block 속성

1. html 태그 중 div나 p, h1, form 태그와 같은 태그는
   태그를 연속 사용해주면 inline과 다르게 줄바꿈이 일어나
   다음 라인에 배치된다.
   이처럼 연속해서 무언가를 작성했을 때 다음 라인에 배치되는 속성을
   block 속성이라고 한다.

2.1 block 속성 특

• block 속성 태그를 붙여놔도 새로운 라인에서 시작한다.

• 화면 크기 전체의 가로폭을 차지한다. (width: 100%)

• width, height, margin, padding 프로퍼티 지정이 가능.

• block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

3. inline-block

block과 inline 요소의 특징을 모두 가진 혼종이다.

3.1 inline-block 속성 특

• 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.(inline 해당)

• width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.(block, inline 둘 다 해당)

• content의 너비만큼 가로폭을 차지한다.(inline 해당)

inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.(inline 해당)

Reference
PpoiemaWeb
learnlayout