7월 5일_CSS(마진, 패딩, 박스모델)

#margin & padding

 

마진 (Margin):

마진은 요소의 바깥쪽 공간을 나타냄.

즉, 요소와 주변 요소들 사이의 간격을 조절하는 데 사용. 

• 외부 공간: 요소의 바깥쪽 공간을 설정
• 다른 요소들 사이의 간격: 인접한 요소들 사이의 간격을 조절하여 레이아웃을 조정
• 음수 값 허용: 마진 값에 음수를 사용하여 요소를 겹치게 할 수 있음
• 단위 사용: 주로 픽셀(px), 퍼센트(%), em 등의 단위를 사용하여 크기를 설정

.margin-example {
  margin: 10px; /* 상하좌우 모두에 대해 10px의 마진을 설정 */
  margin-left: 20px; /* 좌측에만 20px의 마진을 설정 */
  margin: 10px 20px; /* 상하에는 10px, 좌우에는 20px의 마진을 설정 */
}

 

패딩 (Padding):

패딩은 요소의 내부 공간을 나타냄.

즉, 요소의 콘텐츠와 테두리(border) 사이의 간격을 조절하는 데 사용

• 내부 공간: 요소의 내부에 여백을 설정
• 배경 색 적용: 패딩 영역에 배경 색이나 이미지를 적용할 수 있음
• 크기 조절: 요소의 크기를 설정할 때 패딩은 콘텐츠의 크기에 포함

.padding-example {
  padding: 10px; /* 상하좌우 모두에 대해 10px의 패딩을 설정 */
  padding-top: 20px; /* 위쪽에만 20px의 패딩을 설정 */
  padding: 10px 20px; /* 상하에는 10px, 좌우에는 20px의 패딩을 설정 */
}

 

차이점:

적용 범위:

마진은 요소의 외부 공간을 설정하고 인접 요소 사이의 간격을 조절.

패딩은 요소의 내부 공간을 설정하고 콘텐츠와 테두리 사이의 간격을 조절

영향 범위: 마진은 요소 주변의 빈 공간을 설정하며, 패딩은 요소의 내부 여백을 설정.

음수 값:

마진은 음수 값을 허용하여 요소를 겹치게 할 수 있지만,

패딩은 일반적으로 양수 값만 사용

 

---

# CSS 박스 모델

• 인라인(inline)

인라인 요소는 줄에 나란히 표시. 즉, 한 줄 안에서만 너비(width)와 높이(height) 속성을 변경할 수 없음

마진(top, bottom)을 지정할 수 있지만, 좌우 마진(left, right)은 적용되지 않음
내부 콘텐츠의 너비에 따라 자동으로 너비가 결정

 

• 블록(block)

블록 요소는 한 줄을 차지하며, 줄 바꿈이 됨
너비와 높이를 지정할 수 있음. 따라서 너비와 높이를 설정하지 않으면 가능한 최대 크기를 차지.
마진, 패딩 모두 적용 가능.

 

• 인라인-블록(inline-Block)

인라인-블록 요소는 인라인 요소처럼 한 줄에 표시되지만, 블록 요소의 특성을 가짐.
줄 바꿈 없이 요소들을 나란히 배치할 수 있음.
너비와 높이를 지정할 수 있으며, 마진과 패딩도 적용할 수 있음.

 

---

 

# 박스 모델(box model)

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름

박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분

 

• 내용(content)

텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다.

• 패딩(padding)

내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다.

• 테두리(border)

내용와 패딩 주변을 감싸는 테두리입니다.

• 마진(margin)

테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다.

 

---

 

• 박스 모서리 굴리기(R값) : border-radius
• 박스 테두리 스타일 : border-style : solid / dooted / dashed / double 등등
• 박스 테두리 각각 지정 : border-top-style / border-bottom-style / border-left-style / border-right-style
• 테두리 굵기 : border-width
• 테두리 컬러 : border-color