CSS 박스 속성
HTML 요소를 사각형 형태의 박스로 간주하는 것으로, CSS를 총해 각 박스의 위치, 크기, 색상 등을 지정한다.
ㄴ padding속성은 내용과 테두리 사이의 간격을 지정
ㄴ border속성은 테두리 두께와 색상 등 스타일을 지정
ㄴ margin속성은 테두리 밖이 다른 요소 사이의 간격을 지정
요소의 위치 설정 - position 속성
HTML 요소를 배치 할 때 기준이 되는 위치로, 위치 설정 방식을 지정
position : static | absolute | relative | fixed ;
- static => 페이지의 정상적인 흐름에 따라 현재의 위치를 요소의 위치로 결정,
별도로 위치 지정/변경 불가(top,bottom,left,right 속성값 무시)(기본값) - absolute => 웹브라우저(또는 컨테이너) 왼쪽 상단의 모서리를 기준으로 지정한 위치만큼 이동하여 배치
- relative => 해당 요소의 현재 위치를 (0,0)으로 정하고, 그 기준으로 지정한 위치만큼 이동하여 배치
- fixed => 브라우저 윈도우를 기준으로 지정한 위치만큼 이동하여 요소를 배치
(윈도우에서 고정된 위치는 스크롤시에도 화면에서 요소가 움직이지 않음)
top, bottom, left, right 속성
박스의 포함 블록의 각 변을 기준으로 해당 요소가 떨어져 있는 거리를 지정
position 속성의 값이 static면 top, bottom, left, right 속성은 값을 지정해도 효과가 없다.
position 속성의 값이 relative면 정상적으로 위치하는 곳에서 속성의 종류에 따라 상하좌우로 이동한다.(양수-그대로, 음수-반대쪽으로)
position 속성의 값이 absolute면 static이 아닌 값으로 지정된 가장 가까운 상위 요소의 블록의 각 변을 기준으로 거리를 계산하고,
top, bottom, left, right : none | <길이> | <퍼센트> ;
- none => (기본값)브라우저가 자동으로 계산
- <길이> => px, cm 등으로 오프셋을 지정(음수 가능)
- <퍼센트> => 포함 블록에 대한 백분율로 오프셋으로 지정(음수 가능)
z_index 속성
position 속성의 기본값을 벗어나서 요소 간 겹침이 발생 할 경우 앞에 위치 할 우선순위를 지정
position 속성의 값이 relative, absolute, fixed로 지정된 경우에만 동작한다.
정상적인 겹침 순서는 나중에 수행되는 요소가 이전 요소보다 앞에 위치한다.
z-index : auto | <정수> ;
- auto => (기본값)순서를 부모 요소가 동일하게 지정
- <정수> => 큰 값일수록 앞에 위치(음수 가능)
