Block Element와 Inline Element

HTML 요소에는 '블록 레벨 요소'와 '인라인 요소'라는 개념이 존재합니다.

block 요소의 특징

ex) <div>, <p>, <h1>, ...  // -> display: block;이 기본값.

1. width 값 명시하지 않은 경우, 부모 요소의 content 영역에서 사용 가능한 최대 가로 너비를 사용합니다(width: 100%;).
   height 값 명시하지 않은 경우, heigth: 0;부터 시작하여 자신이 갖는 content 영역의 세로 너비 합만큼 갖는다.

2. width 값 명시한 경우, 남은 가로 너비를 margin으로 채웁니다. 즉, block 요소의 옆에는 다른 요소가 올 수 없습니다(블로킹).

3. 크기(width, height)를 사용자가 직접 설정할 수 있습니다.

4. width: 100%; height: 0;부터 시작합니다.
   실제 코드상에서는 width: auto; height: auto;로 설정되어 있습니다.
   블록 요소 안 Content에 따라 높이(heigth)가 늘어납니다.

5. 수직(위에서 아래)으로 요소가 쌓입니다.

6. margin, padding을 위, 아래, 좌, 우 모두 사용자가 설정할 수 있습니다.

7. 블록 요소는 대부분 레이아웃을 잡는 용도로 사용합니다.

inline 요소의 특징

ex) <span>, <img />, ...

1. 필요한 만큼의 너비를 사용합니다. 즉, 블록 요소처럼 가로 너비를 전부 사용하지 않고 대신에 어떤 내용(Content)만큼 가로 너비를 사용합니다. height 값 또한 자신의 Content 영역만큼 사용합니다.

2. 크기(width, heigth)를 사용자가 직접 설정할 수 없습니다.

3. width: 0; heigth: 0; 부터 시작을 합니다. 가로, 세로 너비는 요소가 포함하는 내용(Content)만큼 늘어납니다. 실제 코드상에는 블록 요소와 동일하게 width: auto; height: auto;로 설정되어 있습니다.

4. 요소가 수평(왼쪽에서 오른쪽)으로 쌓입니다. 또한 코드 작성시 요소간 줄바꿈을 사용하면 요소간 공백이 생기게 됩니다.

5. margin, padding을 좌, 우만 사용할 수 있습니다(위, 아래 사용 불가).

6. 텍스트를 다룰 때 사용합니다.

블록 요소와 인라인 요소의 width와 heigth의 auto값이 다르게 구현된다는 점에 주의해야 합니다.

위 특성은 정확히 일치하지는 않지만 대부분의 블록 요소와 인라인 요소는 해당 특성을 갖게 됩니다. 정확히 해당 특성들을 모두 갖지 않는다는 것에 주의하고 일반적으로 위 특성을 갖는다는 것입니다.

inline-block 요소의 특징

1. inline 요소처럼 기본적으로 자신의 content 만큼 너비를 가집니다.

2. 수평으로 배치됩니다.

3. inline 요소와 달리 width, hieght, margin, padding 속성을 사용할 수 있습니다.

요소 특성 바꾸기

인라인 요소를 강제적으로 블록 요소로 바꿀 수 있습니다. CSS에서 display 속성의 값으로 block을 작성하게 되면 해당 인라인 요소는 블록 요소의 특징을 갖게 됩니다. 반대로 블록 요소의 display 속성 값으로 inline을 작성하게 되면 해당 블록 요소는 인라인 요소의 특징을 갖게 됩니다.

기본적으로 블록 요소는 display: block;을 기본값으로 갖고 있고, 인라인 요소는 display: inline;을 기본값으로 갖고 있습니다.

HTML에는 크게 블록 요소와 인라인 요소가 존재하며 이것은 실제로 CSS의 display 속성에 영향을 받습니다.