Position 속성은 요소의 배치 방법을 결정하는 속성으로 relative
(상대좌표), absolute
(절대좌표), fixed
(고정좌표), sticky(유동좌표)
방식이 있습니다. 각 방식에 따라 좌표가 설정되는 기준이 달라집니다.
float 속성은 박스를 부모의 왼쪽이나 오른쪽에 고정시키고 문장을 그 옆으로 흐르도록 하기 위한 속입니다.
display속성은 요소를 어떻게 보여줄지를 결정하는 속성으로 block-level과 inline-level의 특징을 결정짓는 속성이기도 합니다.
block-level과 inline-level이 각각 다른 기본값을 갖고 있기 때문에 이를 잘 구별하여 사용해야 합니다.
margin은 바깥 여백을 의미하는 속성입니다. 사람이 벽에 기대어 있는 상태에서 벽을 밀 경우 사람이 밀려나게 되듯이 박스의 바깥에 여백을 형성하면 그 여백의 크기만큼 박스가 밀려나게 됩니다. padding은 박스의 크기에 관여하는 속성이지만 margin은 박스의 위치에 관여하는 속성입니다.
CSS에서 박스라 함은 <div>
, <p>
, <h1>~<h6>
등 문단을 이루는 요소를 말합니다. 문단을 구성하는 요소들은 크기와 여백을 지정할 수 있는데 이와 관련된 CSS 속성들을 박스모델이라고 합니다.