섹션 7: HTML & CSS 레이아웃 및 포지셔닝 이해 [17일차]

안녕하세요! 오늘은 CSS 속성 중 몇 가지를 살펴보고, 이를 활용하는 방법에 대해 이야기해보겠습니다. CSS는 웹페이지의 레이아웃과 디자인을 정의하는 중요한 언어입니다. 여기서 다룰 내용은 box-sizing, position, display, 그리고 object-fit 속성입니다.

1. Box-Sizing 속성: 이 속성은 요소의 크기 계산 방법을 정의합니다.

   • content-box: 이 값은 기본값으로, 요소의 총 너비와 높이는 border와 padding을 제외한 순수 content 영역으로 계산됩니다.
   • border-box: 이 값을 사용하면, 요소의 너비와 높이가 border와 padding을 포함하여 계산됩니다. 이는 레이아웃을 보다 쉽게 관리할 수 있게 해주며, 많은 개발자들이 선호하는 방식입니다.

2. Position 속성: 이 속성은 요소의 위치를 어떻게 정의할지 결정합니다.

   • absolute: 절대 위치를 가지며, 가장 가까운 상대적 위치를 가진 조상 요소에 대해 상대적으로 배치됩니다.
   • fixed: 고정 위치를 가지며, 항상 뷰포트에 대해 상대적으로 배치됩니다. 스크롤 시에도 같은 위치에 머무릅니다.

3. Display 속성: 이 속성은 요소가 어떻게 표시될지 결정합니다.

   • flex: 이 값은 유연한 박스 레이아웃을 제공합니다. 요소들이 컨테이너 공간 내에서 유연하게 크기와 순서가 조정됩니다.

4. Object-Fit 속성: 이 속성은 <img> 또는 <video> 요소의 콘텐츠 크기를 어떻게 조정할지 정의합니다.

   • fill: 요소의 전체 콘텐츠를 컨테이너에 맞춰 늘립니다.
   • contain: 비율을 유지하면서 요소의 전체 콘텐츠가 컨테이너에 맞게 조정됩니다.
   • cover: 비율을 유지하면서 컨텐츠의 적어도 한 부분이 컨테이너의 전체 영역을 채우도록 조정됩니다.

5. Justify-Content 속성: 이 속성은 Flex 컨테이너 내에서 아이템들이 어떻게 정렬될지 결정합니다.

   • center: 아이템들이 컨테이너의 중앙에 배치됩니다.

이러한 속성들은 웹페이지의 다양한 요소를 제어하는 데 매우 유용하며, 웹 디자인을 더욱 풍부하고 유연하게 만들어줍니다. CSS는 웹 개발의 핵심 요소이며, 이러한 속성들을 잘 이해하고 사용하는 것이 중요합니다. 다음 시간에는 또 다른 CSS 속성들을 살펴보겠습니다. CSS를 통해 멋진 웹사이트를 만들어보세요!