[Front-End] Box

박스

html 엘리먼트 구분

• block element : 화면 전체를 사용하는 태그
  - 한 개의 독립된 덩어리 = 하나의 큰 그룹
  - 블록 레벨 요소는 다른 블록 레벨 요소와 인라인 레벨 요소를 포함할 수 있다.

• inline level element: 화면 일부를 차지하는 태그
  - “행 안의 일부”라는 의미로, “텍스트”와 동격의 요소이기 때문에
  “텍스트 레벨 요소”라 부르기도 한다.
  - 블록레벨 요소는 포함할 수 없으며, 인라인 레벨 요소는 반드시 블록 레벨 요소 안에 포함되어 있어야 한다.

박스의 기본 크기를 결정하는 특성

• 가로축: 부모를 가득 채운다
• 세로축: 자신이 포함하고 있는 내용만큼 설정이 된다. 내용이 없으면 높이가 형성되지 않는다.

박스의 크기를 구성하는 속성의 종류

• width : 내용 영역의 가로 폭 / px, %단위
• height: 내용 영역의 세로 높이 /px, %
• border: 박스의 테두리 /굵기 종류 색상
• padding: 테두리와 내용영역 사이의 여백 /여백 사이즈에 대한 px단위

padding(패딩) 속성

• 값의 지정 형식

  • 4개: 공백으로 구분하여 4개의 값을 지정할 경우, 첫 번째 값이 상단여백임
    →패딩이 가진 4개의 값을 top부터 시계방향으로 입력하면 됨

  • 2개: 공백으로 구분하여 2개의 값을 지정할 경우
    →첫 번째 값은 “상/하”, 두번째 값은 “좌,우”로 지정한다.
    

  • 1개: 상/하/좌/우 모두 같은 크기의 여백을 지정한다는 의미

auto값의 사용

• 남은 공간을 계산하여 자식 요소를 부모의 가운데로 위치하도록
  하기에는 너무 많은 수식이 필요하다.
• width, height, margin에 대하여 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 다라 동작하는 원리가 달라진다.
  • width : auto
    → 부모 요소의 width값으로부터 padding과 border의
    크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용한다.
    → 부모요소의 width-(border-left+padding-left+ adding-right + border-right)
  • height:auto
    → 자신이 포함하고 있는 내용 영역에 대한 높이만큼 height를 설정한다.