📘 CSS block 속성에 대한 심화 이해
오늘은 CSS의 block 속성에 대해 좀 더 깊이 이해하고, 관련된 개념들을 함께 정리했다.
1. block 요소와 inline-block 요소의 차이점
-
줄 바꿈: block 요소는 다음에 오는 요소를 새로운 줄로 밀어내지만, inline-block 요소는 한 줄에 여러 요소를 나란히 배치할 수 있다.
-
크기 제어: block 요소와 inline-block 요소 모두 width와 height 속성을 사용할 수 있지만, inline-block 요소는 인라인 요소처럼 작동하여 인라인 컨텍스트에서 크기를 조정한다.
-
공간 차지: inline-block 요소는 텍스트 줄에서 공간을 차지하며, 주변 텍스트와 같이 배치될 수 있다. 반면, block 요소는 항상 새로운 줄에서 시작한다.
2. 레이아웃을 설계할 때 block 속성의 활용
-
레이아웃 구성: 웹 페이지의 기본 레이아웃을 설계할 때, block 요소를 사용하여 각 섹션을 독립적으로 배치할 수 있다. 예를 들어, 헤더, 본문, 푸터를 각각 block 요소로 설정하면, 각 부분이 독립된 줄에 위치하게 되어 구조화된 레이아웃을 만들 수 있다.
-
그리드 시스템: CSS 그리드 레이아웃을 구현할 때, 각 그리드 아이템은 기본적으로 block 요소처럼 동작한다. 이렇게 하면 그리드 아이템이 각각의 행 또는 열에 배치된다.
3. display: block과 width: 100%를 함께 사용했을 때 발생할 수 있는 문제
-
예상치 못한 스크롤: block 요소에 width: 100%를 지정하면, 요소가 부모 요소의 너비를 꽉 채우지만, 부모 요소의 패딩이나 보더를 고려하지 않으면, 요소가 부모의 너비를 초과해 스크롤이 발생할 수 있다.
-
해결 방법: 이 문제를 해결하려면 box-sizing: border-box; 속성을 사용해 패딩과 보더를 포함한 너비를 설정해야 한다. 이 속성은 요소의 총 너비가 부모 요소를 초과하지 않도록 한다.
.element {
display: block;
width: 100%;
box-sizing: border-box;
}
🔗 추가로 참고할 개념
box-sizing 속성: box-sizing: border-box;는 요소의 크기를 계산할 때 패딩과 보더를 포함시켜 스크롤 문제를 방지한다.
CSS Flexbox와 Grid: 레이아웃을 구성할 때 block 요소 외에도 Flexbox나 Grid를 활용하면 더 유연한 레이아웃을 만들 수 있다.
