레이아웃 기초

슬리드 웹페이지의 구조

Slidde.co는 간단한 네 가지 레이어 구조를 사용합니다:

• userCompName.Page (글로벌 스타일)
• userCompName.Slide (콘텐츠 분할)
• userCompName.Container (반응형 너비, 여러 열)
• 인라인 요소 (특정 콘텐츠)

userCompName.Page

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

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

userCompName.Page 요소를 직접 선택할 수 없는 경우, 도구 모음에서 userCompOption.Select page 옵션을 사용하세요. userCompOption.hashSection 기능은 다중 페이지 웹사이트를 시뮬레이션할 수 있습니다. 이 데모를 확인하세요: [데모 링크](https://demo-76e69f00.slidde.co/)

userCompName.Slide

userCompName.Slide는 userCompName.Page 아래의 첫 번째 레벨 요소로, 콘텐츠를 분할하는 데 사용됩니다.

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

userCompOption.htmlId는 본질적으로 HTML ID입니다. userCompName.Slide 내의 콘텐츠에 따라 이름을 지정하여 “#ID”와 같은 링크를 사용한 쉬운 탐색을 가능하게 합니다. [스킵 링크에 대해 더 알아보기](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#skip_links).

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

userCompOption.sticky 기능은 떠다니는 내비게이션 바나 기타 요소를 위한 것입니다. 여기에서 예제를 확인하세요: [Sticky Demo](https://demo-09963200.slidde.co/)

userCompName.Container

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

• 모바일과 데스크톱의 너비는 보통 다릅니다. userCompName.Container에서 userCompOption.width 속성을 사용하여 기기 간 적응형 너비를 설정하세요.
• 열은 컨테이너에 몇 개의 열이 있는지를 정의합니다. 너비를 x/12와 같이 설정할 수 있습니다 (예: 각각 50% 너비를 위한 두 개의 6/12 열).

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

기타

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

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