뷰포트란?
뷰포트는 웹 페이지를 표시하는 브라우저 창의 영역을 말합니다. 즉, 사용자가 웹 페이지를 보는 영역을 의미합니다. 뷰포트의 크기는 브라우저 창의 크기에 따라 달라질 수 있습니다. 웹 디자인에서 뷰포트의 크기와 레이아웃을 고려하여 웹 페이지를 반응형으로 디자인하는 것이 중요합니다.
Position 4가지 속성.
static: 기본값으로, 요소가 일반적인 문서 흐름에 따라 배치됩니다.
relative: 요소가 자기 자신의 원래 위치를 기준으로 배치됩니다. 상대적인 위치를 지정할 수 있으며, 다른 요소에게 영향을 주지 않습니다.
absolute: 요소가 문서 흐름에서 제거되고, 부모 요소 중 가장 가까운 position 속성이 static이 아닌 요소를 기준으로 배치됩니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
fixed: 요소가 뷰포트를 기준으로 배치되며, 스크롤에 관계없이 항상 고정됩니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 수 있습니다.
Float과 관련된 속성.
float: 요소를 왼쪽 또는 오른쪽으로 띄워, 텍스트나 다른 요소가 그 주위를 감싸도록 합니다. 일반적으로 띄워진 요소 주위로 다른 요소들이 흐르게 되는데, 이를 통해 다양한 레이아웃을 구성할 수 있습니다.
overflow: hidden: 요소의 내용이 넘칠 경우, 넘치는 부분을 숨김 처리합니다. 즉, 요소의 크기를 벗어나는 내용은 보이지 않게 됩니다.
clear: both: float 속성이 적용된 요소들을 기준으로 레이아웃을 설정할 때 사용됩니다. 해당 속성을 사용하면, 이전에 float 속성이 적용된 요소들이 영향을 주지 않도록 설정할 수 있습니다.
absolute의 기준.
position: absolute를 적용한 요소의 기준은 가장 가까운 부모 요소 중에서 position 속성이 static이 아닌 요소입니다. 만약 그런 부모 요소가 없다면, 문서의 최상위 요소(body)를 기준으로 배치됩니다. top, bottom, left, right 속성을 사용하여 위치를 지정할 때, 이 기준으로부터의 거리를 설정할 수 있습니다.
box-sizing 속성.
border-box: 요소의 전체 크기를 계산할 때, border와 padding을 포함합니다. 즉, width와 height 속성에 명시한 값이 실제 요소의 너비와 높이에 적용됩니다.
content-box: 요소의 전체 크기를 계산할 때, border와 padding은 제외하고 width와 height만을 고려합니다. 즉, width와 height 속성에 명시한 값이 실제 요소의 내용 영역의 너비와 높이에만 적용됩니다.
