박스 모델 - padding, border, margin 무시하면 도대체 무슨 일이 생기나?

Об этом предложении

웹페이지의 모든 요소는 눈에 보이지 않는 사각형 박스로 구성 됩니다. 이 사각형 박스에 적용되는 규칙이 박스모델인데, 이 박스 모델(Box Model)은 웹 브라우저가 HTML의 모든 요소를 화면에 렌더링할 때 ‘네모난 상자’로 처리하는 기본 규칙 입니다. HTML 태그가 <div> 이든, <button> 이든, <h1> 이든 무엇이든 상관없이 모든 웹 요소는 중심부에서 외곽으로 확장되는 4개의 Layer(층) 구조로 이루어져 있습니다. [박스 모델 구성 요소 (4개의 Layer)] 1) Content (콘텐츠): 텍스트, 이미지, 아이콘 등 실제 내용물이 들어가는 영역 width와 height 속성으로 크기를 직접 조절 2) Padding (안쪽 여백): 콘텐츠 영역과 테두리(border) 사이의 내부 여백 요소를 클릭할 수 있는 영역 확장, 배경색/배경 이미지가 (이 영역까지) 적용됨 3) Border (테두리): Padding과 Margin 경계에 위치하는 외곽선 border: 1px solid black; 처럼 두께, 스타일, 색상 지정 4) Margin (바깥쪽 여백): 현재 요소와 다른 이웃 요소 사이의 외부 간격 투명한 영역이며, 요소 상하 마진이 겹칠 때 더 큰 마진으로 합쳐지는 '마진 병합(Margin Collapse)' 현상 발생 [박스 모델을 반드시 알아야 하는 3가지 이유] 박스 모델을 이해하지 못하면 웹 화면 레이아웃을 잡을 때 수많은 버그와 마주치게 됩니다. 1 요소를 원하는 크기로 정확히 제어하기 위해 (크기 계산 착오 방지) 기본적으로 CSS에서 width: 200px을 주고 padding: 20px, border: 2px를 추가하면 브라우저가 화면에 실제로 그려내는 전체 너비는 200 + 40 + 4 = 244px가 됩니다. 이 원리를 모르면 "너비를 분명 200px로 정했는데 왜 다른 200px 상자보다 더 크게 보이고 줄바꿈이 깨질까?"라는 문제를 겪게 됩니다. 2 안쪽 여백(Padding)과 바깥 여백(Margin)의 용도를 정확히 나누기 위해 Padding: 요소 내부 디자인을 가다듬을 때 씁니다. (예: 버튼 안의 글자와 버튼 테두리 사이가 너무 빽빽해서 답답할 때) Margin: 다른 요소와의 거리를 둘 때 씁니다. (예: 위쪽 카드가 아래쪽 카드와 너무 바짝 붙어있을 때) 이 둘을 헷갈려서 Margin을 줘야 할 곳에 Padding을 주면 배경색이 이상하게 확장되는 스타일 오작동이 일어납니다. 3 마진 병합(Margin Collapse) 현상을 해결하기 위해 두 개 이상의 세로로 인접한 요소가 각각 margin-top과 margin-bottom을 가질 때, 두 마진 값이 더해지는 것이 아니라 더 큰 쪽의 마진 하나만 덮어씌워져 적용되는 현상 이 발생합니다. 예: 위 상자의 margin-bottom: 30px과 아래 상자의 margin-top: 20px이 만나면 50px이 아닌 30px 간격만 생깁니다. 박스 모델의 원리를 알아야 이 현상을 버그로 오인하지 않고 대처할 수 있습니다. [박스 전체 크기 계산 (content-box 기준)] 실제 박스 너비 = Content + 좌우 Padding + 좌우 Border + 좌우 Margin 기본 CSS 동작(box-sizing: content-box)에서는 요소의 전체 너비가 width + padding + border의 합으로 계산되어 사용자가 지정한 width보다 실제 상자가 커지는 문제가 자주 생깁니다 . 이 때문에 실무에서는 padding과 border를 포함하여 지정한 width 크기로 상자를 고정해 주는 속성을 프로젝트 최상단에 적용하고 시작하는 것이 표준(box-sizing: border-box;) 입니다 [CSS 기술 예시] /* 실무 필수 기본 설정 - padding과 border를 포함 전체 넓이를 width로 기본 계산 / ` ` { box-sizing: border-box; } box-sizing: border-box 속성은 필히 CSS 최상단에 표기함을 기억해야 합니다. 참고로 '*' 는 전체 선택자로 이 선택자에 선언된 내용이 전체에 적용됨을 의미합니다.

Детали предложения

Провайдер

velog

Источник

velog-rss

Балл

54.39

Уверенность

49%