CSS 박스 모델
-속성
-출력
: 모든 HTML 요소를 사각형 형태의 박스로 취급
-> CSS를 통해 각 박스의 위치, 크기, 색상 등을 지정
*웹 페이지의 레이아웃을 구성하는 중요한 개념
-margin 속성
: 박스의 외부 여백(테두리 밖의 여백) 지정
-> 모든 방향(상우하좌)에 대해서 일괄 지정
*속성값의 개수에 따른 마진의 적용 방향
4 -> 상 우 하 좌
3 -> 상 좌우 하
2 -> 상하 좌우
1 -> 상하좌우
-> 개별 방향의 마진 지정
출력:
: 인접한 두 요소의 수직 여백(bottom - top)은 통합됨
-padding 속성
: 요소의 내용과 테두리 사이의 여백 지정
-> 모든 방향(상우하좌)에 대해서 일괄 지정
*속성값의 개수에 따른 마진의 적용 방향
4 -> 상 우 하 좌
3 -> 상 좌우 하
2 -> 상하 좌우
1 -> 상하좌우
->개별 방향의 패딩 지정
출력:
-요소의 크기 : width, height 속성
: 요소의 콘텐츠가 표시되는 영역의 폭과 높이 지정
*값 -> <길이>, %, auto
-> 하나의 속성만 지정되면 나머지 하나는 자동으로 크기 결정
-크기 제한 속성
: min-width, min-height, max-width, max-height 속성
-> 콘텐츠 영역의 최소 폭, 최소 높이, 최대 폭, 최대 높이 지정
*값 -> <길이>, % none(미지정)
출력:
-요소의 위치: position 속성
: 요소 배치의 기준이 되는 위치(요소의 위치 설정 방식) 지정
출력:
-요소의 위치: top, bottom, left, right 속성
: 요소를 포함하는 박스의 각 변으로부터 해당 요소가 떨어져 있는 거리 지정
출력:
-요소의 위치: z-index 속성
: 요소 간의 겹쳐지는 순서 지정
* 값 -> auto, <정수> (큰 값일수록 앞에 위치, 음수 가능)
* "position: relative, absolute, fixed"인 경우에만 동작
ex)
출력:
-화면 표시: display 속성
: 요소를 어떻게 표시할 지를 지정(-> 사용할 박스의 종류)
출력:
-화면 표시: overflow 속성
: 콘텐츠가 요소 박스를 벗어나는 경우의 처리 방법 지정
-> height 속성이 지정된 블록 요소에 대해서만 적용 가능
* 값 -> visible, hidden, clip, scroll, auto
-> overflow-x, overflow-y 속성
*수평 및 수직 방향으로 구분해서 오버플로의 처리 방법 지정
출력:
-화면 표시: visibility 속성
: 요소 박스의 화면 표시 여부 지정
*값 -> visible, hidden, collapse
-hidden : 화면에 표시하지 않지만, 페이지에서 원래의 공간은 그대로 차지
-collapse : hidden과 동일. 단, 테이블 요소의 경우에는 행/열 제거
-플로팅: float 속성
: 콘텐츠의 일반적인 흐름을 벗어나서 부모 요소 영역을 기준으로 해당 요소를 왼쪽/오른쪽에 배치하도록 지정
*값 -> none, left, right
-플로팅: clear 속성
: float 속성의 영향을 받는 요소의 흐름을 해제하여 바로 아래쪽에 요소를 배치하도록 지정
*값 -> none, left, right, both
출력:
-박스의 크기: box-sizing 속성
: width/height 속성을 사용하여 요소의 폭과 높이를 지정할 때 패딩과 테두리를 포함시킬지의 여부 지정
*값 -> content-box, border-box
-content-box -> 오직 콘텐츠 영역만의 크기(패딩과 테두리 미포함)
-border-box -> 패딩과 테두리를 모두 포함
-박스의 크기: resize 속성
: 사용자가 요소 박스의 크기를 조절할 수 있도록 지정
*값 -> none, both(폭/높이), horizontal(폭), vertical(높이)
* "overflow: hidden, scroll, auto" 속성과 함께 사용해야 함
