스타일 커스터마이징

소개

Slidde.co는 각 컴포넌트 내에서 CSS를 직접 사용하여 스타일을 커스터마이징할 수 있는 독특한 웹 디자인 접근 방식을 제공합니다. Webflow와 같은 전통적인 웹사이트 빌더와 달리, Slidde.co는 다음과 같은 점에서 두드러집니다:

• 표준 CSS 사용:
  • 모든 웹사이트 스타일을 구현할 수 있습니다.
  • 스타일을 다른 웹사이트 빌더로 내보내어 코드 기반 개발로 전환할 경우 재사용할 수 있습니다.
• 프리셋 값:
  • Tailwind와 같은 라이브러리에서 영감을 받아, Slidde.co는 스타일에 대한 프리셋 값을 제공하여 타이핑 대신 마우스 클릭으로 옵션을 선택할 수 있습니다.
• 명확한 구조:
  • 복잡한 스타일에서도 설정이 명확하게 유지되며 DOM 구조를 방해하지 않습니다.

샘플 컴포넌트: 수평 네비게이션 바

복잡한 컴포넌트인 수평 네비게이션 바를 예로 들어 다섯 가지 커스터마이징 영역을 탐색해 봅시다:

1. 커스텀 스타일: 전체 네비게이션 바에 대한 CSS.
2. 컨테이너 커스텀 스타일: 주로 로고나 제목을 포함하는 왼쪽 컨테이너에 대한 스타일.
3. 버튼 커스텀 스타일: 데스크톱 버튼에 대한 스타일.
4. 버튼 활성 스타일: 활성화된 데스크톱 버튼에 대한 스타일.
5. 토글 버튼 커스텀 스타일: 모바일 햄버거 메뉴 버튼에 대한 스타일.

전체 네비게이션 바 예제를 템플릿에서 확인할 수 있습니다.

고급 CSS 문법

Slidde.co는 보다 정밀한 스타일링을 위해 고급 CSS 문법을 지원합니다:

• 점 구분자: 속성과 수정자를 구분하기 위해 .을 사용합니다.
• 카멜케이스: CSS 속성 이름에 카멜케이스를 사용합니다.

예시:

• &:hover.color: 호버 시 폰트 색상.
• &:hover.borderColor: 호버 시 테두리 색상.
• padding: 모든 화면 크기에 대한 패딩.
• md.padding: 중간 크기 이상의 화면(데스크톱)에 대한 패딩.

모바일과 데스크톱에 다른 패딩을 설정하려면: padding: .5rem & md.padding:2rem

표준 CSS 선택자:

• & > img.height: 현재 요소 내의 1단계 img 요소의 높이.
• &:first-child.color: 첫 번째 자식 요소에 대한 ::first-child 의사 클래스.
• &::after.content: 추가 요소를 추가하기 위한 ::after 의사 클래스.

이 지침을 따르면 Slidde.co를 사용하여 웹 구성 요소를 정밀하고 쉽게 디자인하고 사용자 정의할 수 있습니다.