CSS 튜토리얼)Part3. CSS 기본문법 - 마진, 패딩, 박스모델

Posted Apr 5, 2024 Updated Apr 23, 2024

By kimyih 17 min read

안녕하세요, 여러분!

Part3 에 드디어 왔습니다 😂
글이 생각보다 많았네요 Part3 도 나눠서 진행하도록 하겠습니다!

그래서 오늘은 박스모델과 마진, 패딩 대해 먼저 설명할게요!

Part3. CSS 속성 기초

텍스트 스타일링 글꼴, 색상, 크기 배경 색상, 이미지 박스 모델 마진, 패딩, 테두리, 너비, 높이

중에 박스 모델과 마진과 패딩에 대해 먼저 알아보도록 하겠습니다!

박스모델

📍box-sizing:

속성은 요소의 크기를 계산하는 방식을 결정합니다.
이 속성은 주로 두 가지 값을 가집니다: content-box와 border-box.
이 두 설정은 요소의 width와 height가 다른 요소들(패딩, 테두리)과 어떻게 상호 작용하는지에 영향을 줍니다.

1. content-box

content-box는 CSS의 기본 box-sizing 값입니다.
이 설정에서 width와 height는 순수하게 요소의 내용(content) 영역만을 가리킵니다.

즉, 요소의 전체 크기는 내용 영역에 패딩(padding), 테두리(border), 그리고 마진(margin)의 크기가 추가된 것입니다

예시

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

이 경우, .box의 실제 가시적 너비는 다음과 같이 계산됩니다.

내용의 너비: 300px
패딩: 왼쪽 20px + 오른쪽 20px = 40px
테두리: 왼쪽 5px + 오른쪽 5px = 10px
총 너비: 300px + 40px + 10px = 350px

2. border-box:

border-box 설정은 width와 height가 요소의 테두리와 패딩을 포함하여 요소의 전체 크기를 지정합니다.
내용 영역은 전체 크기에서 패딩과 테두리를 제외한 나머지 공간을 차지합니다.
이 설정은 더 직관적인 크기 조정을 가능하게 하여 개발자들 사이에서 선호되는 설정입니다.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

이 경우, .box의 실제 가시적 너비는 width에 명시된 300px을 유지합니다.
내부의 내용 영역은 패딩과 테두리의 폭을 제외한 크기가 됩니다

총 패딩과 테두리: 40px (패딩) + 10px (테두리) = 50px
내용의 너비: 300px - 50px = 250px

속성	`content-box`	`border-box`
정의	기본 CSS 박스 모델. `width`와 `height`는 내용(content) 영역만을 지정합니다.	`width`와 `height`가 테두리(border)와 패딩(padding)을 포함합니다.
계산 방식	내용 크기만큼만 크기를 설정하며, 패딩과 테두리는 크기에 추가됩니다.	설정한 크기 내에 패딩과 테두리가 포함되므로, 내용 영역은 실제로 더 작아집니다.
용도	정밀한 레이아웃 조정이 필요할 때 유용합니다. 요소의 정확한 크기를 알고, 그에 맞춰 조절할 수 있습니다.	요소의 전체 크기를 미리 예측하고 설정하기 쉬워서 레이아웃을 간편하게 만들 수 있습니다. 특히 반응형 디자인에 유리합니다.
장점	내용의 정확한 크기 조절이 가능합니다.	요소의 크기를 설정할 때 테두리와 패딩을 고려하지 않아도 되므로 더 직관적입니다.
단점	전체 요소의 크기를 계산할 때 추가적인 계산(패딩과 테두리)이 필요합니다.	내용 영역이 예상보다 작아질 수 있으므로 내용 크기를 조절할 때 주의가 필요합니다.
예시 적용	디자인에서 요소별로 세밀한 크기 조절이 필요한 경우.	웹 페이지의 전반적인 구조를 간단하게 유지하면서 빠르게 레이아웃을 구성하고 싶을 때.

3.Contents

