[프론트엔드입문] 8-1 CSS BOX 모델

일자 : 24-2 9주차 (1)

1. CSS Box 모델

[1] CSS Box Model

: HTML 문서에서 content를 표현할 때 margin, border, padding, content의 구성과 관계

1) HTML 태그는 사각형 박스로 처리

• 각 HTML 태그 요소를 하나의 박스로 다룸
• 박스 크기, 배경 색, 여백, 옆 박스와의 거리 등 제어 가능
  • Margin : 외부 여백
  • Padding : block 내부와 content 사이의 여백
  • Border : block의 테두리
  • Content : 화면에 표시할 내용이 차지하는 공간

[2] CSS Box Model properties

2. Borders, margin, padding 관련 스타일

[1] CSS Border

1) 종류

border-style	show
dotted	Dotted
dashed	dashed
solid	solid
double	double
groove	groove
ridge	ridge
inset	inset
outset	outset
none	none
hidden	hidden
mix	mix

2) witdh 및 color

border-width : {선 굵기} {선 굵기} {선 굵기} {선 굵기};
border-color : {색상} {색상} {색상} {색상};

2) Individual Sides (개별 측면)

border-top-style : {선 종류};
border-right-style : {선 종류};
border-bottom-style : {선 종류};
border-left-style : {선 종류};

3) Shorthand Property

border-left : {선 굵기} {선 종류} {색상};

4) Rounded Borders

border : {선 굵기} {선 종류} {색상};
border-radius : {굵기 사이즈}

[2] Margin/Padding - Shorthand Property

1) Margin/Padding 여백 설정 방법

1. Margin/Padding : 25px
   • 여백 입력: 네 방향 모두 같은 여백 설정
2. Margin/Padding : 25px 50px
   • 여백 입력: 25px(상,하) / 50px(좌,우)
3. Margin/Padding : 25px 50px 75px
   • 위쪽 여백(25px), 좌우 여백(50px), 아래쪽 여백(75px)으로 설정
4. Margin/Padding : 25px 50px 75px 100px
   • 네 방향(위, 오른쪽, 아래, 왼쪽)
   • 모두 다른 크기의 여백 설정

[3-1] The auto Value

: Margin을 이용한 가로 방향으로 content 가운데 정렬

• Margin의 값을 auto로 설정

div{
  width : 300px;
  margin : auto;
  border : 1px solid red;

[3-2] The inherit Value

1. 의미
   : 부모 요소의 값을 강제로 상속받는다.
2. 사용 이유
   : 기본적으로 상속되지 않는 속성(예: border, margin, padding 등)을 상속해야 할 때 유용하다.
3. 상속 기본 규칙:
   • 자동으로 상속되는 속성: 텍스트와 관련된 속성 (color, font-family, visibility 등).
   • 상속되지 않는 속성: 박스 모델 속성 (width, height, margin, padding, border, background 등).

[4] Max-width, Min-width

: box의 너비 최대 최소 설정 가능

min-width : {넓이}
max-width : {넓이}

---