CSS 박스 모델 완벽 해설! 웹 디자인 핵심 속성 3가지 마스터 가이드

웹페이지 레이아웃의 비밀, 박스 모델! 📦

웹 브라우저에서 HTML 요소들이 어떻게 배치되는지 궁금했지? 그 비밀은 바로 박스 모델이라는 개념에 숨어있어. 모든 HTML 요소는 마치 상자처럼 생각하면 돼. 이 상자들을 원하는 곳에 배치하고 꾸며서 멋진 웹페이지를 만드는 게 웹페이지 제작의 핵심이야.

박스 모델, 현미경으로 들여다보기 👀

평범한 물건을 현미경으로 보면 우리가 몰랐던 작은 부분까지 볼 수 있잖아? HTML 요소들도 마찬가지야. 겉으로 보기엔 그냥 글자나 그림처럼 보이지만, 자세히 들여다보면 박스 모델이라는 기본 원리로 구성되어 있다는 걸 알 수 있어.

박스 모델, 눈으로 확인하기 🛠️

크롬 브라우저에서 개발자 도구를 열어서 직접 확인할 수 있어.

1. 요소 선택: 개발자 도구의 '요소 선택 도구'를 사용하거나, 'Elements' 탭에서 직접 태그를 클릭해서 원하는 요소를 선택해.

2. 박스 모델 확인: 선택한 요소의 개발자 도구 화면을 보면, 사각형 모양의 박스가 보일 거야. 이 박스는 margin, border, padding, content 이렇게 네 가지 부분으로 구성되어 있어.

   • Content: 실제 내용이 보이는 부분이야.
   • Padding: 내용과 테두리 사이의 안쪽 여백이야.
   • Border: 요소의 테두리야.
   • Margin: 테두리 바깥쪽의 여백이야.

이 네 가지로 구성된 박스 모델은 모든 HTML 태그에 존재해.

박스 모델, 블록 vs 인라인 🧱↔️

HTML 요소에는 블록 요소와 인라인 요소가 있는데, 이 성격도 박스 모델에 따라 결정돼. 박스 모델의 성격이 블록이냐 인라인이냐에 따라 요소의 특징이 달라지는 거지.

박스 모델, 속성으로 제어하기 ✍️

이제 박스 모델을 제어하는 속성들을 하나씩 배워볼 거야.

1. Margin (바깥쪽 여백) ↔️

• 역할: 요소의 가장 바깥쪽 여백을 담당해. 다른 요소와의 간격을 조절할 때 사용돼.
• 사용법: margin 속성을 사용하고, 크기 단위(px, %, em 등)를 지정해.
  • margin: 20px; (위, 아래, 왼쪽, 오른쪽 모두 20px)
  • margin: 10px 20px; (위아래 10px, 왼쪽 오른쪽 20px)
  • margin: 10px 20px 30px; (위 10px, 오른쪽 20px, 아래 30px, 왼쪽은 오른쪽과 동일)
  • margin: 10px 20px 30px 40px; (위 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px)
• 방향별 지정: 특정 방향만 지정하고 싶을 땐 margin-top, margin-right, margin-bottom, margin-left를 사용해.
  • margin-bottom: 100px; (아래쪽 여백만 100px)
• 주의할 점: 마진 겹침 현상!
  • 같은 레벨의 요소에서 마진이 겹치면, 더 큰 값으로 적용돼. 예를 들어 위 요소의 아래 마진과 아래 요소의 위 마진이 겹치면, 둘 중 더 큰 값으로 간격이 결정돼.
• 인라인 요소의 마진: 인라인 요소는 margin-top과 margin-bottom이 적용되지 않아. 왼쪽과 오른쪽만 적용돼.

2. Border (테두리) 📏

• 역할: 요소의 테두리를 만들어줘.
• 사용법: border 속성을 사용하고, 굵기, 스타일, 색상 세 가지 값을 순서대로 지정해.
  • border: 1px solid red; (1px 굵기, 실선, 빨간색 테두리)
• 다양한 스타일: solid 외에도 dotted, dashed 등 다양한 스타일이 있어. (실무에서는 solid를 가장 많이 사용해)
• 방향별 지정: border-top, border-right, border-bottom, border-left를 사용해서 특정 방향에만 테두리를 만들 수 있어.
• 축약 속성: border-width, border-style, border-color를 따로 지정하는 대신 border 하나로 묶어서 사용할 수 있어. 이걸 축약 속성이라고 해.

3. Padding (안쪽 여백) 🗂️

• 역할: 내용과 테두리 사이의 안쪽 여백을 만들어줘.
• 사용법: padding 속성을 사용하고, 크기 단위를 지정해. margin과 마찬가지로 다양한 방식으로 값을 지정할 수 있어.
  • padding: 20px; (모든 방향 20px)
  • padding: 10px 20px; (위아래 10px, 왼쪽 오른쪽 20px)
• 방향별 지정: padding-top, padding-right, padding-bottom, padding-left를 사용해.
• 차이점: margin과 달리 겹침 현상이 없어.

4. Content (내용) 📝

• 역할: 실제 텍스트나 이미지가 보이는 부분이야.
• 크기 조절: width와 height 속성으로 내용 영역의 가로, 세로 크기를 조절할 수 있어.
  • width: 100px;
  • height: 100px;
• 주의할 점: box-sizing 속성!
  • width와 height를 지정하면, 기본적으로 내용 영역만 해당 크기로 설정돼. 테두리나 패딩은 이 크기 바깥에 추가돼.
  • box-sizing: border-box;로 설정하면, width와 height에 테두리와 패딩까지 포함해서 계산돼. 그래서 지정한 크기 그대로 요소가 표시돼. 앞으로 웹페이지를 만들 때 이 속성을 자주 사용하게 될 거야!

박스 모델의 성격 바꾸기: display 속성 🎭

display 속성을 사용하면 박스 모델의 성격을 바꿀 수 있어.

• display: block;: 요소를 블록 요소로 만들어줘. (기본값: p, div 등)
  • 항상 새로운 줄에서 시작하고, 가로 전체를 차지해.
• display: inline;: 요소를 인라인 요소로 만들어줘. (기본값: span, a 등)
  • 같은 줄에 다른 요소들과 나란히 배치되고, 내용만큼만 크기를 차지해.
• display: inline-block;: 인라인 요소처럼 다른 요소들과 같은 줄에 배치되면서도, 블록 요소처럼 width, height, margin-top, margin-bottom 등을 적용할 수 있게 해줘.

이처럼 박스 모델은 웹페이지 레이아웃을 만드는 데 아주 중요한 개념이야. 이 속성들을 잘 이해하고 활용하면 원하는 대로 요소를 배치하고 꾸밀 수 있을 거야!