CSS 박스 모델에서 “내용(Content)” 영역은 각 HTML 요소의 실제 내용이 표시되는 곳입니다.
이 영역은 텍스트, 이미지, 또는 다른 요소들이 포함되며, 요소의 가장 중심적인 부분을 형성합니다.
내용 영역의 크기와 특성은 여러 CSS 속성을 통해 조절할 수 있습니다.

3-1 내용 영역의 특성

크기 결정 width와 height 속성으로 이 영역의 너비와 높이를 직접 설정할 수 있습니다.
이 값들은 기본적으로 내용의 크기를 결정하지만, box-sizing 속성의 값에 따라 패딩과 테두리를 포함할 수도 있습니다(border-box 사용 시).
콘텐츠 유형 내용 영역에는 HTML에서 정의된 콘텐츠가 위치합니다.
예를 들어 <div> 태그 내부에는 다른 HTML 요소들, 텍스트, 이미지 등이 위치할 수 있습니다.
텍스트 콘텐츠의 경우, 글꼴 스타일, 크기, 색상 등을 CSS를 통해 자유롭게 조절할 수 있습니다.
레이아웃 흐름 내용 영역은 문서의 흐름에 따라 다른 요소와 상호 작용합니다.
이는 display, position, float 등의 속성에 의해 영향을 받을 수 있습니다.
예를 들어, float 속성은 요소가 일반적인 문서 흐름에서 벗어나 특정 방향으로 이동하게 만들어 주변 콘텐츠가 그 주위를 감싸도록 할 수 있습니다.
가시성 visibility와 display 속성을 통해 요소의 내용 영역이 어떻게 보이는지, 또는 보이지 않는지 조절할 수 있습니다.
display: none;은 요소를 DOM에서 완전히 제거하여 공간조차 차지하지 않게 하며, visibility: hidden;은 요소를 숨기되 공간은 유지합니다.
오버플로 처리 내용이 설정된 크기를 초과할 경우, overflow 속성을 사용하여 어떻게 처리할지 결정할 수 있습니다.
overflow: hidden;은 초과분을 잘라내고, overflow: scroll;은 스크롤바를 추가하여 내용을 볼 수 있도록 합니다.
overflow: auto;는 필요할 경우에만 스크롤바를 추가합니다.

4. Pading

“패딩(Padding)“은 요소의 내용(Content)과 테두리(Border) 사이의 공간을 말합니다.
패딩은 요소 내부의 여백을 제공하여, 내용과 테두리 간에 시각적인 여유를 만들어줍니다. 패딩은 내용의 일부로 간주되기 때문에, 요소의 배경색이나 배경 이미지는 패딩 영역까지 확장됩니다.

개별 속성 사용:

padding-top: 요소의 상단 패딩을 설정합니다.
padding-right: 요소의 우측 패딩을 설정합니다.
padding-bottom: 요소의 하단 패딩을 설정합니다.
padding-left: 요소의 좌측 패딩을 설정합니다.

단축 속성 사용:

padding: 모든 네 방향의 패딩을 한 번에 설정할 수 있습니다. 예시: padding: 10px 15px 20px 25px;는 상단에 10px, 우측에 15px, 하단에 20px, 좌측에 25px의 패딩을 적용합니다.
시계 방향으로 순서대로 상, 우, 하, 좌의 패딩을 적용합니다.
일부 값만 설정할 경우, CSS는 나머지 값을 적절히 추론합니다.
예를 들어, padding: 10px 20px;는 상하 패딩 10px, 좌우 패딩 20px을 적용합니다.

  
.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

.compact-box {
  padding: 20px;
}

.different-padding {
  padding: 10px 15px 20px 25px;
}

box 클래스는 각 방향의 패딩을 개별적으로 설정합니다.
compact-box 클래스는 모든 방향에 동일하게 20px의 패딩을 적용합니다.
different-padding 클래스는 상, 우, 하, 좌 순으로 각기 다른 패딩을 적용합니다.

