[Front-End] css 속성 정리

CSS 박스 모델

CSS 박스 모델은 웹 페이지의 요소를 배치하고 공간을 조절하는 데 중요한 역할을 합니다. 이 모델은 요소의 width, height, padding, border, margin을 모두 포함하여 요소의 전체 크기와 위치를 결정합니다.

1. Width와 Height

• width, height는 요소의 너비와 높이를 설정하는 속성입니다.
• 기본값: auto로 설정되어 있으며, 브라우저가 너비와 높이를 자동으로 계산합니다.
  • width: auto; → 부모 요소의 너비에 맞춰 자동으로 늘어납니다.
  • height: auto; → 포함된 콘텐츠 크기에 따라 자동으로 줄어듭니다.
• 단위: px (픽셀), em, vw (뷰포트 너비의 백분율) 등 다양한 단위로 지정할 수 있습니다.

2. Max-Width/Height와 Min-Width/Height

이 속성들은 요소의 크기를 제한하거나 최소 크기를 설정할 때 사용됩니다.

2-1. Max-Width와 Max-Height

• 요소의 최대 너비와 높이를 지정합니다.
• 기본값: none으로 설정되어 있으며, 제한이 없습니다.
• 단위: px, em, vw 등 다양한 단위로 지정 가능합니다.

2-2. Min-Width와 Min-Height

• 요소의 최소 너비와 높이를 지정하여 너무 작아지지 않도록 합니다.
• 기본값: 0으로 설정되어 있으며, 요소가 최소 크기 제한 없이 줄어듭니다.
• 단위: px, em, vw 등 다양한 단위로 지정 가능합니다.

CSS 단위

요소의 크기나 여백 등을 지정할 때 사용하는 주요 CSS 단위들:

• px: 픽셀. 고정된 크기를 설정할 때 사용합니다.
• %: 부모 요소의 크기를 기준으로 하는 상대적인 백분율.
• em: 요소의 글꼴 크기에 상대적인 크기.
• rem: 루트 요소 (html)의 글꼴 크기에 상대적인 크기.
• vw: 뷰포트의 너비를 기준으로 하는 백분율 (1vw = 뷰포트 너비의 1%).
• vh: 뷰포트의 높이를 기준으로 하는 백분율 (1vh = 뷰포트 높이의 1%).

Margin과 Padding

margin과 padding은 요소 주위의 여백을 지정하는 데 사용됩니다.

Margin

• 요소의 외부 여백을 지정합니다. 요소와 요소 사이의 간격을 만듭니다.
• 기본값: 0 (여백 없음).
• 값: auto는 브라우저가 여백을 자동으로 계산합니다.
• 단위: px, em, vw 등 다양한 단위로 지정 가능합니다.
• 특징: margin은 음수 값을 가질 수 있어, 요소 간 간격을 줄이거나 겹치게 할 수 있습니다.

개별 속성

• margin-top, margin-right, margin-bottom, margin-left로 개별적으로 설정 가능.

단축 속성

• margin: 10px 20px; → 상하 (top, bottom) 10px, 좌우 (left, right) 20px.
• margin: 10px 20px 30px; → 상 (top) 10px, 좌우 (left, right) 20px, 하 (bottom) 30px.
• margin: 10px 20px 30px 40px; → 상 (top) 10px, 우 (right) 20px, 하 (bottom) 30px, 좌 (left) 40px (시계방향).

Padding

• 요소의 내부 여백을 지정합니다. 콘텐츠와 요소의 경계선(border) 사이의 간격을 만듭니다.
• 기본값: 0 (내부 여백 없음).
• 단위: px, em, vw 등 다양한 단위로 지정 가능합니다.
• 특징: % 단위는 부모 요소의 가로 너비를 기준으로 여백을 설정합니다.

개별 속성

• padding-top, padding-right, padding-bottom, padding-left로 개별적으로 설정 가능.

단축 속성

• padding 속성도 margin과 동일하게 단축 속성 형식으로 사용할 수 있습니다.

---