🌱 기초 프론트엔드
인라인과 블록 요소의 차이
쉽게 이해하기
문단(블록)과 단어(인라인)의 차이와 같아요. 문단은 항상 새 줄에서 시작해서 가로 전체를 차지하지만, 단어는 옆으로 이어서 쓸 수 있죠. HTML 요소도 마찬가지예요.
핵심 정리
블록은 한 줄 전체를 차지하고, 인라인은 내용만큼만 자리를 차지해요.
자세히 알아보기
HTML 요소는 크게 블록(Block) 요소와 인라인(Inline) 요소로 나뉩니다. 블록 요소는 <div>, <p>, <h1> 같은 것들로, 항상 새 줄에서 시작하고 가로 전체 너비를 차지합니다. 높이와 너비를 지정할 수 있어요.
인라인 요소는 <span>, <a>, <strong> 같은 것들로, 내용의 크기만큼만 공간을 차지하고 옆으로 이어집니다. 높이와 너비를 지정해도 적용되지 않아요. 위아래 margin도 안 먹히고, padding만 부분적으로 적용됩니다.
중간 형태도 있어요. inline-block은 인라인처럼 옆으로 이어지지만, 블록처럼 너비와 높이를 지정할 수 있습니다. 버튼이나 네비게이션 메뉴를 만들 때 자주 씁니다.
CSS의 display 속성으로 요소의 타입을 바꿀 수 있어요. 'display: block'으로 인라인 요소를 블록으로, 'display: inline'으로 블록 요소를 인라인으로 바꿀 수 있습니다. 레이아웃을 만들 때 이 개념을 잘 이해하면 훨씬 수월해요.