패딩은 요소의 디자인과 레이아웃에 중요한 역할을 하며, 콘텐츠의 가독성과 시각적 appeal을 향상시킬 수 있습니다. 따라서 웹 디자인에서 적절히 패딩을 설정하고 조절하는 것은 매우 중요합니다.

5. 마진(Margin):

“마진(Margin)” 은 요소의 외부 간격을 지정하는 속성으로, 요소와 그 주변 요소 간의 공간을 생성합니다. 마진은 요소의 레이아웃과 전체적인 페이지 디자인에 중요한 역할을 하며, 요소들 사이의 여백을 조절하여 시각적으로 깔끔하고 구분된 디자인을 만들 수 있게 합니다.

마진의 특성

영역 특성::
마진은 요소의 가시적인 경계 외부에 적용됩니다. 요소의 배경색이나 배경 이미지는 마진 영역에는 확장되지 않습니다.

충돌과 겹침(Collapsing Margins):
인접한 요소들의 마진이 서로 만날 때, 이들은 종종 병합(마진 충돌)됩니다.
이 현상은 특히 수직 방향의 마진에서 두드러지게 나타나며, 결과적으로 두 마진의 최대값만이 적용됩니다.

중앙 정렬: 마진을 사용하여 요소를 수평 중앙에 배치할 수 있습니다. 예를 들어, 요소에 margin: 0 auto;를 적용하면 좌우 마진이 자동으로 조절되어 요소가 중앙에 위치하게 됩니다.

부정 마진(Negative Margins): 마진 값으로 음수를 사용할 수 있습니다. 이를 통해 요소를 기본 위치에서 이동시키거나 다른 요소와 겹치게 만들 수 있습니다.

단위: 마진은 픽셀(px), 백분율(%), em, rem 등의 단위를 사용하여 지정할 수 있습니다.
백분율은 부모 요소의 너비에 대한 비율로 계산됩니다.

양수와 음수 값: 마진에는 양수와 음수 값을 모두 사용할 수 있습니다.
음수 값을 사용하면 요소들이 서로 겹치게 할 수 있습니다.

개별속성

Margin-top

📍 용도 : 요소의 상단 외부 여백을 설정합니다.
📍 값 : 단위를 포함한 수치(px, %, em 등) 또는 auto.
📍 특징 : 수직 방향의 마진은 인접한 요소의 마진과 병합될 수 있습니다(마진 병합 현상).

예시:

.example {
  margin-top: 20px;
}

Margin-right

📍 용도 : 요소의 오른쪽 외부 여백을 설정합니다.
📍 값 : px, %, em 등의 단위를 사용하거나 auto로 설정할 수 있습니다.
auto를 사용하면 브라우저가 마진을 자동으로 계산합니다.
📍 특징 : 좌우 마진은 auto를 사용할 경우, 요소를 가운데 정렬하는 데 유용하게 사용될 수 있습니다.

예시:

.example {
  margin-right: 30px;
}

Margin-bottom

📍 용도 : 요소의 하단 외부 여백을 설정합니다.
📍 값 : px, %, em 등의 단위나 auto.
📍 특징 : 마진 병합 현상이 수직 방향 마진에서 발생할 수 있습니다.

예시:

.example {
  margin-bottom: 15px;
}

Margin-left

📍 용도 : 요소의 왼쪽 외부 여백을 설정합니다.
📍 값 : 단위(px, %, em 등)를 사용하거나 auto.
📍 특징 : 좌우 마진에 auto를 사용하면 요소를 수평 중앙에 배치하는 데 도움이 될 수 있습니다.

예시:

.example {
  margin-left: 25px;
}

사용 예제

div {
  margin-top: 10px; /* 상단 마진 */
  margin-right: auto; /* 오른쪽 마진 자동 조절로 중앙 정렬 가능 */
  margin-bottom: 20px; /* 하단 마진 */
  margin-left: auto; /* 왼쪽 마진 자동 조절로 중앙 정렬 가능 */
}

다음은 보더 테두리에 대해 알아보도록 하겠습니다!

HTML/CSS

selector

This post is licensed under CC BY 4.0 by the author.