👩‍🏫개념 설명

HTML(Hypertext Markup Language)의 요소는 블록과 인라인으로 분류됩니다. 기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

1. 블록 레벨 요소

블록 레벨 요소입니다.                                                                       

• 사용 가능한 최대 가로 너비를 사용합니다. (기본 너비값은 100%)
• 전체를 차지하기 떄문에 각 요소들이 한 줄에 하나씩만 배치 가능합니다.
• 가로 너비와 세로 길이를 지정할 수 있습니다.
• 마진과 패딩 값이 적용 가능합니다.
• 레이아웃을 작업하기 적합합니다.

2. 인라인 요소

인라인 요소입니다.

• 컨텐츠의 너비만큼의 영역을 사용합니다.
• 요소들이 한 줄에 여러 개 배치 가능합니다.
• 가로 너비와 세로 길이를 지정할 수 없습니다.
• 마진과 패딩 값이 적용 불가능합니다.
• 텍스트를 작업하기 적합합니다.

💡인라인 요소에 사이즈를 지정하는 방법
display: block; 또는 display: inline-block을 통해 블록 요소로 바꿔주면 됩니다.

🔗참고

블록 레벨 요소 인라인 요소