레이아웃 기본

슬리드 웹페이지의 구조

Slidde.co는 간단한 4계층 구조를 사용합니다:

페이지

페이지 계층은 최상단에 있으며, 글꼴, 색상, 링크 스타일과 같은 글로벌 스타일을 설정하는 데 사용됩니다. CSS 속성은 상속 가능하기 때문입니다.

선택적으로 CSS 변수를 사용하여 템플릿을 더 사용자 친화적으로 만들 수 있습니다.

페이지 요소를 직접 선택할 수 없는 경우, 도구 모음에서 페이지 선택 옵션을 사용하세요.

해시 섹션 기능은 다중 페이지 웹사이트를 시뮬레이션할 수 있습니다. 이 데모를 확인하세요: Demo Link

슬라이드

슬라이드는 페이지 아래의 첫 번째 레벨 요소로, 콘텐츠를 분할하는 데 사용됩니다.

• "링크 인 바이오" 페이지와 같은 간단한 페이지는 슬라이드가 하나만 있을 수 있습니다.
• 복잡한 랜딩 페이지는 #header, #hero, #works, #contact, #footer와 같은 여러 섹션을 포함할 수 있습니다.

앵커 ID (HTML ID)는 본질적으로 HTML ID입니다. 슬라이드 내의 콘텐츠에 따라 이름을 지정하여 “#ID”와 같은 링크를 사용하여 쉽게 탐색할 수 있습니다. 건너뛰기 링크에 대해 더 알아보기.

최종 웹사이트에서 슬라이드를 숨기고 저장하려면 숨김 속성을 확인하세요. 이는 파워포인트의 숨겨진 슬라이드와 유사하며 튜토리얼에도 사용할 수 있습니다.

고정 기능은 플로팅 내비게이션 바 또는 기타 요소에 사용됩니다. 예제를 보려면 여기를 참조하세요: Sticky Demo

컨테이너

컨테이너는 반응형 너비와 다중 열 디스플레이를 관리합니다.

• 모바일과 데스크톱 너비는 일반적으로 다릅니다. 컨테이너의 너비 속성을 사용하여 기기 간 적응형 너비를 설정하세요.
• 열은 컨테이너 내의 열 수를 정의합니다. x/12와 같은 너비를 설정할 수 있습니다 (예: 각각 50% 너비의 두 개의 6/12 열).

각 열은 수평 및 수직 정렬 설정도 가질 수 있습니다.

기타

기타 요소는 인라인 요소로, 컨테이너 내부에 배치할 수 있습니다.

이 구조화된 접근 방식을 따르면 Slidde.co를 사용하여 시각적으로 매력적이고 반응형인 웹 페이지를 쉽게 만들 수 있습니다.