구조 계층

Webflow의 요소 동작을 이해하는 것이 중요합니다. 여기서는 세 가지 측면에서 요소의 계층 구조를 논의합니다.

• 놓기 — 객체가 서로 내부에 배치되는 방식(예: 조상, 자손, 동료)
• 전송된 텍스트 스타일 — 텍스트 스타일이 조상에서 자손으로 전달되는 방법
• 차원 관계 — 조상 요소와 하위 요소의 차원이 서로 어떻게 영향을 미치는지

놓기

배치에는 한 개체를 다른 개체 내에 배치하는 작업이 포함됩니다. 예를 들어 제목이 div 내에 배치된 경우 해당 제목은 이제 div 내에 배치됩니다. 박스 모델에 대해 알아보세요.

네비게이터에서 배치 관찰

배치는 탐색기 패널에서 가장 명확하게 관찰할 수 있습니다.

div 내부에 배치되면 제목은 div의 하위 요소가 됩니다. 추가되는 다른 요소도 div 요소의 하위 요소입니다. 그들은 또한 서로 동료입니다.

 계층 구조는 모든 웹 사이트의 최상위 요소인 본문에서 시작됩니다. 그 바로 아래에는 모든 하위 요소가 약간 들여쓰기되어 있습니다. 가로 들여쓰기는 해당 요소가 하위 항목임을 나타냅니다. 이 수준의 요소에 대한 상위 요소는 Body입니다.

Body 요소 내의 Div는 그 안에 자리잡은 콘텐츠의 상위 요소 역할을 합니다. 해당 콘텐츠는 더 들여쓰기되어 해당 요소가 Div의 하위 항목임을 나타냅니다.

탐색경로 막대의 위치를 관찰하세요.

계층 구조를 볼 수 있는 두 번째 위치는 이동 경로 막대의 캔버스 아래입니다. 임의의 요소를 선택하면 상위 요소와의 관계를 빠르게 식별할 수 있습니다. 그러나 피어 요소는 표시되지 않고 직계 조상과 해당 조상의 직계 조상 등만 표시됩니다.

전송된 텍스트 스타일

요소에 글꼴 스타일이 있는 경우 이러한 스타일은 해당 하위 요소와 후속 하위 요소로 전달됩니다. 예를 들어 Body 요소의 글꼴 유형을 수정하면 모든 하위 요소가 동일한 글꼴을 상속합니다. 하위 항목은 상위 항목과 이전 상위 항목에서 상속된 스타일을 바꿀 수 있습니다. 예를 들어 div를 선택하고 글꼴 유형을 수정하면 모든 하위 항목이 동일한 글꼴을 상속합니다. 그러나 하위 요소를 선택하고 글꼴 유형을 변경하면 상위 div에서 상속된 글꼴이 대체됩니다. 텍스트 스타일 상속에 대해 자세히 알아보세요.

스타일 패널은 어떤 스타일이 상속되고 어디에서 상속되는지 식별하는 간단한 방법을 제공합니다. 주황색 레이블과 아이콘은 스타일이 상위 요소나 상위 클래스 또는 태그에서 상속되고 있음을 나타냅니다.

차원 관계

대부분의 요소는 그 안에 포함된 콘텐츠에 따라 크기가 결정됩니다. 예를 들어, div 기본적으로 높이가 설정되어 있지 않습니다. 그러나 div 증가시킬 것이다 div키가.

자손은 조상 요소의 크기에 영향을 주지만, 조상 요소에 고정된 높이나 너비를 할당하면 이를 재정의합니다. 이는 내용이 더 이상 조상 컨테이너의 높이에 영향을 미치지 않음을 의미합니다. 결과적으로 해당 컨테이너에 추가 콘텐츠가 있으면 콘텐츠가 컨테이너를 넘어 확장됩니다. 오버플로를 숨기고 고정 높이 컨테이너에 스크롤 막대를 연결하는 방법을 알아보세요.