[SeSAC] CSS(박스 모델, 요소 조정)

박스 모델(Box Model)

요소가 웹 페이지에서 차지하는 영역을 정의하는 방법이다.

박스 모델은 4가지 요소가 있다.

• 콘텐츠(content) : 실질적인 내용이 담겨있는 공간으로 텍스트나 이미지가 들어간다.
  • 제어 속성 : width {값}, height {값}
• 패딩(padding) : 콘텐츠와 테두리 사이에 공간으로 요소의 내부 여백을 적용한다.
  • 제어 속성 : padding {값}
• 테두리(border) : 패딩과 마진 사이의 위치하여 가장자리 부분을 감싼다
  • 제어 속성 : border {두께} {모양} {색상}
• 마진(margin) : 요소의 외부(바깥) 공간으로 여백, 간격을 설정한다.
  • 제어 속성 : margin {값}
• box-sizing
  • width와 height 에 padding과 border 포함할지 여부를 결정한다.
  • box-sizing : content-box(defalut)
    • content 영역기준으로 width, height를 정의한다.
    • padding, border에 값을 주면 해당 요소의 공간이 커진다, 뚱뚱해진다.
  • box-sizing : border-box
    • content, padding, border 포함하여 width, height를 정의한다.
    • border 까지 크기를 지정했기 때문에 그 안에서 값이 결정된다.

---

display 속성

요소의 배치 방식을 지정하는 속성이다.

• inline : 컨텐츠의 내용만큼 공간을 차지한다. 수평 배치된다.
• block : 한 줄 전체를 차지하여 block 레벨의 요소를 사용하면 수직배치 된다.
• inline-block : inline 처럼 수평 배치되면서 block의 성질도 있어 너비와 높이를 지정할 수 있다.
• none : 보이지 않게 한다.
• flex : 부모 요소에 적용하여 자식 요소들이 플렉스 컨테이너에 배치된다.
• grid : 부모 요소에 적용하여 행과 열을 기준으로 자식요소를 배치한다.

---

position 속성

요소의 위치를 직접 지정할 수 있다

• static : 기본속성으로 흐름에 따라 배치한다.
• relative : 자신의 원래 위치로 부터 이동된다.
• absolute : relative 값이 있는 가장 가까운 조상 기준으로 배치된다. 일반적인 흐름에서 벗어난다.
• fixed : 뷰포트 기준으로 배치된다. 일반적인 흐름에서 벗어난다.
• sticky : 스크롤에 따라 fixed 처럼 움직이긴 하나 부모 태그에 이상으로 벗어나진 못한다.

position 속성을 받은 요소는 top, right, bottom, left 속성을 추가하여 위치를 이동시킨다.