[Front-End] block, inline, display

Block-Level vs Inline-Level

• block
  width와 height가 적용될 수 있다.
  이 요소는 하나의 문단으로 처리되기 때문에 태그 다음에 나타나는 요소는 자동 줄바꿈 된다.
  display:block; 요소가 숨어져 있다

• Inline
  width와 height를 부여하더라도 적용되지 않는다.
  하나의 단어나 강조 구문처럼 인식되기 때문에 태그 다음의 요소는 줄바꿈 되지 않는다.
  ⇒ 단순 단어의 “강조”
  display:inline; 요소가 숨어있다.

• Inline-block
  inline과 같이 줄바꿈이 되지 않지만 크기 여백을 지정할 수 있으므로 해당 요소 내부에서는 블록 요소처럼 동작

display

• display란?
  요소를 어떻게 보여줄 지 레이아웃을 결정하는 속성,
  기본은 inline모든 요소에 적용 가능
  None: 요소를 렌더링하지 않도록 설정하고, 영역도 차지하지 않음

• display : none;
  이 속성이 적용된 요소는 코드 상에는 존재하지만 화면상에 표시되지 않는다.

• display: inline-block

  Block-level 요소의 특성과 Inlin-Level요소의 특성을 혼합한 형태

  → Block 특성: 크기 지정 가능

  →Inline-Block 특성: 문장으로 형성됨

  ⇒ 즉, 크기를 지정할 수 있는 Inline-Level요소로 처리