🌫️ WEb - box model (css)

모든 HTML 요소를 (사각형) 박스로 표현

🌫️ box의 구성

• margin : 이 박스와 다른 요소 사이의 공백 , 가장 바깥쪽 영역

• border : 콘텐츠와 패딩을 감싸는 테두리 영역

• padding : 콘텐츠 주위에 위치하는 공백 영역

• content : 콘텐츠가 표시되는 영역

• width / height : 요소의 너비와 높이를 지정

🌫️ box-sizing 속성

• {
  box-sizing: border-box;
  }

• {
  box-sizing: content-box;
  }

🌫️ 박스 타입

block(위 아래) & inline (양옆)

✔️ block 타입 특징

• 항상 새로운 행으로 나뉨

• width와 height 속성을 사용하여 너비와 높이를 지정할 수 있음

• 기본적으로 width 속성을 지정하지 않으면 박스는 inline 방향으로 사용 가능한 공간을 모두 차지함
  (너비를 사용가능한 공간의 100%로 채우는것)

• 대표적인 block 타입 태그 : h1~6 , p , div

✔️ inline 타입 특징

• 새로운 행으로 나뉘지 않음

• width와 height 속성을 사용할 수 없음

• 수직방향 > padding, margins, borders가 적용되지만 다른 요소를 밀어낼 수는 없음

• 수평방향 > padding, margins, borders가 적용되어 다른 요소를 밀어낼 수 있음

• 대표적인 inline 타입 태그 : a , img, span

✔️ shorthand

• border

  • border : 1px solid black;

• margin & padding

/*  4개- 상우하좌- */

margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;

/* 3개 상/좌우/하 */

margin: 10px 20px 30px;
padding: 10px 20px 30px;

/* 2개 - 상하/좌우 */

margin : 10px 20px;
padding 10px 20px;

/* 1개 - 공통 */

margin: 10px;
padding: 10px;

• display: inline-block

  • inline과 block 요소 사이의 중간 지점을 제공하는 display 값

  • 요소가 줄 바꿈 되는것을 원하지 않으면서 너비와 높이를 적용하고 싶은 경우에 사용

  • block 요소의 특징을 가짐

    • 너비 및 높이 속성이 준수

    • 패딩, 여백 및 테두리로 인해 다른 요소가 상자에서 밀려납니다.

• margin dollapsing (마진상쇄)

  • 두 block 타입 요소의 martin top과 bottom이 만나 큰 margin으로 결합되는 현상