에디터 X: 요소 크기 설정하기

속성 패널의 옵션을 사용해 요소의 크기를 원하는 대로 정확하게 설정할 수 있습니다. 픽셀 단위의 정확도를 위해 고정 너비 및 높이 값을 입력하거나, 요소가 모든 화면 크기에 원활하게 조정되도록 유동적인 측정을 사용하세요.

사이트에 콘텐츠를 추가하기 전, 해당 로직에 따라 구조를 생성하고 레이어를 구축하는 것이 중요합니다. 레이어는 상위 레이어가 하위 레이어의 부모 역할을 하는 부모 모델로 구성됩니다.

상위 요소의 크기는 상위 요소에 비해 상대적으로 크기가 조정되는 하위 요소에 영향을 줄 수 있습니다. 디자인이 반응형을 유지하려면, 레이어의 크기와 위치를 위에서 아래로 정의하세요. 

요소 크기 조정 시에는 속성 패널에서 고정 또는 변동 크기 조정 옵션 사용 여부를 선택할 수 있습니다.

에디터 X에서는 다양한 CSS 측정 단위를 사용해 요소의 크기를 조정할 수 있습니다. 사용할 수 있는 측정 유형은 표시 영역 너비가 변경될 때 요소의 크기를 조정하려는 방법에 따라 다릅니다.

아래를 클릭해 각 측정 단위 및 사용 시기에 대해 알아보세요.

계산은 유연한 측정 단위를 사용하면서 요소의 크기를 정확하게 조정해야 할 때 유용한 도구입니다. 수학적 원칙을 사용해 요소의 너비 또는 높이를 결정하는 "공식"을 작성할 수 있습니다. 이 계산에서 서로 다른 측정값을 결합할 수도 있습니다(예: vh 및 px).

예를 들어, 계산을 사용해 모든 화면 크기에서 정확한 표시 영역 높이(100vh)를 함께 차지하는 머리글(100픽셀)과 섹션을 디자인할 수 있습니다. 섹션의 높이를 (100vh - 100px)로 설정할 수 있으므로 머리글은 계산 시 항상 고려됩니다(100px). 

상위 컨테이너의 전체 배경을 덮도록 요소를 늘립니다. 그리드를 사용할 경우 특정 셀 또는 전체 그리드 영역을 덮도록 요소를 늘릴 수 있습니다. 

요소를 늘리면 요소의 너비와 높이가 자동으로 설정되어 표시 영역에 따라 요소 및 컨테이너의 크기가 조정됩니다. 요소가 늘어나므로 너비 및 높이 값은 상위 컨테이너와 동일합니다.