글자와 상자

• 요소가 화면에 출력하는 크게 구분되는 두 가지 특성

인라인(inline) 요소

• 글자를 만들기 위한 요소들
• 포함한 콘텐츠 크기만큼 자동으로 크기가 줄어든다.
• 요소의 가로 너비, 세로 너비를 지정할 수 없다.
  width, height ❌
• 요소의 외부 여백을 지정하는 css속성으로 너비를 설정해야 한다.
  margin, padding ⭕️
• 인라인 요소 안에는 블록 요소를 사용할 수 없다.

대표적인 인라인 요소

• <span> : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도이다.
  요소가 수평적으로 --> 쌓인다.
• <img>

블록(block) 요소

• 상자(레이아웃)을 만들기 위한 요소
• 가로너비는 부모 요소의 크기만큼 자동으로 크기가 늘어나는 반면, 세로너비는 포함한 콘텐츠 크기만큼 자동으로 줄어든다.
• 요소의 가로 너비, 세로 너비를 지정할 수 있다.
  width, height ⭕️
• 요소의 외부와 내부 여백을 지정할 수 있다.
  margin, padding ⭕️
• 블록 요소 안에는 블록 요소와 인라인 요소를 자식으로 사용할 수 있다.

대표적인 블록 요소

• <div> : 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 구분하는 용도이다.
  요소가 수직으로 쌓인다